[小技] ページ下部にあるnext/imageをVRTで捕捉する

Nextプロジェクトに対してPlaywrightでページ全体でのVRTを行う際に、ページ下部にある画像が抜け落ちてしまうことがある
これはnext/imageがパフォーマンスの都合から可視範囲に入ってからimgをdownloadするためだ（next/imageに限らず大体のイケてるFWでは画像の読み込み遅延処理は実装してくれていそう）
で、これを解消しようと「ページ下部までスクロールする処理を挟もう」と考える
そして多分このIssueに辿り着く

https://github.com/microsoft/playwright/issues/4302

上記Issueの上の方にあるコードをそのまま使うとこうなる

// 実際は色々待ったりexpectするだろうが簡略化
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)); // 下へ
await page.evaluate(() => window.scrollTo(0, 0)); // 上へ
// この後でページ全体のスクショ撮る

ただこれだと該当の問題がまだ起こる
調べた感じ、scrollToだと指定の座標まで機械的に移動するので、ページ全体を総なめすることができない様子
例えばビューポートの高さが100のデバイスでページ下部までのy軸座標が1000である時、上記のようにdocument.body.scrollHeightとすると101〜899までにある画像をスクリーン内に表示する瞬間が訪れないため、downloadされないまま最上部へ戻りスクショを撮ることになる

なので、Issueの下の方にあるように繰り返し処理でちまちま数pxずつ下にスクロールする必要がある
あるいはsmooth scrollするのも一つの手

- await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.evaluate(() => window.scrollTo({
+   top: document.body.scrollHeight,
+   behavior: smooth
  }));