프로그래밍/Java

[Java] WebDriver(Chrome)를 이용하여 웹 페이지 스크린샷 생성하기

일단개그하다 2018. 4. 21. 16:30

WebDriver를 이용하면 자바를 이용하여 특정 웹 페이지의 정보를 가져오거나 스크린샷을 생성 할 수 있다

 

https://sites.google.com/a/chromium.org/chromedriver/downloads

우선 자바를 이용하여 크롬을 컨트롤 해야 하므로 다운로드 링크로 들어가서 각자 OS에 맞추어서 드라이버를 다운로드 한다

 

이클립스에 프로젝트를 만들고 Maven으로 설정하고

다운로드한 웹 드라이버는 해당 프로젝트의 webdriver 디렉토리에 이동 한다

웹 드라이버의 라이브러리는 2가지가 필요하다

selenium-server

gson

위 두가지 라이브러리는 https://mvnrepository.com/에서 검색하여

pom.xml 파일에 등록한 후 Maven Update를 하여

라이브러리를 다운로드 받는다

 

import java.io.FileOutputStream;
import java.io.IOException;

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

public class AppMain {
	final static String NAVER_URL = "https://www.naver.com";
	final static String ACCOUNT_ID = "{{ID}}";
	final static String ACCOUNT_PASSWORD = "{{PASSWORD}}";
	
	public static void main(String[] args) throws IOException {
		// 크롬 드라이버의 경로를 설정
		System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir") + "/webdriver/chromedriver");
    
		// 드라이버 실행
		WebDriver driver = new ChromeDriver();
		driver.get(NAVER_URL);
		
		// 로그인
		WebElement accountElement = driver.findElement(By.id("account"));
		WebElement idTextBox = accountElement.findElement(By.id("id"));
		idTextBox.sendKeys(ACCOUNT_ID);
		WebElement pwTextBox = accountElement.findElement(By.id("pw"));
		pwTextBox.sendKeys(ACCOUNT_PASSWORD);
		WebElement loginSpan = accountElement.findElement(By.className("btn_login"));
		WebElement loginButton = loginSpan.findElement(By.tagName("input"));
		loginButton.click();
		
		// 브라우져 등록 페이지
		WebElement registBrowser = driver.findElement(By.id("frmNIDLogin")).findElement(By.className("login_form")).findElement(By.className("btn_upload")).findElement(By.tagName("a"));
		registBrowser.click();
		WebElement loginPersistButton = driver.findElement(By.id("login_maintain")).findElement(By.className("btn_maintain")).findElement(By.tagName("a"));
		loginPersistButton.click();
		
		// 네이버 미니미
		WebElement minimeElement = driver.findElement(By.id("minime"));
		String minimeURL = minimeElement.getAttribute("src");
		System.out.println(minimeURL);
		
		// 스크린샷
		TakesScreenshot screenshot = (TakesScreenshot)driver;
		byte[] imageByte = screenshot.getScreenshotAs(OutputType.BYTES);
		try (FileOutputStream fos = new FileOutputStream(System.getProperty("user.dir") + "/screenshot.png")) {
		   fos.write(imageByte);
		   fos.close();
		}
		
		// 드라이버 종료
		driver.quit();
	}
}

프로젝트의 AppMain.java의 코드이다

각 요소를 선택하거나 값을 입력하기 위해서는 해당 요소를 찾아야 하는데

크롬 개발자 도구를 이용하여 요소의 아이디나 클래스를 확인하여 선택자로 사용하도록 한다

 

상단의 네이버 아이디와 비밀번호를 각자의 값으로 바꾼 후 실행하면 크롬이 실행된다

아이디, 비밀번호가 입력이 되고 로그인 버튼을 클릭한다

네이버에서는 새로운 브라우저 등록 페이지로 이동하고 등록 페이지에서 등록 버튼을 누르고

로그인 유지 버튼을 누른다

그 후 네이버 메인 페이지에서 스크린샷을 찍고 웹 드라이버를 종료한다

 

스크린샷에는 로그인 유저 정보 영역이 보이지 않을 수 있는데 해당 영역이 iframe이라서 부모 페이지의 로딩 완료 이벤트는 받아도

iframe 페이지의 로딩 완료 이벤트는 받지 못하여서 스크린삿에 나타나지 않는것으로 추측된다