Selenium WebDriver でスクリーンショットを撮る方法

Selenium のスクリーンショット

A Selenium Webdriver のスクリーンショット バグ分析に使用されます。 Selenium Webdriver は、実行中に自動的にスクリーンショットを撮ることができます。 ただし、ユーザーが自分でスクリーンショットをキャプチャする必要がある場合は、WebDrive にスクリーンショットを撮って Selenium に保存するように通知する TakeScreenshot メソッドを使用する必要があります。

Selenium でのスクリーンショット

Selenium でスクリーンショットを撮る方法

Selenium WebDriver でスクリーンショットをキャプチャする方法を段階的に説明します。

ステップ1) Web ドライバー オブジェクトを TakeScreenshot に変換する

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

ステップ2) getScreenshotAs メソッドを呼び出して画像ファイルを作成します

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

ステップ3) ファイルを目的の場所にコピー

例: この例では、次の画面キャプチャを取得します。 https://demo.guru99.com/V4/ C:/Test.png として保存(&)

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

    }

}

注意: Selenium バージョン 3.9.0 以降では、Apache Commons IO JAR が提供されません。 簡単にダウンロードできます こちらをクリックすると、ツールが開きます。 そしてプロジェクト内でそれらを呼び出します

Ashot APIとは何ですか?

Ashot は、次のサードパーティ ユーティリティです。 Yandex スクリーンショットをキャプチャするために Selenium WebDriver によってサポートされています。 個々の WebElement のスクリーンショットと、画面サイズよりも重要なページ全体のスクリーンショットが取得されます。

Ashot API をダウンロードして設定するにはどうすればよいですか?

Ashot APIを設定するにはXNUMXつの方法があります

  1. Mavenの使用
  2. 工具を使わずに手動で

Maven を介して設定するには:

Maven を介した構成

  • ファイルを保存すると、Maven がビルド パスに jar を追加します。
  • これで準備は完了です!

依存関係ツールを使用せずに手動で構成するには

  1.   https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. とりあえず最新バージョンをクリックしてください。 1.5.4です
  3. jar をクリックし、ダウンロードしてマシンに保存します

依存関係ツールを使用せずに手動で構成する

  1. jar ファイルをビルド パスに追加します。
  2. In Eclipse、プロジェクトを右クリック -> プロパティに移動 -> ビルドパス -> ライブラリ -> 外部 jar の追加
  3. jarファイルを選択します
  4. 適用して閉じる

AShot API を使用してページ全体のスクリーンショットをキャプチャする

ステップ1) 画面サイズのページのスクリーンショットだけが必要な場合は、Ashot オブジェクトを作成し、takeScreenshot() メソッドを呼び出します。

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

ただし、画面サイズより大きいページのスクリーンショットが必要な場合は、ポリシーを設定するために takeScreenshot() メソッドを呼び出す前に、shootingStrategy() メソッドを呼び出します。 次に、Webdriver を渡すメソッド takeScreenshot() を呼び出します。たとえば、

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

ここで、1000 はミリ秒単位のスクロールアウト時間なので、スクリーンショットを撮る場合、プログラムは 1000 ミリ秒ごとにスクロールします。

ステップ2): 次に、スクリーンショットから画像を取得し、ファイルに書き込みます。 ファイルの種類は jpg、png などとして指定できます。

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

画面サイズより大きいページのフルページのスクリーンショットを撮影します。

例: 以下は、ページ全体のスクリーンショットをキャプチャする例です。 https://demo.guru99.com/test/guru99home/ そしてファイル「screenshot.jpg」に保存します。

Ashot API の ShootingStrategy クラスを使用することで、画面サイズより大きなページの全体画像をキャプチャできるようになります。

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

}

ページの特定の要素のスクリーンショットを撮る

例: 以下は、Guru 99 ロゴの要素スクリーンショットをキャプチャする例です。 https://demo.guru99.com/test/guru99home/ ページを開き、ファイル「ElementScreenshot.jpg」に保存します。

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

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

まとめ

  • Ashot API は、 Yandex.
  • Seleniumでスクリーンショットを撮るためのユーティリティです。
  • デスクトップ ブラウザ、iOS シミュレータ、モバイル Safari、Android エミュレータ ブラウザなど、さまざまなプラットフォームで個々の WebElement のスクリーンショットを撮るのに役立ちます。
  • 画面サイズより大きいページのスクリーンショットを撮ることができます。
  • この機能は Selenium バージョン 3 では削除されているため、Ashot API が適切なオプションです。
  • スクリーンショットを装飾することができます。
  • スクリーンショットの比較を提供します。