Jak pořídit snímek obrazovky Selenium webový ovladač

⚡ Chytré shrnutí

Pořídit snímek obrazovky v Selenium WebDriver vysvětluje zachycování vizuálních důkazů pro ladění a vizuální regresi, včetně TakesScreenshot, celostránkových snímků, zachycení prvků a AShot.

📷 Proč zachytit: Prokažte selhání a zdokumentujte běhy.
🛠️ Snímek obrazovky: Vygeneruje WebDriver, zavolá getScreenshotAs, uloží soubor.
️ Zachycení prvků: Selenium 4 podporuje getScreenshotAs na WebElement.
???? Výstřel: Sešívá celé stránky a porovnává pixely.
🤖 Vizuální testy umělé inteligence: Applitools detekuje rozdíly a ignoruje šum.
📊 Zprávy: Vložte snímky obrazovky do Allure nebo ExtentReports.

Přečíst více

Snímek obrazovky v Selenium

A Snímek obrazovky v Selenium Webdriver se používá pro analýzu chyb. Selenium webdriver může během provádění automaticky pořizovat snímky obrazovky. Pokud však uživatelé potřebují pořídit snímek obrazovky sami, musí použít metodu TakeScreenshot, která upozorní WebDrive, aby snímek pořídil a uložil do Selenium.

Jak pořídit snímek obrazovky Selenium

Zde je krok za krokem postup, jak zachytit snímek obrazovky v selenovém WebDriver

Krok 1) Převeďte objekt webového ovladače na TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Krok 2) Zavolejte metodu getScreenshotAs pro vytvoření souboru obrázku

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

Krok 3) Zkopírujte soubor do požadovaného umístění

Příklad: V tomto příkladu pořídíme snímek obrazovky https://demo.guru99.com/V4/ a uložte jej jako C:/Test.png

Zde je kód snímku obrazovky v selenu:

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

    }

}

POZNÁMKA: Selenium verze 3.9.0 a vyšší neposkytuje Apache Commons IO JAR. Můžete si je jednoduše stáhnout zde a zavolejte je ve svém projektu

Co je Ashot API?

Ashot je nástroj třetí strany od Yandex podporováno Selenium WebDriver k zachycení snímků obrazovky. Pořídí snímek obrazovky jednotlivého WebElementu i celostránkový snímek stránky, což je důležitější než velikost obrazovky.

Jak stáhnout a nakonfigurovat Ashot API?

Existují dva způsoby konfigurace Ashot API

Pomocí Maven
Ručně bez použití jakéhokoli nástroje

Konfigurace přes Maven:

Přejít https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Klikněte zatím na nejnovější verzi. Je 1.5.4
Zkopírujte kód závislosti a přidejte jej do souboru pom.xml

Uložte soubor a Maven přidá jar do vaší cesty sestavení
A teď jste připraveni!!!

Chcete-li nakonfigurovat ručně bez jakéhokoli nástroje závislosti

Přejít https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Klikněte zatím na nejnovější verzi. Je 1.5.4
Klikněte na nádobu, stáhněte si ji a uložte do svého počítače

Přidejte soubor jar do cesty k sestavení:
In Eclipse, klikněte pravým tlačítkem na projekt -> přejděte na vlastnosti -> Cesta k sestavení -> Knihovny -> Přidat externí nádoby
Vyberte soubor jar
Použít a zavřít

Zachyťte snímek celé stránky pomocí AShot API

Krok 1) Pokud chcete snímek obrazovky pro stránku velikosti obrazovky, vytvořte objekt Ashot a zavolejte metodu takeScreenshot().

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

Pokud však chcete snímek obrazovky stránky větší, než je velikost obrazovky, zavolejte metodu shootingStrategy() před voláním metody takeScreenshot() k nastavení zásady. Poté zavolejte metodu takeScreenshot() předáním webového ovladače, např.

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

Zde je 1000 rolovací čas v milisekundách, takže pro pořízení snímku obrazovky se program bude rolovat každých 1000 ms.

Krok 2): Nyní získejte obrázek ze snímku obrazovky a zapište jej do souboru. Můžete zadat typ souboru jako jpg, png atd.

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

Pořízení celostránkového snímku stránky, která je větší než velikost obrazovky.

Příklad: Zde je příklad pořízení celostránkového snímku obrazovky https://demo.guru99.com/test/guru99home/ a uložte do souboru „screenshot.jpg“.

Díky použití třídy ShootingStrategy Ashot API budeme schopni zachytit celý obrázek stránky větší než je velikost obrazovky.

Zde je kód snímku obrazovky v programu selen:

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

}

Pořízení snímku obrazovky konkrétního prvku stránky

Příklad: Zde je příklad zachycení snímku obrazovky prvku Guru Logo 99 na https://demo.guru99.com/test/guru99home/ stránku a uložte do souboru „ElementScreenshot.jpg“.

Zde je kód snímku obrazovky v selenu:

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

Porovnání snímků pomocí 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();
    }
}

Nejčastější dotazy

Dokumentují selhání a rychle dokazují občasné chyby.

Nástroje jako Applitools inteligentně porovnávají snímky obrazovky a ignorují dynamický obsah.

Ano. Nástroje umělé inteligence vytvářejí TakesScreenshot, AShot a Selenium 4 úryvky.

Použijte AShot nebo Selenium 4 s Chrome DevTools Page.captureScreenshot.

TakesScreenshot zachytí zobrazovanou oblast. AShot sešije celé stránky.

Zachycuje, co se vykreslí. Před sdílením citlivá data zredigujte.

Uložte si soubor vrácený funkcí getScreenshotAs sami.

Ano. Použijte přímo element.getScreenshotAs(OutputType.FILE).