画像の欠けなくページ全体のスクリーンショットを撮る

私はPlaywrightなどを使って、ページ全体のスクリーンショットを撮ることがたびたびあります。しかし最近は、スクリーンショットの途中から画像が表示されなくなることが増えてきました。

例として、Playwrightで当社のお客様の声のスクリーンショットを撮ってみました。スクリーンショットが縦に長いため、一定の高さで分割して横に並べています。ページの先頭では画像が表示されていますが、途中から画像が表示されていません。

この記事では、その一因と対応例を紹介します。

原因

ページ内の画像が途中から表示されなくなる原因のひとつは、画像の遅延読み込みです。ページの表示パフォーマンスを上げるために、画面に表示されていない画像の読み込みや表示（厳密にはデコード）を遅らせることが一般的になってきました。HTMLではimg要素などにloading="lazy"やdecoding="async"を指定することで実現できます。

Playwrightでスクリーンショットを撮影するときも、画面内の画像は表示されます。しかし、画面外の画像は表示されません（※）。結果として、スクリーンショットの途中から画像が表示されなくなります。

例にあげたスクリーンショットでは、読み込まれていない画像の大半はdecoding="async"のみが指定されています。画像は読み込まれているものの表示されません。ページ末尾の電話アイコンはloading="lazy"とdecoding="async"の両方が指定されており、読み込み自体がなされていません。

表示パフォーマンス向上の仕組みがきちんと機能しているとも言えますが、スクリーンショットをお客様などに見ていただく場合には都合が悪いです。

※厳密には、HTMLのloading="lazy"などを利用している場合、画面外の画像も一定範囲で読み込み・表示されます。Google Chromeにおける「一定範囲」はウェブ向けのブラウザレベルの画像遅延読み込み | Articles | web.devなどで解説されています。なお、私がスクリーンショットを撮っているページでは「一定範囲」が誤差レベルであることも多いです（後述）。

対応

いくつかの対応がありますが、私は現在、次の手順でスクリーンショットを撮っています。

1. ページ読み込み
2. ページの幅と高さを取得
3. 画面の幅と高さを2に合わせる
4. ページを再読み込み
5. スクリーンショットを撮影

なお、私は業務でPlaywrightのPython版もNode.js版も利用しており、この記事ではNode.js版のコードを示します。

const originalViewportSize = page.viewportSize();
// 1. ページ読み込み
await page.goto(url);
// 2. ページの幅と高さを取得
const actualViewportSize = await page.evaluate(() => {
    return {
        width: document.scrollingElement?.scrollWidth ?? 0,
        height: document.scrollingElement?.scrollHeight ?? 0,
    };
});
// 3. 画面の幅と高さを2に合わせる
await page.setViewportSize(actualViewportSize);
// 4. ページを再読み込み
await page.reload(url);
// 5. スクリーンショットを撮影
await page.screenshot({
    path: 'path_to_screenshot.png',
    fullPage: true,
});
await page.setViewportSize(originalViewportSize);

画面に表示されない画像が原因のため、画像がすべて収まるように画面（PlaywrightのviewportSize）を拡大しています。

この対応を行ってお客様の声のスクリーンショットを撮ってみました。ページ内の画像がすべて表示されています。

なお、これまでに私がスクリーンショットを撮ったページの中には、画面の高さが2万3000ピクセルを超えるものもありました。それでもこの対応でスクリーンショットを撮ることができています。

まとめ

画像の読み込みや表示を遅らせているページでは、ページ全体のスクリーンショットを撮ると、途中から画像が表示されないことがあります。

画面を拡大して画像がすべて表示されるようにすることで、問題を解決できることがあります。

この記事が、ページ全体のスクリーンショットを撮る際のヒントになれば幸いです。