Kako napraviti snimak zaslona Selenium webdriver

By: Krishna Rungta Krishna Rungta
Hours Aลพurirano

โšก Pametni saลพetak

Snimi zaslon u Selenium WebDriver objaลกnjava snimanje vizualnih dokaza za otklanjanje pogreลกaka i vizualnu regresiju, pokrivajuฤ‡i TakesScreenshot, snimanje cijele stranice, snimanje elemenata i AShot.

  • ๐Ÿ“ท Zaลกto snimati: Dokaลพite neuspjehe i dokumentirajte pokretanje.
  • ๐Ÿ› ๏ธ Snimka zaslona: Emitiraj WebDriver, pozovite getScreenshotAs, spremite datoteku.
  • ๐Ÿ–ผ๏ธ Snimanje elemenata: Selenium 4 podrลพava getScreenshotAs na WebElementu.
  • ???? AShot: Spaja cijele stranice i usporeฤ‘uje piksele.
  • ๐Ÿค– Vizualni testovi umjetne inteligencije: Applitools detektira razlike dok ignorira ลกum.
  • ๐Ÿ“Š Izvjeลกฤ‡a: Ugradite snimke zaslona u Allure ili ExtentReports.
Proฤitaj viลกe

Kako napraviti snimak zaslona Selenium webdriver

Snimka zaslona u Selenium

A Snimka zaslona u Selenium Webdriver koristi se za analizu greลกaka. Selenium webdriver moลพe automatski snimati snimke zaslona tijekom izvoฤ‘enja. Ali ako korisnici trebaju sami snimiti snimku zaslona, โ€‹โ€‹moraju upotrijebiti metodu TakeScreenshot koja obavjeลกtava WebDrive da napravi snimku zaslona i pohrani je u Selenium.

Snimka zaslona u Selenium

Kako napraviti snimak zaslona Selenium

Ovdje je korak po korak postupak snimanja snimke zaslona u selenium WebDriver

Korak 1) Pretvorite objekt web upravljaฤkog programa u TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Korak 2) Pozovite metodu getScreenshotAs za stvaranje slikovne datoteke

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

Korak 3) Kopirajte datoteku na ลพeljenu lokaciju

Primjer: U ovom ฤ‡emo primjeru snimiti zaslon https://demo.guru99.com/V4/ i spremite ga kao C:/Test.png

Evo koda snimke zaslona u selenu:

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

    }

}

NAPOMENA: Selenium verzija 3.9.0 i novije ne pruลพaju Apache Commons IO JAR. Moลพete ih jednostavno preuzeti ovdje i pozovite ih u svoj projekt

POVEZANI ฤŒLANCI

ล to je Ashot API?

Ashot je usluลพni program treฤ‡e strane tvrtke Yandex podrลพan od Selenium WebDriver za snimanje snimki zaslona. Potrebna je snimka zaslona pojedinaฤnog WebElementa kao i snimka zaslona cijele stranice stranice, ลกto je znaฤajnije od veliฤine zaslona.

Kako preuzeti i konfigurirati Ashot API?

Postoje dvije metode za konfiguriranje Ashot API-ja

  1. Koriลกtenje Mavena
  2. Ruฤno bez upotrebe alata

Za konfiguraciju putem Mavena:

Konfigurirajte kroz Maven

  • Spremite datoteku i Maven ฤ‡e dodati jar vaลกoj putanji izgradnje
  • I sada ste spremni!!!

Za ruฤno konfiguriranje bez ikakvog alata ovisnosti

  1. Idi na https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Kliknite na najnoviju verziju, za sada. To je 1.5.4
  3. Kliknite na staklenku, preuzmite je i spremite na svoj stroj

Konfigurirajte ruฤno bez alata za ovisnost

  1. Dodajte jar datoteku u svoj put izgradnje:
  2. In Eclipse, desnom tipkom miลกa kliknite projekt -> idite na svojstva -> Build Path -> Libraries -> Add External jar
  3. Odaberite jar datoteku
  4. Primijeni i zatvori

Snimite snimku zaslona cijele stranice pomoฤ‡u AShot API-ja

Korak 1) Napravite Ashot objekt i pozovite metodu takeScreenshot() ako samo ลพelite snimku zaslona za stranicu veliฤine zaslona.

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

Ali ako ลพelite snimku zaslona stranice veฤ‡u od veliฤine zaslona, โ€‹โ€‹pozovite metodu shootingStrategy() prije nego ลกto pozovete metodu takeScreenshot() za postavljanje pravila. Zatim pozovite metodu takeScreenshot() prosljeฤ‘ujuฤ‡i webdriver, na primjer,

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

Ovdje je 1000 vrijeme pomicanja u milisekundama, tako da ฤ‡e se za snimanje zaslona program pomicati za svakih 1000 msec.

Korak 2): Sada uzmite sliku sa snimke zaslona i zapiลกite je u datoteku. Moลพete navesti vrstu datoteke kao jpg, png itd.

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

Snimanje snimke zaslona cijele stranice stranice koja je veฤ‡a od veliฤine zaslona.

Primjer: Evo primjera snimanja zaslona cijele stranice https://demo.guru99.com/test/guru99home/ i spremite u datoteku "screenshot.jpg."

Zbog upotrebe klase ShootingStrategy Ashot API-ja, moฤ‡i ฤ‡emo snimiti punu sliku stranice veฤ‡e od veliฤine zaslona.

Evo koda snimke zaslona u programu 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 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"));
	
	}

}

Snimanje snimke zaslona odreฤ‘enog elementa stranice

Primjer: Evo primjera snimanja snimke zaslona elementa Guru 99 logotip ukljuฤen https://demo.guru99.com/test/guru99home/ stranicu i spremite u datoteku โ€œElementScreenshot.jpgโ€.

Evo koda snimke zaslona u selenu:

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

Usporedba slike pomoฤ‡u AShot-a

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

Pitanja i odgovori

Dokumentiraju kvarove i brzo dokazuju povremene greลกke.

Alati poput Applitoolsa inteligentno usporeฤ‘uju snimke zaslona, โ€‹โ€‹ignorirajuฤ‡i dinamiฤki sadrลพaj.

Da. AI alati proizvode TakesScreenshot, AShot i Selenium 4 isjeฤka.

Koristite AShot ili Selenium 4 s Chrome DevTools Page.captureScreenshot.

TakesScreenshot snima prikaz. AShot spaja cijele stranice.

Biljeลพi ono ลกto se renderira. Uredite osjetljive podatke prije dijeljenja.

Spremite datoteku koju je vratila funkcija getScreenshotAs sami.

Da. Izravno upotrijebite element.getScreenshotAs(OutputType.FILE).

Saลพmite ovu objavu uz: