Hoe u een screenshot kunt maken Selenium webdriver

Door: Krishna Rungta Krishna Rungta
Hours Bijgewerkt

⚡ Slimme samenvatting

Maak een screenshot in Selenium WebDriver legt uit hoe je visueel bewijsmateriaal vastlegt voor debugging en visuele regressietests, met aandacht voor TakesScreenshot, volledige pagina-opnamen, elementopnamen en AShot.

  • ???? Waarom vastleggen: Bewijs fouten en documenteer de uitgevoerde tests.
  • ️ Maakt een screenshot: Cast WebDriver, roep getScreenshotAs aan, sla het bestand op.
  • 🖼️ Element vastleggen: Selenium 4 ondersteunt getScreenshotAs op een WebElement.
  • ???? AShot: Het systeem naait hele pagina's aan elkaar en vergelijkt pixels.
  • 🤖 Visuele AI-tests: Applitools detecteert verschillen en negeert daarbij ruis.
  • 📊 Rapporten: Voeg schermafbeeldingen in Allure of ExtentReports in.
Meer informatie

Hoe u een screenshot kunt maken Selenium webdriver

Screenshot binnen Selenium

A Screenshot binnen Selenium Webstuurprogramma wordt gebruikt voor buganalyse. Selenium webdriver kan tijdens de uitvoering automatisch screenshots maken. Maar als gebruikers zelf een screenshot moeten maken, moeten ze de TakeScreenshot-methode gebruiken die de WebDrive waarschuwt om de screenshot te maken en op te slaan in Selenium.

Schermafbeelding In Selenium

Hoe u een screenshot kunt maken Selenium

Hier is een stapsgewijs proces over hoe u een screenshot kunt maken in Selenium WebDriver

Stap 1) Converteer een webstuurprogrammaobject naar TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Stap 2) Roep de getScreenshotAs-methode aan om een ​​afbeeldingsbestand te maken

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

Stap 3) Kopieer het bestand naar de gewenste locatie

Voorbeeld: In dit voorbeeld maken we een schermopname van https://demo.guru99.com/V4/ & sla het op als C:/Test.png

Hier is de screenshotcode in 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);

    }

}

NOTITIE: Selenium versie 3.9.0 en hoger biedt geen Apache Commons IO JAR. Je kunt ze eenvoudig downloaden hier en roep ze op in uw project

GERELATEERDE ARTIKELEN

Wat is de Ashot-API?

Ashot is een hulpprogramma van derden van Yandex gesteund door Selenium WebDriver om de schermafbeeldingen vast te leggen. Er is zowel een screenshot van een afzonderlijk WebElement nodig als een screenshot van een pagina op de volledige pagina, wat belangrijker is dan de schermgrootte.

Hoe Ashot API downloaden en configureren?

Er zijn twee methoden om de Ashot API te configureren

  1. Maven gebruiken
  2. Handmatig, zonder gebruik van gereedschap

Configureren via Maven:

Configureer via Maven

  • Sla het bestand op en Maven voegt de jar toe aan je buildpad
  • En nu ben je klaar!!!

Om handmatig te configureren zonder enige afhankelijkheidstool

  1. Ga naar https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Klik voorlopig op de nieuwste versie. Het is 1.5.4
  3. Klik op de pot, download deze en sla deze op uw computer op

Handmatig configureren zonder enige afhankelijkheidstool

  1. Voeg het jar-bestand toe aan uw buildpad:
  2. In Eclipse, klik met de rechtermuisknop op het project -> ga naar eigenschappen -> Bouwpad -> Bibliotheken -> Externe potten toevoegen
  3. Selecteer het jar-bestand
  4. Toepassen en sluiten

Maak een schermafbeelding van een volledige pagina met Ashot API

Stap 1) Maak een Ashot-object en roep de takeScreenshot()-methode aan als u alleen de schermafbeelding voor de schermgroottepagina wilt.

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

Maar als u een schermafbeelding van de pagina wilt die groter is dan de schermgrootte, roept u de methode shootingStrategy() aan voordat u de methode takeScreenshot() aanroept om het beleid in te stellen. Roep vervolgens een methode takeScreenshot() aan, waarbij u de webdriver doorgeeft, bijvoorbeeld

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

Hier wordt 1000 in milliseconden uit de tijd gescrolld, dus voor het maken van een screenshot scrollt het programma elke 1000 msec.

Stap 2): Haal nu de afbeelding uit de schermafbeelding en schrijf deze naar het bestand. U kunt het bestandstype opgeven als jpg, png, enz.

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

Een schermvullende schermafbeelding maken van een pagina die groter is dan de schermgrootte.

Voorbeeld: Hier is het voorbeeld van het maken van een screenshot van een volledige pagina https://demo.guru99.com/test/guru99home/ en sla het op in het bestand “screenshot.jpg.”

Dankzij het gebruik van de klasse ShootingStrategy van de Ashot API kunnen we een volledig beeld vastleggen van een pagina die groter is dan de schermgrootte.

Hier is de screenshotcode in het Selenium-programma:

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

}

Een screenshot maken van een bepaald element van de pagina

Voorbeeld: Hier is een voorbeeld van het maken van een schermafbeelding van een element. Guru 99 logo op https://demo.guru99.com/test/guru99home/ pagina en sla deze op in het bestand “ElementScreenshot.jpg”.

Hier is de screenshotcode in 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"));
	}
}

Beeldvergelijking met AHot

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

Veelgestelde vragen

Ze documenteren storingen en bewijzen snel dat er af en toe bugs optreden.

Tools zoals Applitools vergelijken schermafbeeldingen op een intelligente manier en negeren dynamische inhoud.

Ja. AI-tools produceren TakesScreenshot, AShot en Selenium 4 fragmenten.

Gebruik AShot of Selenium 4 met Chrome DevTools Page.captureScreenshot.

TakesScreenshot maakt een screenshot van het scherm. AShot voegt volledige pagina's samen.

Het legt vast wat er wordt weergegeven. Verwijder gevoelige gegevens voordat u ze deelt.

Sla het bestand dat door getScreenshotAs wordt geretourneerd zelf op.

Ja. Gebruik element.getScreenshotAs(OutputType.FILE) rechtstreeks.

Vat dit bericht samen met: