Hur man tar en skärmdump Selenium webbdrivrutin

By: Krishna Rungta Krishna Rungta
Hours Uppdaterad

⚡ Smart sammanfattning

Ta skärmdump i Selenium WebDriver förklarar hur man samlar in visuella bevis för felsökning och visuell regression, och täcker TakesScreenshot, helsidesinspelningar, elementinsamlingar och AShot.

  • ???? Varför fånga: Bevisa fel och dokumentera körningar.
  • 🛠️ Tar skärmdump: Casta WebDriver, anropa getScreenshotAs, spara filen.
  • 🖼️ Elementinsamling: Selenium 4 stöder getScreenshotAs på ett WebElement.
  • 📦 En bild: Sammanfogar hela sidor och jämför pixlar.
  • 🤖 Visuella AI-tester: Applitools upptäcker skillnader samtidigt som det ignorerar brus.
  • 📊 Rapporter: Bädda in skärmdumpar i Allure eller ExtentReports.
Läs mer

Hur man tar en skärmdump Selenium webbdrivrutin

Skärmdump in Selenium

A Skärmdump in Selenium Webdriver används för bugganalys. Selenium webdriver kan automatiskt ta skärmdumpar under körningen. Men om användare behöver ta en skärmdump på egen hand måste de använda metoden TakeScreenshot som meddelar WebDrive att ta skärmdumpen och lagra den i Selenium.

Skärmdump in Selenium

Hur man tar en skärmdump Selenium

Här är en steg-för-steg-process om hur man tar skärmdump i selenium WebDriver

Steg 1) Konvertera webbdrivrutinsobjekt till TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Steg 2) Anrop getScreenshotAs-metoden för att skapa bildfil

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

Steg 3) Kopiera filen till önskad plats

Exempel: I det här exemplet tar vi skärmdump av https://demo.guru99.com/V4/ & spara den som C:/Test.png

Här är skärmdumpkoden 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);

    }

}

OBS: Selenium version 3.9.0 och högre tillhandahåller inte Apache Commons IO JAR. Du kan helt enkelt ladda ner dem här. och ring dem i ditt projekt

RELATERADE ARTIKLAR

Vad är Ashot API?

Ashot är ett tredjepartsverktyg från Yandex stöds av Selenium WebDriver för att fånga skärmdumparna. Det tar en skärmdump av ett enskilt WebElement såväl som en helsidesskärmdump av en sida, vilket är viktigare än skärmstorleken.

Hur laddar jag ner och konfigurerar Ashot API?

Det finns två metoder för att konfigurera Ashot API

  1. Använda Maven
  2. Manuellt utan att använda något verktyg

För att konfigurera via Maven:

Konfigurera genom Maven

  • Spara filen så lägger Maven till burken till din byggväg
  • Och nu är du redo!!!

Att konfigurera manuellt utan något beroendeverktyg

  1. Gå till https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Klicka på den senaste versionen för tillfället. Det är 1.5.4
  3. Klicka på burken, ladda ner och spara den på din maskin

Konfigurera manuellt utan något beroendeverktyg

  1. Lägg till jar-filen i din byggsökväg:
  2. In Eclipse, högerklicka på projektet -> gå till egenskaper -> Byggväg -> Bibliotek -> Lägg till externa burkar
  3. Välj jar-filen
  4. Applicera och stäng

Ta en helsidesskärmdump med AShot API

Steg 1) Skapa ett Ashot-objekt och anrop metoden takeScreenshot() om du bara vill ha skärmdumpen för sidan med skärmstorlek.

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

Men om du vill ha en skärmdump av sidan som är större än skärmstorleken, anropa metoden shootingStrategy() innan du anropar metoden takeScreenshot() för att ställa in policyn. Anropa sedan en metod takeScreenshot() som passerar webbdrivrutinen, till exempel,

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

Här rullas 1000 ut tiden i millisekunder, så för att ta en skärmdump rullar programmet för varje 1000 ms.

Steg 2): Hämta nu bilden från skärmdumpen och skriv den till filen. Du kan ange filtypen som jpg, png, etc.

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

Ta en helsidesskärmdump av en sida som är större än skärmstorleken.

Exempel: Här är exemplet på att ta en helsidesskärmdump av https://demo.guru99.com/test/guru99home/ och spara till filen "screenshot.jpg."

På grund av att vi använder ShootingStrategy-klassen i Ashot API kommer vi att kunna ta en hel bild av en sida som är större än skärmstorleken.

Här är skärmdumpkoden 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 en skärmdump av ett visst element på sidan

Exempel: Här är ett exempel på hur man tar en skärmdump av ett element Guru 99-logotypen på https://demo.guru99.com/test/guru99home/ sida och spara till filen "ElementScreenshot.jpg".

Här är skärmdumpkoden 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"));
	}
}

Bildjämförelse 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();
    }
}

Vanliga frågor

De dokumenterar fel och påvisar snabbt återkommande buggar.

Verktyg som Applitools jämför skärmdumpar intelligent och ignorerar dynamiskt innehåll.

Ja. AI-verktyg producerar TakesScreenshot, AShot och Selenium 4 utdrag.

Använd AShot eller Selenium 4 med Chrome DevTools Page.captureSkärmdump.

TakesScreenshot hämtar visningsporten. AShot sammanfogar hela sidor.

Den fångar det som renderas. Redigera känslig data innan delning.

Spara filen som returneras av getScreenshotAs själv.

Ja. Använd element.getScreenshotAs(OutputType.FILE) direkt.

Sammanfatta detta inlägg med: