Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 : スクリーンショット撮影の挙動

上記のコードを実行すると、以下のスクリーンショットを得られます。
このスクリーンショットを参考に挙動を把握します。

http://selenide.org/

  • スクリーンショットの撮影方法
    画像右には「複数のスクロールバー」が写っています。
    これはウィンドウをスクロールさせながら複数のスクリーンショットを撮影し結合しているためです。
    そのため、画面内で固定位置のナビゲーションや広告が存在すると以下のようになります。

    http://selenide.org/

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

  • スクロールおよびスクリーンショット撮影の間隔
    ShootingStrategies.viewportPasting(int ms)で指定します。
    短すぎると要素の読み込みを待たずにスクリーンショットを撮影してスクロールするため、結合結果が適切になりません。

hainet
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away