Slik tar du skjermbilde Selenium webdriver

⚡ Smart oppsummering

Ta skjermbilde i Selenium WebDriver forklarer hvordan man fanger opp visuelle bevis for feilsøking og visuell regresjon, og dekker TakesScreenshot, helsides opptak, elementopptak og AShot.

???? Hvorfor fange: Bevis feil og dokumenter kjøringer.
🛠️ Tar skjermbilde: Cast WebDriver, kall getScreenshotAs, lagre filen.
🖼️ Elementfangst: Selenium 4 støtter getScreenshotAs på et WebElement.
📦 Et bilde: Setter sammen hele sider og sammenligner piksler.
🤖 Visuelle tester av kunstig intelligens: Applitools oppdager differanser mens den ignorerer støy.
📊 Rapporter: Legg inn skjermbilder i Allure eller ExtentReports.

Les mer

Skjermbilde i Selenium

A Skjermbilde i Selenium Webdriver brukes til feilanalyse. Selenium webdriver kan automatisk ta skjermbilder under utførelsen. Men hvis brukere trenger å ta et skjermbilde på egenhånd, må de bruke TakeScreenshot-metoden som varsler WebDrive om å ta skjermbildet og lagre det i Selenium.

Slik tar du skjermbilde Selenium

Her er en trinn-for-trinn-prosess for hvordan du tar skjermbilde i selen WebDriver

Trinn 1) Konverter webdriverobjekt til TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Trinn 2) Kall getScreenshotAs-metoden for å lage bildefil

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

Trinn 3) Kopier filen til ønsket plassering

Eksempel: I dette eksemplet skal vi ta skjermfangst av https://demo.guru99.com/V4/ & lagre den som C:/Test.png

Her er skjermbildekoden i selen:

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

    }

}

NOTAT: Selenium versjon 3.9.0 og nyere gir ikke Apache Commons IO JAR. Du kan ganske enkelt laste dem ned her. og ring dem i prosjektet ditt

Hva er Ashot API?

Ashot er et tredjepartsverktøy av Yandex støttet av Selenium WebDriver for å ta skjermbildene. Det tar et skjermbilde av et individuelt WebElement så vel som et helsides skjermbilde av en side, som er mer betydningsfull enn skjermstørrelsen.

Hvordan laste ned og konfigurere Ashot API?

Det er to metoder for å konfigurere Ashot API

Bruke Maven
Manuelt uten bruk av noe verktøy

For å konfigurere gjennom Maven:

Gå til https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Klikk på den nyeste versjonen, for nå. Det er 1.5.4
Kopier avhengighetskoden og legg til pom.xml-filen

Lagre filen, og Maven vil legge krukken til byggebanen din
Og nå er du klar!!!

For å konfigurere manuelt uten noe avhengighetsverktøy

Gå til https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Klikk på den nyeste versjonen, for nå. Det er 1.5.4
Klikk på krukken, last ned og lagre den på maskinen din

Legg til jar-filen i byggebanen din:
In Eclipse, høyreklikk på prosjektet -> gå til egenskaper -> Bygg bane -> Biblioteker -> Legg til eksterne krukker
Velg jar-filen
Påfør og lukk

Ta skjermbilde på hele siden med AShot API

Trinn 1) Lag et Ashot-objekt og kall takeScreenshot()-metoden hvis du bare vil ha skjermbildet for skjermstørrelsessiden.

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

Men hvis du vil ha et skjermbilde av siden som er større enn skjermstørrelsen, kaller du shootingStrategy()-metoden før du kaller takeScreenshot()-metoden for å sette opp policyen. Deretter kaller du en metode takeScreenshot() som passerer webdriveren, for eksempel,

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

Her rulles 1000 ut tid i millisekunder, så for å ta et skjermbilde vil programmet rulle for hver 1000 msek.

Trinn 2): Nå, få bildet fra skjermbildet og skriv det til filen. Du kan angi filtypen som jpg, png, etc.

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

Ta et helsides skjermbilde av en side som er større enn skjermstørrelsen.

Eksempel: Her er eksempelet på å ta et helsides skjermbilde av https://demo.guru99.com/test/guru99home/ og lagre til filen "screenshot.jpg."

På grunn av bruk av ShootingStrategy-klassen til Ashot API, vil vi kunne ta et fullstendig bilde av en side som er større enn skjermstørrelsen.

Her er skjermbildekoden i selenprogrammet:

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

}

Ta et skjermbilde av et bestemt element på siden

Eksempel: Her er et eksempel på hvordan man tar et skjermbilde av et element Guru 99-logoen på https://demo.guru99.com/test/guru99home/ side og lagre til filen "ElementScreenshot.jpg".

Her er skjermbildekoden i 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 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"));
	}
}

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

Spørsmål og svar

De dokumenterer feil og avdekker raskt periodiske feil.

Verktøy som Applitools sammenligner skjermbilder intelligent og ignorerer dynamisk innhold.

Ja. AI-verktøy produserer TakesScreenshot, AShot og Selenium 4 utdrag.

Bruk AShot eller Selenium 4 med Chrome DevTools Page.captureSkjermbilde.

TakesScreenshot henter visningsfeltet. AShot setter sammen hele sider.

Den fanger opp det som gjengis. Fjern sensitive data før deling.

Lagre filen som returneres av getScreenshotAs selv.

Ja. Bruk element.getScreenshotAs(OutputType.FILE) direkte.

Slik tar du skjermbilde Selenium webdriver

Skjermbilde i Selenium

Slik tar du skjermbilde Selenium

Hva er Ashot API?

Hvordan laste ned og konfigurere Ashot API?

For å konfigurere gjennom Maven:

For å konfigurere manuelt uten noe avhengighetsverktøy

Ta skjermbilde på hele siden med AShot API

Ta et skjermbilde av et bestemt element på siden

Bildesammenligning med AShot

Spørsmål og svar

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet

Skjermbilde i Selenium

Slik tar du skjermbilde Selenium

RELATERTE ARTIKLER

Hva er Ashot API?

Hvordan laste ned og konfigurere Ashot API?

For å konfigurere gjennom Maven:

For å konfigurere manuelt uten noe avhengighetsverktøy

Ta skjermbilde på hele siden med AShot API

Ta et skjermbilde av et bestemt element på siden

Bildesammenligning med AShot

Spørsmål og svar

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet