Selenium WebDriver에서 스크린샷을 찍는 방법

Selenium의 스크린샷

A Selenium Webdriver의 스크린샷 버그 분석에 사용됩니다. Selenium webdriver는 실행 중에 자동으로 스크린샷을 찍을 수 있습니다. 그러나 사용자가 직접 스크린샷을 캡처해야 하는 경우 WebDrive에 스크린샷을 찍어 Selenium에 저장하도록 알리는 TakeScreenshot 메서드를 사용해야 합니다.

셀레늄의 스크린샷

Selenium에서 스크린샷을 찍는 방법

다음은 Selenium WebDriver에서 스크린샷을 캡처하는 방법에 대한 단계별 프로세스입니다.

단계 1) 웹 드라이버 개체를 TakeScreenshot으로 변환

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

단계 2) getScreenshotAs 메소드를 호출하여 이미지 파일 생성

File SrcFile=scrShot.getScreenshotAs(OutputType.FILE);

단계 3) 원하는 위치에 파일 복사

예: 이 예에서는 다음의 화면을 캡처합니다. https://demo.guru99.com/V4/ & C:/Test.png로 저장하세요.

다음은 셀레늄의 스크린샷 코드입니다.

package Guru99TakeScreenshot;

import java.io.File;

import org.apache.commons.io.FileUtils;

import org.openqa.selenium.OutputType;

import org.openqa.selenium.TakesScreenshot;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.firefox.FirefoxDriver;

import org.testng.annotations.Test;

public class Guru99TakeScreenshot {

    @Test

    public void testGuru99TakeScreenShot() throws Exception{

		WebDriver driver ;
    	System.setProperty("webdriver.gecko.driver","C:\\geckodriver.exe");
    	driver = new FirefoxDriver();

        //goto url

        driver.get("https://demo.guru99.com/V4/");

        //Call take screenshot function

        this.takeSnapShot(driver, "c://test.png") ;     

    }

    /**

     * This function will take screenshot

     * @param webdriver

     * @param fileWithPath

     * @throws Exception

     */

    public static void takeSnapShot(WebDriver webdriver,String fileWithPath) throws Exception{

        //Convert web driver object to TakeScreenshot

        TakesScreenshot scrShot =((TakesScreenshot)webdriver);

        //Call getScreenshotAs method to create image file

                File SrcFile=scrShot.getScreenshotAs(OutputType.FILE);

            //Move image file to new destination

                File DestFile=new File(fileWithPath);

                //Copy file at destination

                FileUtils.copyFile(SrcFile, DestFile);

    }

}

알림: Selenium 버전 3.9.0 이상은 Apache Commons IO JAR을 제공하지 않습니다. 간단히 다운로드할 수 있습니다. 여기를 눌러 더 많은 정보를 찾으세요. 프로젝트에서 호출하세요.

Ashot API란 무엇입니까?

Ashot은 타사 유틸리티입니다. Yandex 스크린샷을 캡처하기 위해 Selenium WebDriver에서 지원됩니다. 개별 WebElement의 스크린샷은 물론 페이지의 전체 페이지 스크린샷도 찍는데, 이는 화면 크기보다 더 중요합니다.

Ashot API를 다운로드하고 구성하는 방법은 무엇입니까?

Ashot API를 구성하는 방법에는 두 가지가 있습니다.

  1. Maven 사용
  2. 도구를 사용하지 않고 수동으로

Maven을 통해 구성하려면:

Maven을 통해 구성

  • 파일을 저장하면 Maven이 빌드 경로에 jar를 추가합니다.
  • 이제 준비가 되었습니다!!!

종속성 도구 없이 수동으로 구성하려면

  1. We Buy Orders 신청서를 클릭하세요. https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. 지금은 최신 버전을 클릭하세요. 1.5.4 입니다
  3. 항아리를 클릭하고 다운로드하여 컴퓨터에 저장하세요.

종속성 도구 없이 수동으로 구성

  1. 빌드 경로에 jar 파일을 추가합니다.
  2. In Eclipse, 프로젝트를 마우스 오른쪽 버튼으로 클릭 -> 속성으로 이동 -> 경로 빌드 -> 라이브러리 -> 외부 jar 추가
  3. jar 파일을 선택하세요.
  4. 신청 및 마감

Ashot API로 전체 페이지 스크린샷 캡처

