Edited at

【pom+5行で解決】Selenium WebDriverでブラウザを問わずページ全体のスクリーンショットを撮影する

More than 1 year has passed since last update.


Google Chromeでページ全体のスクリーンショットを撮影できない

Selenium WebDriverではスクリーンショットを撮影する際、ブラウザによって挙動が異なります。

具体的に、Firefoxではページ全体が撮影される一方で、Google Chromeではウィンドウ内の視認できる範囲のみ撮影されます。

このことは公式ドキュメントにも記述されており、ブラウザの仕様に引っ張られている様子。

上記の問題を解決するのがJava製Selenium WebDriverスクリーンショットユーティリティ「aShot」です。

この記事では「aShot」の使い方を簡単に紹介します。


WebDriverスクリーンショットユーティリティ「aShot」


WebDriver Screenshot utility. Take screenshots, crop, prettify, compare

https://github.com/yandex-qatools/ashot


機能は以下の通りです。


  1. ページ全体のスクリーンショットを撮影する

  2. 特定の要素のスクリーンショットを撮影する

  3. 特定の要素をハイライトしたスクリーンショットを撮影する

  4. ページ全体のスクリーンショットを比較する

  5. 特定の要素のスクリーンショットを比較する

この内、1の「ページ全体のスクリーンショットを撮影する」に絞って使い方を紹介します。


使い方


  • pom.xmlに依存関係を記述する。

<!-- https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot -->

<dependency>
<groupId>ru.yandex.qatools.ashot</groupId>
<artifactId>ashot</artifactId>
<version>1.5.2</version>
</dependency>


  • Seleniumのコードに「3行 + 空行 + 1行 (計5行)」書き加える

@Test

public void aShot() throws IOException {
WebDriver webDriver = new ChromeDriver();
webDriver.manage().window().maximize();

// 余談 : JavaユーザーにオススメのJava製Selenium WebDriverラッパーライブラリ「Selenide」
webDriver.get("http://selenide.org/");

// ページ全体を撮影。画像イメージはru.yandex.qatools.ashot.Screenshot型として保管される(3行)
Screenshot screenshot = new AShot()
.shootingStrategy(ShootingStrategies.viewportPasting(100))
.takeScreenshot(webDriver);

// 保管したイメージを任意の場所に書き出す(1行)
ImageIO.write(screenshot.getImage(), "PNG", new File("C:/path/to/your.png"));

webDriver.close();
}


Appendix : スクリーンショット撮影の挙動

上記のコードを実行すると、以下のスクリーンショットを得られます。

このスクリーンショットを参考に挙動を把握します。


  • スクリーンショットの撮影方法

    画像右には「複数のスクロールバー」が写っています。

    これはウィンドウをスクロールさせながら複数のスクリーンショットを撮影し結合しているためです。

    そのため、画面内で固定位置のナビゲーションや広告が存在すると以下のようになります。






    画面上部の黄色いバーが重複して撮影されています。

  • スクロールおよびスクリーンショット撮影の間隔

    ShootingStrategies.viewportPasting(int ms)で指定します。

    短すぎると要素の読み込みを待たずにスクリーンショットを撮影してスクロールするため、結合結果が適切になりません。