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

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. 特定の要素のスクリーンショットを比較する

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

使い方

• 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)で指定します。
  短すぎると要素の読み込みを待たずにスクリーンショットを撮影してスクロールするため、結合結果が適切になりません。