단계 1) 화면 크기 페이지에 대한 스크린샷만 원할 경우 Ashot 개체를 만들고 takeScreenshot() 메서드를 호출합니다.

Screenshot screenshot = new Ashot().takeScreenshot(driver);

그러나 화면 크기보다 더 큰 페이지의 스크린샷을 원하는 경우에는 takeScreenshot() 메서드를 호출하기 전에 ShootingStrategy() 메서드를 호출하여 정책을 설정하세요. 그런 다음 webdriver를 전달하는 takeScreenshot() 메서드를 호출합니다. 예를 들어 다음과 같습니다.

Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);

여기서 1000은 밀리초 단위로 스크롤되는 시간이므로 스크린샷을 찍기 위해 프로그램은 1000밀리초마다 스크롤합니다.

단계 2) : 이제 스크린샷에서 이미지를 가져와 파일에 씁니다. 파일 형식은 jpg, png 등으로 제공할 수 있습니다.

ImageIO.write(screenshot.getImage(), "jpg", new File(".\\screenshot\\fullimage.jpg"));

화면 크기보다 큰 페이지의 전체 페이지 스크린샷을 찍습니다.

예: 다음은 전체 페이지 스크린샷을 캡처하는 예입니다. https://demo.guru99.com/test/guru99home/ "screenshot.jpg" 파일에 저장하세요.

Ashot API의 ShootingStrategy 클래스를 사용하므로 화면 크기보다 더 큰 페이지의 전체 이미지를 캡처할 수 있습니다.

다음은 Selenium 프로그램의 스크린샷 코드입니다.

package Guru99;

import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

public class TestScreenshotUsingAshot {

public static void main(String[] args) throws IOException {
	
System.setProperty("webdriver.chrome.driver", "c:\\chromedriver.exe");
WebDriver driver  = new ChromeDriver();	

driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
		
Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);

ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg"));
	
	}

}

페이지의 특정 요소의 스크린샷 찍기

예: 다음은 Guru 99 로고의 요소 스크린샷을 캡처하는 예입니다. https://demo.guru99.com/test/guru99home/ 페이지로 이동하여 "ElementScreenshot.jpg" 파일에 저장합니다.

다음은 셀레늄의 스크린샷 코드입니다.

package Guru99;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
public class TestElementScreenshotUsingAshot {
public static void main(String[] args) throws IOException {
	
System.setProperty("webdriver.chrome.driver", "c:\\chromedriver.exe");
WebDriver driver  = new ChromeDriver();	

driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
		
// Find the element to take a screenshot

WebElement element = driver.findElement(By.xpath ("//*[@id=\"site-name\"]/a[1]/img"));

// Along with driver pass element also in takeScreenshot() method.

Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver,element);

ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg"));
	}
}

Ashot을 사용한 이미지 비교

package Guru99;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;

public class TestImageComaprison {

    public static void main(String[] args) throws IOException {

        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/guru99home/");

        // Find the element and take a screenshot

        WebElement logoElement = driver.findElement(By.xpath("//*[@id=\"site-name\"]/a[1]/img"));
        Screenshot logoElementScreenshot = new AShot().takeScreenshot(driver, logoElemnent);

        // read the image to compare

        BufferedImage expectedImage = ImageIO.read(new File("C:\\Guru99logo.png"));

        BufferedImage actualImage = logoElementScreenshot.getImage();

        // Create ImageDiffer object and call method makeDiff()

        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);

        if (diff.hasDiff() == true) {
            System.out.println("Images are same");

        } else {
            System.out.println("Images are different");
        }
        driver.quit();
    }
}

요약

  • Ashot API는 다음의 프리웨어입니다. Yandex.
  • Selenium에서 스크린샷을 찍는 유틸리티입니다.
  • 데스크톱 브라우저, iOS 시뮬레이터 모바일 사파리, Android Emula와 같은 다양한 플랫폼에서 개별 WebElement의 스크린샷을 찍는 데 도움이 됩니다.tor Browser.
  • 화면 크기보다 큰 페이지의 페이지 스크린샷을 찍을 수 있습니다.
  • 이 기능은 Selenium 버전 3에서 제거되었으므로 Ashot API가 좋은 옵션입니다.
  • 스크린샷을 꾸밀 수 있습니다.
  • 스크린샷 비교를 제공합니다.