要素スクリーンショットをAIに見せる前に遅延読み込み画像を読み込ませる手順

ページの一部を要素単位でスクリーンショットに撮り、AI に「画像が欠けていないか、並びが崩れていないか」を見てもらう検証は便利ですが、そのまま渡すと誤った報告が返ってきます。loading="lazy" の画像が読み込まれる前に撮れてしまうためです。撮る前に全画像を読み込ませ、並びやはみ出しは DOM の座標を数値で測って判定し、AI には「読み込み済みの画像で色や崩れの印象を見る」役割だけを残すのが正しい分担です。

要素スクリーンショットで画像が抜ける理由

Playwright の element.screenshot() は、その要素を画面内に入れてから撮ります。要素が縦に長い場合、上端はビューポートに入りますが、下の方はビューポートの外のままです。loading="lazy" の画像はビューポートの近くに来るまで読み込みが始まらないため、下の方の画像は読み込まれていない状態で画像に写ります。waitUntil: 'networkidle' で待っても変わりません。読み込み要求自体がまだ発生していないからです。

この状態で撮った画像を AI に渡すと、「8 個あるはずのアイコンが 4 個しか表示されていない」「6 枚の画像が見当たらない」といった報告になります。実際にそう報告されて CSS を疑いかけましたが、DOM を測ると 8 個とも正しい位置にあり、読み込まれていないだけでした。

撮る前に全画像を読み込ませる手順

ページ全体を下までスクロールしてから先頭に戻し、少し待ってから撮ります。スクロールの間隔を短くしすぎると読み込みが追いつかないので、読み込み済みの数を確認してから次に進みます。

await page.goto(url, { waitUntil: 'networkidle' });
// 下まで送って lazy 画像の読み込みを始めさせる
await page.evaluate(async () => {
  for (let y = 0; y < document.body.scrollHeight; y += 600) {
    window.scrollTo(0, y);
    await new Promise(r => setTimeout(r, 60));
  }
  window.scrollTo(0, 0);
});
await page.waitForTimeout(800);
// 未読込の画像が残っていないか数える
const notLoaded = await page.evaluate(() =>
  [...document.images].filter(i => !(i.complete && i.naturalWidth > 0)).length
);

notLoaded が 0 になってから撮ります。0 にならない場合は待ち時間を延ばすか、対象ブロックの画像だけ scrollIntoView() で個別に読み込ませます。

並びとはみ出しは座標で判定する

「2 列で並んでいるか」「右端で切れていないか」は画像を見なくても分かります。ブロックの左上を原点にした各画像の座標を取り、上端の値ごとに個数を数えれば 1 行あたりの個数が出ます。右端が画面幅を超える画像を数えれば、はみ出しの有無も出ます。

const r = await page.evaluate((sel) => {
  const root = document.querySelector(sel);
  const rb = root.getBoundingClientRect();
  const rows = {};
  let overflow = 0;
  root.querySelectorAll('img').forEach(img => {
    const b = img.getBoundingClientRect();
    const key = Math.round(b.top - rb.top);
    rows[key] = (rows[key] || 0) + 1;
    if (b.right > window.innerWidth || b.left < 0) overflow++;
  });
  return { perRow: Object.values(rows), overflow };
}, '.block-selector');
// 例: { perRow: [4, 4], overflow: 0 } → 4 個ずつ 2 行、はみ出しなし

同じスクリプトを PC 幅とスマホ幅で実行すれば、両方の結果が数秒で出ます。

AI の目視に残す役割

数値で測れないものだけを AI に見てもらいます。色の組み合わせが読みにくくないか、文字が背景に埋もれていないか、といった印象の確認です。渡す画像は未読込 0 を確認してから撮ったものに限り、依頼文に「画像が読み込まれていない箇所は無い前提で見てほしい」と書いておくと、欠けを探して誤報告することがなくなります。