[Selenium]웹 자동화를 위한 Selenium 개발 환경 구축3 - 웹탐색, 데이터 추출(feat. cssSelector)

서론

 

이전에 작성했던 [Selenium] 웹 자동화를 위한 Selenium 개발 환경 구축 2(feat. WebDriver 설치) 글에 이어서 3편을 작성했습니다. 3편에서는 cssSelector를 이용하여 특정 웹사이트를 탐색 후 원하는 정보를 추출하는 방법에 대해 작성했습니다.

 

[실행 환경]

 

openJDK 1.8

Eclipse

Chrome 90.0.4430.85

 

[이전 글]

 

1. [Selenium] 웹 자동화를 위한 Selenium 개발 환경 구축 1(feat. Maven)

goldswan.tistory.com/17?category=475248

[Selenium]웹 자동화를 위한 Selenium 개발 환경 구축1(feat. Maven)

2. [Selenium]웹 자동화를 위한 Selenium 개발 환경 구축 2(feat. WebDriver 설치)

goldswan.tistory.com/20?category=475248

[Selenium]웹 자동화를 위한 Selenium 개발 환경 구축2(feat. WebDriver 설치)

 

 

---

 

본론

 

[웹 구조의 이해]

 

Selenium을 통해 웹을 탐색하고 데이터를 추출하기 위해선 웹 구조에 대한 이해가 필요합니다. 웹 문서는 HTML + CSS로 이루어져 있습니다. Selenium은 웹 문서의 HTML, CSS의 특정 요소들을 찾아 동작을 시킬 수 있으므로 웹 자동화를 위해선 HTML, CSS의 기초지식과 동작을 구현해낼 수 있는 언어(예제에서는 Java)의 기초 지식이 필요합니다.

 

[추출 방법]

 

웹 페이지의 특정 요소를 찾는 방법은 xpath, id, cssSelector, className 활용 등 Selenium 프레임워크가 지원하는 한도 내에서 여러 가지 방법이 있습니다.

 

[cssSelector를 선택한 이유]

 

1. [Relative XPath Helper]와 같은 크롬 익스텐션을 이용하여 HTML, CSS 구조를 몰라도 xpath를 추출하여 코드에 복사 붙여 넣기 하면 손쉽게 자동화시킬 수 있습니다. 그러나 경험상 xpath를 추출해도 안 되는 경우가 많이 있었습니다.(왜 안 되는지는 의문입니다만.. 추출한 xpath가 잘못되었거나 특정 요소는 적용이 잘 안 되는 것으로 추정됩니다.) 따라서 세밀한 조작을 하기 위해 예제에선 cssSelector를 활용하여 웹 탐색과 데이터 추출을 진행했습니다.

2. 예제로 들고 있는 매일경제 사이트에 CSS 구조를 분석해보면 추출할 기사 데이터들에 동일한 CSS가 적용되어 있었습니다. 따라서 cssSelector를 사용하여 추출할 데이터들을 한 번에 List에 담은 후 Loop문을 돌면서 데이터를 출력했습니다.

[크롬 개발자 도구를 이용해 자동화 시킬 사이트의 HTML, CSS 구조 확인 과정]

 

 

 

[예제 코드]

 

import java.util.*;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class Main {

	public static void main(String[] args) {
		WebDriver driver = null;
		WebDriver driver2 = null;
		List<WebElement> webElements = null;
		String url = "";
		
		System.setProperty("webdriver.chrome.driver", "C:\\selenium\\chromedriver_win32\\chromedriver.exe");// WebDriver 압축 해제 경로 입력

		driver = new ChromeDriver();// WebDriver 객체 생성
		driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);// 로드 웹페이지에서 특정 요소를 찾을 때까지 기다리는 시간 설정
		driver.manage().timeouts().pageLoadTimeout(20, TimeUnit.SECONDS);// 페이지로드가 완료 될 때까지 기다리는 시간 설정
		driver.manage().window().maximize();// 브라우저 창 최대화
		driver.get("https://www.mk.co.kr/");// 웹 자동화 작업을 할 접속 사이트 명시
		webElements = driver.findElements(By.cssSelector("ul.gnb li a"));//상단 메뉴바의 링크 추출

		for(WebElement webElement : webElements) {
			String str = webElement.getText();
			if (str.equals("증권")) {
				url = webElement.getAttribute("href");//증권 링크 추출
				//System.out.println(url);//추출한 증권 링크 확인
			}
		}
		
		driver2 = new ChromeDriver();// WebDriver 객체 생성
		driver2.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);// 로드 웹페이지에서 특정 요소를 찾을 때까지 기다리는 시간 설정
		driver2.manage().timeouts().pageLoadTimeout(20, TimeUnit.SECONDS);// 페이지로드가 완료 될 때까지 기다리는 시간 설정
		driver2.manage().window().maximize();// 브라우저 창 최대화
		driver2.get(url);// 웹 자동화 작업을 할 접속 사이트 명시
		webElements = null;
		webElements = driver2.findElements(By.cssSelector(".news li a:link"));//기사 추출
		
		for(WebElement webElement : webElements) {
			System.out.println("기사제목 : " + webElement.getText());
			System.out.println("기사링크 : " + webElement.getAttribute("href"));
		}
	}
}

 

[실행 결과]

 

 

[예제 코드의 동작 과정]

 

1. 매일 경제 메인 화면에서 증권 버튼 탐색

2. 증권 버튼 링크 추출

3. 새로운 증권 페이지 생성

4. 메인 화면의 ". news li a:link" CSS가 적용되어 있는 기사 제목, 링크 추출

 

[Driver 객체를 driver, driver2 두 개 사용한 이유]

 

매일경제 첫 웹페이지에서 증권으로 이동하는 링크를 추출하여 click을 진행하고 이동한 증권 페이지에 기사를 추출하려 하면

 

"stale element reference: element is not attached to the page document"

 

에러가 발생합니다. 이는 페이지 이동으로 인해 driver의 문서가 유실된 것으로 판단하여 동작이 안 되는 거 같습니다. 따라서 증권 버튼의 링크만 추출하여 driver2 객체를 생성하고 크롬 창을 하나 더 만들어서 위의 에러를 해결했습니다.

 

 

---

 

결론

 

오늘은 Selenium을 활용한 웹 탐색과 데이터 추출 방법에 관하여 정리해보았습니다. 4편에서는 엑셀과 같은 파일 데이터를 읽어서 웹 화면에 입력을 자동화시키는 주제로 다뤄볼 예정입니다. 긴 글 읽어주셔서 감사합니다.