Kako napraviti snimak zaslona Selenium webdriver

⚡ Pametni sažetak

Snimi zaslon u Selenium WebDriver objašnjava snimanje vizualnih dokaza za otklanjanje pogrešaka i vizualnu regresiju, pokrivajući TakesScreenshot, snimanje cijele stranice, snimanje elemenata i AShot.

📷 Zašto snimati: Dokažite neuspjehe i dokumentirajte pokretanje.
🛠️ Snimka zaslona: Emitiraj WebDriver, pozovite getScreenshotAs, spremite datoteku.
🖼️ Snimanje elemenata: Selenium 4 podržava getScreenshotAs na WebElementu.
???? AShot: Spaja cijele stranice i uspoređuje piksele.
🤖 Vizualni testovi umjetne inteligencije: Applitools detektira razlike dok ignorira šum.
📊 Izvješća: Ugradite snimke zaslona u Allure ili ExtentReports.

Pročitaj više

Snimka zaslona u Selenium

A Snimka zaslona u Selenium Webdriver koristi se za analizu grešaka. Selenium webdriver može automatski snimati snimke zaslona tijekom izvođenja. Ali ako korisnici trebaju sami snimiti snimku zaslona, moraju upotrijebiti metodu TakeScreenshot koja obavještava WebDrive da napravi snimku zaslona i pohrani je u Selenium.

Kako napraviti snimak zaslona Selenium

Ovdje je korak po korak postupak snimanja snimke zaslona u selenium WebDriver

Korak 1) Pretvorite objekt web upravljačkog programa u TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Korak 2) Pozovite metodu getScreenshotAs za stvaranje slikovne datoteke

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

Korak 3) Kopirajte datoteku na željenu lokaciju

Primjer: U ovom ćemo primjeru snimiti zaslon https://demo.guru99.com/V4/ i spremite ga kao C:/Test.png

Evo koda snimke zaslona u 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);

    }

}

NAPOMENA: Selenium verzija 3.9.0 i novije ne pružaju Apache Commons IO JAR. Možete ih jednostavno preuzeti ovdje i pozovite ih u svoj projekt

Što je Ashot API?

Ashot je uslužni program treće strane tvrtke Yandex podržan od Selenium WebDriver za snimanje snimki zaslona. Potrebna je snimka zaslona pojedinačnog WebElementa kao i snimka zaslona cijele stranice stranice, što je značajnije od veličine zaslona.

Kako preuzeti i konfigurirati Ashot API?

Postoje dvije metode za konfiguriranje Ashot API-ja

Korištenje Mavena
Ručno bez upotrebe alata

Za konfiguraciju putem Mavena:

Idi na https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Kliknite na najnoviju verziju, za sada. To je 1.5.4
Kopirajte kod ovisnosti i dodajte u svoju datoteku pom.xml

Spremite datoteku i Maven će dodati jar vašoj putanji izgradnje
I sada ste spremni!!!

Za ručno konfiguriranje bez ikakvog alata ovisnosti

Idi na https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Kliknite na najnoviju verziju, za sada. To je 1.5.4
Kliknite na staklenku, preuzmite je i spremite na svoj stroj

Dodajte jar datoteku u svoj put izgradnje:
In Eclipse, desnom tipkom miša kliknite projekt -> idite na svojstva -> Build Path -> Libraries -> Add External jar
Odaberite jar datoteku
Primijeni i zatvori

Snimite snimku zaslona cijele stranice pomoću AShot API-ja

Korak 1) Napravite Ashot objekt i pozovite metodu takeScreenshot() ako samo želite snimku zaslona za stranicu veličine zaslona.

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

Ali ako želite snimku zaslona stranice veću od veličine zaslona, pozovite metodu shootingStrategy() prije nego što pozovete metodu takeScreenshot() za postavljanje pravila. Zatim pozovite metodu takeScreenshot() prosljeđujući webdriver, na primjer,

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

Ovdje je 1000 vrijeme pomicanja u milisekundama, tako da će se za snimanje zaslona program pomicati za svakih 1000 msec.

Korak 2): Sada uzmite sliku sa snimke zaslona i zapišite je u datoteku. Možete navesti vrstu datoteke kao jpg, png itd.

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

Snimanje snimke zaslona cijele stranice stranice koja je veća od veličine zaslona.

Primjer: Evo primjera snimanja zaslona cijele stranice https://demo.guru99.com/test/guru99home/ i spremite u datoteku "screenshot.jpg."

Zbog upotrebe klase ShootingStrategy Ashot API-ja, moći ćemo snimiti punu sliku stranice veće od veličine zaslona.

Evo koda snimke zaslona u programu 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"));
	
	}

}

Snimanje snimke zaslona određenog elementa stranice

Primjer: Evo primjera snimanja snimke zaslona elementa Guru 99 logotip uključen https://demo.guru99.com/test/guru99home/ stranicu i spremite u datoteku “ElementScreenshot.jpg”.

Evo koda snimke zaslona u 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"));
	}
}

Usporedba slike pomoću AShot-a

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

Pitanja i odgovori

Dokumentiraju kvarove i brzo dokazuju povremene greške.

Alati poput Applitoolsa inteligentno uspoređuju snimke zaslona, ignorirajući dinamički sadržaj.

Da. AI alati proizvode TakesScreenshot, AShot i Selenium 4 isječka.

Koristite AShot ili Selenium 4 s Chrome DevTools Page.captureScreenshot.

TakesScreenshot snima prikaz. AShot spaja cijele stranice.

Bilježi ono što se renderira. Uredite osjetljive podatke prije dijeljenja.

Spremite datoteku koju je vratila funkcija getScreenshotAs sami.

Da. Izravno upotrijebite element.getScreenshotAs(OutputType.FILE).