Screenshot maken in Selenium WebDriver

Schermafbeelding in Selenium

A Screenshot in Selenium Webdriver 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 deze in Selenium op te slaan.

Schermafbeelding in selenium

Hoe u een screenshot kunt maken in Selenium

Hier is een stapsgewijs proces voor het maken van een screenshot 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

Wat is de Ashot-API?

Ashot is een hulpprogramma van derden van Yandex ondersteund door Selenium WebDriver om de screenshots vast te leggen. Er is zowel een screenshot van een afzonderlijk WebElement nodig als een screenshot van een 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 seleniumprogramma:

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 het voorbeeld van het vastleggen van een element-screenshot van het Guru 99-logo 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();
    }
}

Samengevat

  • Ashot API is een freeware van Yandex.
  • Het is een hulpprogramma voor het maken van een screenshot in Selenium.
  • Het helpt u een screenshot te maken van een individueel WebElement op verschillende platforms, zoals desktopbrowsers, iOS Simulator Mobile Safari, Android Emulator Browser.
  • Er kan een paginascreenshot worden gemaakt van een pagina die groter is dan de schermgrootte.
  • Deze functie is verwijderd in seleniumversie 3, dus Ashot API is een goede optie.
  • Het kan de schermafbeeldingen versieren.
  • Het biedt een screenshot-vergelijking.