Kuinka ottaa kuvakaappaus sisään Selenium web-ajuri

by: Krishna Rungta Krishna Rungta
Hours Päivitetty

⚡ Älykäs yhteenveto

Ota kuvakaappaus Selenium WebDriver selittää visuaalisen evidenssin tallentamisen virheenkorjausta ja visuaalista regressiota varten, kattaen TakesScreenshotin, koko sivun ja elementtien tallenteet sekä AShotin.

  • 📷 Miksi Capture: Todista viat ja dokumentoi suorituskerrat.
  • 🛠️ Kuvakaappaus: Lähetä WebDriver, kutsu getScreenshotAs-funktiota ja tallenna tiedosto.
  • 🖼️ Elementin sieppaus: Selenium 4 tukee getScreenshotAs-metodia WebElementissä.
  • 📦 AShot: Yhdistää kokonaiset sivut ja vertaa pikseleitä.
  • 🤖 Tekoälyn visuaaliset testit: Applitools havaitsee erot jättäen kohinan huomiotta.
  • 📊 Raportit: Upota kuvakaappauksia Allureen tai ExtentReportsiin.
Lue lisää

Kuinka ottaa kuvakaappaus sisään Selenium web-ajuri

Kuvakaappaus sisään Selenium

A Kuvakaappaus sisään Selenium Web-ohjain käytetään virheanalyysiin. Selenium webdriver voi ottaa automaattisesti kuvakaappauksia suorituksen aikana. Mutta jos käyttäjien on otettava kuvakaappaus itse, heidän on käytettävä TakeScreenshot-menetelmää, joka kehottaa WebDrivea ottamaan kuvakaappauksen ja tallentamaan sen Selenium.

Kuvakaappaus sisään Selenium

Kuinka ottaa kuvakaappaus sisään Selenium

Tässä on vaiheittainen prosessi kuvakaappauksen kaappaamiseen seleeni WebDriverissa

Vaihe 1) Muunna web-ohjainobjekti TakeScreenshotiksi

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Vaihe 2) Kutsu getScreenshotAs-menetelmä kuvatiedoston luomiseksi

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

Vaihe 3) Kopioi tiedosto haluttuun paikkaan

Esimerkki: Tässä esimerkissä otamme kuvakaappauksen https://demo.guru99.com/V4/ & tallenna se nimellä C:/Test.png

Tässä on kuvakaappauskoodi seleenissä:

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

    }

}

HUOMAUTUS: Selenium versio 3.9.0 ja uudemmat eivät sisällä Apache Commons IO JAR:ia. Voit yksinkertaisesti ladata ne täältä ja kutsu heitä projektiisi

AIHEESEEN LIITTYVÄT ARTIKKELIT

Mikä on Ashot API?

Ashot on kolmannen osapuolen apuohjelma Yandex tukema Selenium WebDriver kuvakaappausten tallentamiseen. Se ottaa kuvakaappauksen yksittäisestä WebElementistä sekä koko sivun kuvakaappauksen sivusta, joka on tärkeämpi kuin näytön koko.

Kuinka ladata ja määrittää Ashot API?

Ashot API:n määrittämiseen on kaksi tapaa

  1. Mavenin käyttö
  2. Käsin ilman työkaluja

Määritä Mavenin kautta:

Määritä Mavenin kautta

  • Tallenna tiedosto, niin Maven lisää purkin rakennuspolullesi
  • Ja nyt olet valmis!!!

Määritä manuaalisesti ilman riippuvuustyökalua

  1. Mene https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Napsauta toistaiseksi uusinta versiota. Se on 1.5.4
  3. Napsauta purkkia, lataa ja tallenna se koneellesi

Määritä manuaalisesti ilman riippuvuustyökalua

  1. Lisää jar-tiedosto rakennuspolullesi:
  2. In Eclipse, napsauta projektia hiiren kakkospainikkeella -> siirry ominaisuuksiin -> Rakennuspolku -> Kirjastot -> Lisää ulkoisia purkkeja
  3. Valitse jar-tiedosto
  4. Käytä ja sulje

Ota koko sivun kuvakaappaus AShot API:lla

Vaihe 1) Luo Ashot-objekti ja kutsu takeScreenshot()-menetelmää, jos haluat vain kuvakaappauksen näytön kokosivulle.

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

Mutta jos haluat kuvakaappauksen sivusta, joka on suurempi kuin näytön koko, kutsu shootingStrategy()-metodia ennen kuin kutsut takeScreenshot()-menetelmää käytännön määrittämiseksi. Kutsu sitten menetelmä takeScreenshot(), joka ohittaa web-ohjaimen, esimerkiksi

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

Tässä 1000 vieritetään ulos aika millisekunteina, joten kuvakaappausta varten ohjelma vierii jokaista 1000 ms:a kohti.

Vaihe 2): Ota nyt kuva kuvakaappauksesta ja kirjoita se tiedostoon. Voit antaa tiedostotyypiksi jpg, png jne.

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

Koko sivun kokoisen kuvakaappauksen ottaminen sivusta, joka on suurempi kuin näytön koko.

Esimerkiksi: Tässä on esimerkki koko sivun kuvakaappauksen ottamisesta https://demo.guru99.com/test/guru99home/ ja tallenna tiedostoon "screenshot.jpg".

Ashot API:n ShootingStrategy-luokan käytön ansiosta pystymme kaappaamaan koko kuvan sivusta, joka on suurempi kuin näytön koko.

Tässä on kuvakaappauskoodi seleeniohjelmassa:

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

}

Kuvakaappauksen ottaminen tietystä sivun elementistä

Esimerkiksi: Tässä on esimerkki elementin kuvakaappauksen ottamisesta Guru 99-logo päällä https://demo.guru99.com/test/guru99home/ sivu ja tallenna tiedostoon "ElementScreenshot.jpg".

Tässä on kuvakaappauskoodi seleenissä:

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

Kuvan vertailu AShotilla

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

UKK

Ne dokumentoivat viat ja todistavat ajoittaiset virheet nopeasti.

Työkalut, kuten Applitools, vertailevat kuvakaappauksia älykkäästi jättäen dynaamisen sisällön huomiotta.

Kyllä. Tekoälytyökalut tuottavat TakesScreenshot-, AShot- ja Selenium 4 pätkää.

Käytä AShot- tai Selenium 4 Chrome DevToolsin Page.captureScreenshot-komennolla.

TakesScreenshot tallentaa näyttöalueen. AShot nitoo kokonaisia ​​sivuja.

Se tallentaa renderöidyn sisällön. Poista arkaluontoiset tiedot ennen jakamista.

Tallenna getScreenshotAs-funktion palauttama tiedosto itsellesi.

Kyllä. Käytä elementtiä element.getScreenshotAs(OutputType.FILE) suoraan.

Tiivistä tämä viesti seuraavasti: