Hogyan készítsünk képernyőképet Selenium webdriver

⚡ Okos összefoglaló

Képernyőkép készítése Selenium A WebDriver elmagyarázza a vizuális bizonyítékok rögzítését hibakereséshez és vizuális regresszióhoz, kitérve a TakesScreenshot, a teljes oldalas, az elemrögzítés és az AShot használatára.

???? Miért érdemes rögzíteni: Hibák bizonyítása és futtatások dokumentálása.
🇧🇷 Képernyőkép készítése: WebDriver átküldése, getScreenshotAs meghívása, fájl mentése.
🖼️ Elemrögzítés: Selenium A 4 támogatja a getScreenshotAs metódust egy WebElementen.
📦 AShot: Teljes oldalakat fűz össze és pixeleket hasonlít össze.
🤖 AI vizuális tesztek: Az Applitools a zaj figyelmen kívül hagyásával érzékeli a különbségeket.
📊 Jelentések: Képernyőképek beágyazása az Allure vagy az ExtentReports alkalmazásba.

További információk

Képernyőkép be Selenium

A Képernyőkép be Selenium Webdriver hibaelemzésre használják. Selenium A webdriver automatikusan képes képernyőképeket készíteni a végrehajtás során. De ha a felhasználóknak saját maguknak kell képernyőképet készíteniük, akkor a TakeScreenshot módszert kell használniuk, amely értesíti a WebDrive-ot, hogy készítse el a képernyőképet és tárolja azt Selenium.

Hogyan készítsünk képernyőképet Selenium

Itt egy lépésről lépésre bemutatjuk, hogyan készíthet képernyőképet a szelén WebDriver alkalmazásban

Step 1) Konvertálja a web-illesztőprogram-objektumot TakeScreenshot-ba

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Step 2) Hívja a getScreenshotAs metódust a képfájl létrehozásához

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

Step 3) Másolja a fájlt a kívánt helyre

Példa: Ebben a példában képernyőfelvételt készítünk https://demo.guru99.com/V4/ és mentse el C:/Test.png néven

Íme a képernyőkép kódja szelénben:

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

    }

}

JEGYZET: Selenium A 3.9.0 és újabb verziók nem biztosítanak Apache Commons IO JAR-t. Egyszerűen letöltheti őket itt és hívd fel őket a projektedben

Mi az Ashot API?

Az Ashot egy harmadik féltől származó segédprogram Yandex támogatta Selenium WebDriver a képernyőképek rögzítéséhez. Képernyőképet készít egy egyedi WebElementről, valamint egy teljes oldalas képernyőképet egy oldalról, ami jelentősebb, mint a képernyő mérete.

Hogyan lehet letölteni és beállítani az Ashot API-t?

Az Ashot API kétféleképpen konfigurálható

Maven használatával
Kézzel, szerszám nélkül

Konfigurálás a Mavenen keresztül:

Tovább https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Egyelőre kattintson a legújabb verzióra. Ez 1.5.4
Másolja ki a függőségi kódot, és adja hozzá a pom.xml fájlhoz

Mentse el a fájlt, és a Maven hozzáadja a jar-t az építési útvonalhoz
És most készen állsz!!!

Kézi konfiguráláshoz függőségi eszköz nélkül

Tovább https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
Egyelőre kattintson a legújabb verzióra. Ez 1.5.4
Kattintson a tégelyre, töltse le és mentse el a gépére

Adja hozzá a jar fájlt a build elérési útjához:
In Eclipse, kattintson a jobb gombbal a projektre -> menjen a tulajdonságokhoz -> Build Path -> Libraries -> Add External jars
Válassza ki a jar fájlt
Alkalmaz és bezár

Készítsen teljes oldalas képernyőképet az AShot API-val

Step 1) Hozzon létre egy Ashot objektumot, és hívja meg a takeScreenshot() metódust, ha csak a képernyőméret oldalához szeretne képernyőképet.

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

Ha azonban nagyobb képernyőképet szeretne készíteni az oldalról, mint a képernyő mérete, hívja meg a shootingStrategy() metódust, mielőtt a takeScreenshot() metódust hívná meg a házirend beállításához. Ezután hívjon meg egy takeScreenshot() metódust, amely átadja a webdrivert, például

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

Itt az 1000-et ezredmásodpercben görgeti ki, tehát képernyőkép készítéséhez a program minden 1000 msec-et görget.

2 lépés): Most szerezze be a képet a képernyőképből, és írja be a fájlba. Megadhatja a fájl típusát jpg, png stb.

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

Teljes oldalas képernyőkép készítése a képernyő méreténél nagyobb oldalról.

Példa: Íme egy példa a teljes oldalas képernyőkép készítésére https://demo.guru99.com/test/guru99home/ és mentse a „screenshot.jpg” fájlba.

Az Ashot API ShootingStrategy osztályának köszönhetően a képernyő méreténél nagyobb oldalról teljes képet tudunk majd rögzíteni.

Íme a képernyőkép kódja a szelén programban:

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

}

Képernyőkép készítése az oldal egy bizonyos eleméről

Példa: Íme egy példa az elem képernyőképének rögzítésére Guru 99 logó be van kapcsolva https://demo.guru99.com/test/guru99home/ oldalt, és mentse el az „ElementScreenshot.jpg” fájlba.

Íme a képernyőkép kódja szelénben:

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

Kép-összehasonlítás az AShot használatával

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

GYIK

Dokumentálják a hibákat és gyorsan bizonyítják az időszakos hibákat.

Az olyan eszközök, mint az Applitools, intelligensen hasonlítják össze a képernyőképeket, figyelmen kívül hagyva a dinamikus tartalmat.

Igen. A mesterséges intelligencia eszközei TakesScreenshot, AShot és más képeket készítenek. Selenium 4 részlet.

Használj AShot-ot vagy Selenium 4 a Chrome DevTools Page.captureScreenshot segítségével.

A TakesScreenshot rögzíti a nézetablak tartalmát. Az AShot összefűzi a teljes oldalakat.

Rögzíti a megjelenített adatokat. A megosztás előtt távolítsa el az érzékeny adatokat.

Mentsd el a getScreenshotAs által visszaadott fájlt.

Igen. Használd közvetlenül az element.getScreenshotAs(OutputType.FILE) függvényt.