Как сделать скриншот в Selenium WebDriver

Скриншот экрана в Selenium

Скриншот в Selenium Webdriver используется для анализа ошибок. Selenium webdriver может автоматически делать скриншоты во время выполнения. Но если пользователю необходимо сделать снимок экрана самостоятельно, ему необходимо воспользоваться методом TakeScreenshot, который уведомляет WebDrive о необходимости сделать снимок экрана и сохранить его в Selenium.

БЕСПЛАТНО СКАЧАТЬ КНИГИ в телеграм канале "Библиотека тестировщика"

Содержание:

Скриншот экрана в Selenium
Как сделать скриншот экрана в Selenium
Что такое Ashot API?
Как загрузить и настроить Ashot API?
Снимите скриншот всей страницы с помощью AShot API.
Скриншот экрана конкретного элемента страницы.
Сравнение изображений с помощью AShot

Как сделать скриншот экрана в 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

Здесь приведен код скриншота в selenium:.

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 – это сторонняя утилита от компании Яндекс, поддерживающая Selenium WebDriver для создания скриншотов. Она делает скриншот как отдельного Web-элемента, так и полностраничного скриншота страницы, что более существенно, чем размер экрана.

Как загрузить и настроить Ashot API?

Существует два способа настройки Ashot API

Использование Maven
Вручную без использования каких-либо инструментов

Для конфигурирования через Maven:

Перейти на https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot.
Нажмите на последнюю на данный момент версию. Это 1.5.4
Скопируйте код зависимости и добавьте его в файл pom.xml

Сохраните файл, и Maven добавит jar в путь сборки
И теперь вы готовы!!!

Для конфигурирования вручную без использования инструмента зависимости

Перейти на https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot.
Нажмите на последнюю на данный момент версию. Это 1.5.4
Щелкните на банке, загрузите и сохраните его на своей машине

Добавьте jar-файл в путь сборки:
В Eclipse щелкните правой кнопкой мыши на проекте -> перейдите к свойствам -> Build Path -> Libraries -> Add External jars
Выберите jar-файл
Применить и закрыть

Создание снимков экрана всей страницы с помощью AShot API

Шаг 1. Создайте объект Ashot и вызовите метод takeScreenshot(), если вам нужен только снимок экрана для страницы размером с экран.

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

Если же требуется получить скриншот страницы, превышающий размер экрана, то перед вызовом метода takeScreenshot() вызовите метод shootingStrategy() для настройки политики. Затем вызовите метод takeScreenshot(), передав его webdriver, например,

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”.

Благодаря использованию класса ShootingStrategy из Ashot API мы сможем захватить полное изображение страницы, превышающее размер экрана.

Здесь приведен код скриншота в программе 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”.

Здесь приведен код скриншота в 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 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 – бесплатное программное обеспечение от компании Яндекс.
Это утилита для создания снимков экрана в Selenium.
С его помощью можно сделать скриншот отдельного Web-элемента на различных платформах, таких как браузеры для настольных компьютеров, iOS-симулятор мобильного Safari, эмулятор браузера Android.
Он может делать скриншот страницы, размер которой превышает размер экрана.
В третьей версии selenium эта возможность была убрана, поэтому хорошим вариантом является Ashot API.
Она может украшать скриншоты.
Он обеспечивает сравнение снимков экрана.

Перевод статьи «How to Take Screenshot in Selenium WebDriver».