Jak zrobić zrzut ekranu w Selenium Sterownik sieciowy

Przez: Krishna Szczebel Krishna Szczebel
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Zrób zrzut ekranu w Selenium WebDriver wyjaśnia, jak przechwytywać wizualne dowody na potrzeby debugowania i regresji wizualnej, obejmując TakesScreenshot, przechwytywanie całych stron, przechwytywanie elementów i AShot.

  • 📷 Dlaczego warto przechwycić: Udowodnij awarie i udokumentuj przebiegi.
  • 🛠️. Zrzut ekranu: Rzuć WebDriver, wywołaj getScreenshotAs, zapisz plik.
  • 🖼️ Przechwytywanie elementów: Selenium 4 obsługuje getScreenshotAs w WebElement.
  • 📦 Strzał: Zszywa całe strony i porównuje piksele.
  • 🤖 Testy wizualne AI: Applitools wykrywa różnice, ignorując szum.
  • 📊 Raporty: Osadź zrzuty ekranu w Allure lub ExtentReports.
Czytaj więcej

Jak zrobić zrzut ekranu w Selenium Sterownik sieciowy

Zrzut ekranu w Selenium

A Zrzut ekranu w Selenium Sterownik internetowy służy do analizy błędów. Selenium webdriver może automatycznie robić zrzuty ekranu podczas wykonywania. Jeśli jednak użytkownicy muszą samodzielnie przechwycić zrzut ekranu, muszą skorzystać z metody TakeScreenshot, która powiadamia dysk WebDrive o konieczności wykonania zrzutu ekranu i zapisania go w Selenium.

Zrzut ekranu w Selenium

Jak zrobić zrzut ekranu w Selenium

Oto proces krok po kroku, jak wykonać zrzut ekranu w Selenium WebDriver

Krok 1) Konwertuj obiekt sterownika internetowego na TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Krok 2) Wywołaj metodę getScreenshotAs, aby utworzyć plik obrazu

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

Krok 3) Skopiuj plik do wybranej lokalizacji

Przykład: W tym przykładzie zrobimy zrzut ekranu https://demo.guru99.com/V4/ i zapisz go jako C:/Test.png

Oto kod zrzutu ekranu w 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);

    }

}

UWAGA: Selenium wersja 3.9.0 i nowsze nie udostępnia plików JAR Apache Commons IO. Możesz je po prostu pobrać w tym miejscu i wywołaj je w swoim projekcie

Nie przegap:

Co to jest API Ashota?

Ashot to narzędzie strony trzeciej opracowane przez Yandex wspierany przez Selenium WebDriver do przechwytywania zrzutów ekranu. Wykonuje zrzut ekranu pojedynczego elementu WebElement, a także zrzut ekranu całej strony strony, który jest ważniejszy niż rozmiar ekranu.

Jak pobrać i skonfigurować API Ashota?

Istnieją dwie metody konfiguracji API Ashota

  1. Korzystanie z Maven
  2. Ręcznie, bez użycia jakichkolwiek narzędzi

Aby skonfigurować za pomocą Mavena:

Skonfiguruj za pomocą Mavena

  • Zapisz plik, a Maven doda słoik do ścieżki kompilacji
  • A teraz jesteś gotowy!!!

Aby skonfigurować ręcznie bez żadnego narzędzia zależności

  1. Iść do https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Na razie kliknij najnowszą wersję. Jest to wersja 1.5.4
  3. Kliknij słoik, pobierz i zapisz go na swoim komputerze

Skonfiguruj ręcznie bez żadnego narzędzia zależności

  1. Dodaj plik jar do ścieżki kompilacji:
  2. In Eclipse, kliknij projekt prawym przyciskiem myszy -> przejdź do właściwości -> Ścieżka budowania -> Biblioteki -> Dodaj zewnętrzne słoiki
  3. Wybierz plik jar
  4. Zastosuj i zamknij

Przechwyć zrzut ekranu całej strony za pomocą interfejsu API AShot

Krok 1) Utwórz obiekt Ashot i wywołaj metodę takeScreenshot(), jeśli chcesz mieć tylko zrzut ekranu dla strony z rozmiarem ekranu.

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

Jeśli jednak chcesz, aby zrzut ekranu strony był większy niż rozmiar ekranu, wywołaj metodę shootStrategy() przed wywołaniem metody takeScreenshot() w celu skonfigurowania polityki. Następnie wywołaj metodę takeScreenshot() przekazującą webdriver, na przykład:

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

Tutaj 1000 jest przewijane w milisekundach, więc w przypadku zrobienia zrzutu ekranu program będzie przewijał co 1000 ms.

Krok 2): Teraz pobierz obraz ze zrzutu ekranu i zapisz go w pliku. Możesz podać typ pliku jako jpg, png itp.

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

Wykonywanie zrzutu ekranu całej strony strony większej niż rozmiar ekranu.

Przykład: Oto przykład przechwycenia całostronicowego zrzutu ekranu https://demo.guru99.com/test/guru99home/ i zapisz w pliku „screenshot.jpg”.

Dzięki zastosowaniu klasy ShootingStrategy API Ashot będziemy mogli przechwycić pełny obraz strony większy niż rozmiar ekranu.

Oto kod zrzutu ekranu w programie selenowym:

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"));
	
	}

}

Wykonanie zrzutu ekranu konkretnego elementu strony

Przykład: Oto przykład przechwytywania zrzutu ekranu elementu Guru 99 logo na https://demo.guru99.com/test/guru99home/ stronę i zapisz w pliku „ElementScreenshot.jpg”.

Oto kod zrzutu ekranu w 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"));
	}
}

Porównanie obrazów przy użyciu 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();
    }
}

FAQ

Dokumentują awarie i szybko udowadniają sporadyczne błędy.

Narzędzia takie jak Applitools inteligentnie porównują zrzuty ekranu, ignorując dynamiczną zawartość.

Tak. Narzędzia AI generują TakesScreenshot, AShot i Selenium 4 fragmenty.

Użyj AShot lub Selenium 4 z Chrome DevTools Page.captureScreenshot.

TakesScreenshot przechwytuje widok. AShot zszywa całe strony.

Przechwytuje to, co renderuje. Usuwa poufne dane przed udostępnieniem.

Zapisz plik zwrócony przez getScreenshotAs.

Tak. Użyj bezpośrednio element.getScreenshotAs(OutputType.FILE).

Podsumuj ten post następująco: