Comment prendre une capture d'écran Selenium pilote web

Capture d'écran dans Selenium

A Capture d'écran dans Selenium Pilote Web est utilisé pour l’analyse des bogues. Selenium webdriver peut prendre automatiquement des captures d'écran pendant l'exécution. Mais si les utilisateurs doivent capturer eux-mêmes une capture d'écran, ils doivent utiliser la méthode TakeScreenshot qui demande à WebDrive de prendre la capture d'écran et de la stocker dans Selenium.

Capture d'écran dans Selenium

Comment prendre une capture d'écran Selenium

Voici un processus étape par étape sur la façon de capturer une capture d'écran dans Selenium WebDriver

Étape 1) Convertir l'objet pilote Web en TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

Étape 2) Appelez la méthode getScreenshotAs pour créer un fichier image

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

Étape 3) Copier le fichier à l'emplacement souhaité

Exemple : Dans cet exemple, nous prendrons une capture d'écran de https://demo.guru99.com/V4/ & enregistrez-le sous C:/Test.png

Voici le code de capture d'écran en sélénium :

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

    }

}

NOTE: Selenium la version 3.9.0 et supérieure ne fournit pas Apache Commons IO JAR. Vous pouvez simplement les télécharger ici et appelez-les dans votre projet

Qu'est-ce que l'API Ashot ?

Ashot est un utilitaire tiers de Yandex accompagnés par Selenium WebDriver pour capturer les captures d'écran. Il prend une capture d'écran d'un WebElement individuel ainsi qu'une capture d'écran pleine page d'une page, ce qui est plus important que la taille de l'écran.

Comment télécharger et configurer l'API Ashot ?

Il existe deux méthodes pour configurer l'API Ashot

  1. Utilisation de Maven
  2. Manuellement sans utiliser d'outil

Pour configurer via Maven :

Configurer via Maven

  • Enregistrez le fichier et Maven ajoutera le pot à votre chemin de construction
  • Et maintenant vous êtes prêt !!!

À configurer manuellement sans aucun outil de dépendance

  1. Cliquez sur https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. Cliquez sur la dernière version, pour l'instant. C'est 1.5.4
  3. Cliquez sur le pot, téléchargez-le et enregistrez-le sur votre machine

Configurer manuellement sans aucun outil de dépendance

  1. Ajoutez le fichier jar dans votre chemin de build :
  2. In Eclipse, faites un clic droit sur le projet -> allez dans propriétés -> Chemin de construction -> Bibliothèques -> Ajouter des fichiers jar externes
  3. Sélectionnez le fichier jar
  4. Appliquer et fermer

Capturer une capture d'écran pleine page avec l'API AShot

Étape 1) Créez un objet Ashot et appelez la méthode takeScreenshot() si vous souhaitez simplement la capture d'écran de la page de taille d'écran.

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

Mais si vous souhaitez une capture d'écran de la page plus grande que la taille de l'écran, appelez la méthode shootingStrategy() avant d'appeler la méthode takeScreenshot() pour configurer la stratégie. Appelez ensuite une méthode takeScreenshot() en passant le webdriver, par exemple,

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

Ici, 1000 1000 correspond au temps de défilement en millisecondes, donc pour prendre une capture d'écran, le programme défilera toutes les ms.

Étape 2): Maintenant, récupérez l’image de la capture d’écran et écrivez-la dans le fichier. Vous pouvez fournir le type de fichier au format jpg, png, etc.

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

Prendre une capture d'écran pleine page d'une page plus grande que la taille de l'écran.

Mise en situation : Voici l'exemple de capture d'écran d'une page entière de https://demo.guru99.com/test/guru99home/ et enregistrez-le dans le fichier « screenshot.jpg ».

Grâce à l'utilisation de la classe ShootingStrategy de l'API Ashot, nous pourrons capturer une image complète d'une page plus grande que la taille de l'écran.

Voici le code de capture d'écran dans le programme 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"));
	
	}

}

Prendre une capture d'écran d'un élément particulier de la page

Mise en situation : Voici l'exemple de capture d'écran de l'élément du logo Guru 99 sur https://demo.guru99.com/test/guru99home/ page et enregistrez-le dans le fichier « ElementScreenshot.jpg ».

Voici le code de capture d'écran en sélénium :

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

Comparaison d'images à l'aide d'AShot

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

Résumé

  • Ashot API est un logiciel gratuit de Yandex.
  • C'est un utilitaire pour prendre une capture d'écran dans Selenium.
  • Il vous aide à prendre une capture d'écran d'un WebElement individuel sur différentes plates-formes telles que les navigateurs de bureau, iOS Simulator Mobile Safari, Android Navigateur d'émulateur.
  • Il peut prendre une capture d'écran d'une page plus grande que la taille de l'écran.
  • Cette fonctionnalité a été supprimée dans la version 3 de Selenium, l'API Ashot est donc une bonne option.
  • Cela peut décorer les captures d’écran.
  • Il fournit une comparaison de capture d’écran.

En savoir plus Lire la suite