Як зробити знімок екрана Selenium веб-драйвер

Автор: Krishna Рунгта Krishna Рунгта
Hours оновлений

⚡ Розумний підсумок

Зробити скріншот у Selenium WebDriver пояснює захоплення візуальних доказів для налагодження та візуальної регресії, охоплюючи TakesScreenshot, повносторінкові знімки, захоплення елементів та AShot.

  • ???? Чому варто знімати: Доведіть невдачі та задокументуйте прогалини.
  • 🛠️ Знімок екрана: Транслювати WebDriver, викликати getScreenshotAs, зберегти файл.
  • 🖼️ Захоплення елемента: Selenium 4 підтримує getScreenshotAs для WebElement.
  • 📦 Постріл: Зшиває повні сторінки та порівнює пікселі.
  • 🤖 Візуальні тести ШІ: Applitools виявляє відмінності, ігноруючи шум.
  • 📊 Доповіді: Вбудовуйте скріншоти в Allure або ExtentReports.
Детальніше

Як зробити знімок екрана Selenium веб-драйвер

Скріншот в Selenium

A Скріншот в Selenium Веб-драйвер використовується для аналізу помилок. Selenium webdriver може автоматично робити знімки екрана під час виконання. Але якщо користувачам потрібно зробити знімок екрана самостійно, їм потрібно використовувати метод TakeScreenshot, який сповіщає WebDrive зробити знімок екрана та зберегти його в Selenium.

Скріншот в Selenium

Як зробити знімок екрана 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 Веб-драйвер для створення знімків екрана. Він робить знімок екрана окремого WebElement, а також знімок повної сторінки сторінки, що важливіше, ніж розмір екрана.

Як завантажити та налаштувати Ashot API?

Є два способи налаштування Ashot API

  1. Використання Maven
  2. Вручну без використання інструментів

Щоб налаштувати через Maven:

Налаштувати через Maven

  • Збережіть файл, і Maven додасть jar до вашого шляху збірки
  • І тепер ви готові!!!

Щоб налаштувати вручну без будь-якого інструменту залежностей

  1. Перейдіть до https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Наразі натисніть останню версію. Це 1.5.4
  3. Натисніть на банку, завантажте та збережіть її на своїй машині

Налаштувати вручну без будь-якого інструменту залежностей

  1. Додайте файл jar у шлях збірки:
  2. In Eclipse, клацніть правою кнопкою миші на проекті -> перейдіть до властивостей -> Build Path -> Libraries -> Add External jar
  3. Виберіть файл jar
  4. Застосувати та закрити

Зробіть знімок екрана на всю сторінку за допомогою AShot API

Крок 1) Створіть об’єкт Ashot і викличте метод takeScreenshot(), якщо вам потрібен лише знімок екрана для сторінки розміру екрана.

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

Але якщо вам потрібен знімок екрана сторінки, більший за розмір екрана, викличте метод shootingStrategy(), перш ніж викликати метод takeScreenshot(), щоб налаштувати політику. Потім викличте метод 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».

Завдяки використанню класу ShootingStrategy API Ashot ми зможемо захопити повне зображення сторінки, розмір якої перевищує розмір екрана.

Ось код скріншота в програмі 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();
    }
}

Поширені запитання

Вони документують збої та швидко доводять періодичні помилки.

Такі інструменти, як Applitools, інтелектуально порівнюють скріншоти, ігноруючи динамічний контент.

Так. Інструменти штучного інтелекту створюють TakesScreenshot, AShot та Selenium 4 фрагменти.

Використовуйте AShot або Selenium 4 за допомогою інструментів розробника Chrome Page.captureScreenshot.

TakesScreenshot захоплює область перегляду. AShot зшиває повні сторінки.

Він фіксує те, що відображається. Видаляйте конфіденційні дані перед їх поширенням.

Збережіть файл, повернутий getScreenshotAs, самостійно.

Так. Використовуйте element.getScreenshotAs(OutputType.FILE) безпосередньо.

Підсумуйте цей пост за допомогою: