VitestのBrowser Modeでページ全体のスクリーンショットが撮れない

VitestのBrowser Modeでテストを書いていて、スクリーンショットを撮ろうとしたときに、コンテンツが長い場合に画面に表示されている部分しかキャプチャされない問題に遭遇しました。

このページは自身の検証結果をもとにAIで生成しました。

問題

通常の page.screenshot() では、iframeのサイズに制限されて、コンテンツの一部しかキャプチャできません。特に縦に長いコンテンツの場合、スクロールしないと見えない部分は撮影されません。

解決方法（ワークアラウンド）

以下のコードをスクリーンショット撮影前に実行することで、フルページスクリーンショットが可能になります。

code:typescript

(window.frameElement as HTMLIFrameElement).style.width = ${document.body.offsetWidth}px;

(window.frameElement as HTMLIFrameElement).style.height = ${document.body.offsetHeight}px;

仕組み

この方法は、テストが実行されているiframeのサイズを、ドキュメントボディのサイズに合わせて手動で調整します。これにより、コンテンツ全体が表示された状態でスクリーンショットを撮影できるようになります。

実装例

テストファイル: LongText.test.tsx

このテストでは、50行のテキストを表示するコンポーネントをテストしており、ワークアラウンドを適用することで、切り取られることなく全体のスクリーンショットを撮影できています。

code:typescript

test("LongText screenshot", async () => {

render(<LongText />);

await page.screenshot(); // 通常のスクリーンショット（一部のみ）

// iframeサイズをコンテンツに合わせて調整

(window.frameElement as HTMLIFrameElement).style.width = ${document.body.offsetWidth}px;

(window.frameElement as HTMLIFrameElement).style.height = ${document.body.offsetHeight}px;

await page.screenshot(); // フルページスクリーンショット

});

1回目の page.screenshot()

https://gyazo.com/947c156ce8f7aa8df79aa209527f9916

2回目の page.screenshot()

https://gyazo.com/5adcc4317949cd3863b02d668f2b4b2d

まとめ

Vitestが正式にフルページスクリーンショット機能を提供するまでの間、このワークアラウンドを使用することで問題を回避できます。同じ問題に遭遇した方の参考になれば幸いです。