End-Users2018-04-27Puppeteerによるフルページスクリーンショットを画像遅延読み込みに対応させるブラウザテストこんにちは、薦田です(@toshiya_komoda)。今回はChromeブラウザのブラウザテスト自動化ツールであるPuppeteerに関するTipsを紹介します。DevToolsチームがメンテナンスしています。その主な用途の1つにブラウザ自動テストが挙げられます。PuppeteerはChromeの操作に特化しており、操作対象がChromeに限定されるもののSeleniumにはない便利なAPIを利用できます。Puppeteerで利用できる便利なAPIの1つに、フルページスクリーンショットがあります。フルページスクリーンショットとは、ウェブページの上端から下端までを1つなぎの画像としてスクリーンショットを撮ったものです。以下の画像はフルページスクリーンショットの例です。Blogの過去の記事です。Blog記事のフルページスクリーンショットSeleniumでもスクリーンショットを取得可能ですが、取得対象の領域がviewportに制限されます。このためSeleniumでフルページスクリーンショットを実現しようとすると、スクロールしながら複数枚のスクリーンショットを撮った後、1枚につなぎ合わせるといった実装が必要になります。Puppeteerを利用した場合の実装は以下のように簡潔なものになります。1.3.0で動作確認しています。browser.close()})();補足:Puppeteerの以前のバージョンではフルページスクリーンショットの高さに16384pxの制限がありましたが、1.2.0以降のバージョンではこちらの制限はなくなっているようです。Testなどに利用することが可能です。画像の遅延読み込みに対応したウェブページでは、フルページスクリーンショットをうまく取得できないことがあります。こちらの画像がそのような例です。lazysizesという画像遅延読み込みライブラリのデモページで別に画像を用意して試しています。2.0ページ中にロードしきれていない画像が存在しており、正しくフルページスクリーンショット画像が撮れていません。RequestとしてPuppeteer側での対応が提案されている状況です。現時点では以下のように一度ページ下端までウィンドウをスクロールさせることで問題を回避できます。Screenshotsの実装を参考にしつつ、以下2点の改良を加えたものです。画像ロード以外のネットワーク接続の影響でこの条件が恒久的に満たされないため、timeoutオプション(デフォルトは30sec)を明示的に指定しています。scrollToBottom()関数の中ではwhileループの中でスクロールしながら毎回scrollHeightの値を更新しています。これは、スクロール操作によってページのscrollHeightの値が動的に変わる場合があるためです。ページを一度下端までスクロールしておくことで、さきほどのページのフルページスクリーンショットは以下のように改善されます。遅延読み込みページのフルページスクリーンショット(遅延読み込み対応版)画像が全てロードされ、きれいなフルページスクリーンショットが取得されています。補足Tips以前のバージョンにあった高さ制限の問題とは別に、Puppeteerでは非常に大きなフルページスクリーンショット画像を取得しようとすると、その下端がかけてしまうことがあります。こちらの現象は遅延読み込みとは別の問題ですが、こちらのissueで説明されています。こちらの問題はChromium側での対応が必要ということで、Chromiumの不具合としてあがっていますが、Puppeteer1.3.0にバンドルされたChromiumでは未対応です。この現象が発生した場合には、スクロールしながらスクリーンショットを複数枚取得し最後につなぎ合わせる、といったSeleniumの場合と同様のワークアラウンドが必要になります。UIテストハンズオンを実施しましたこんにちは。SWETグループの外山(@sumio_tym)です。...2018-10-10WebdriverIOでAppiumを使う勘所こんにちは。SWETの外山(@sumio_tym)です。2018でSWETの取り組みについて発表してきた初めまして、SWETの坂本です。2018の...2017-11-13Bluepillを導入してiOSのUIテスト実行を並列化するはじめまして、SWETグループの細沼(@tobi462)です。(1)リンクプライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。