Playwrightコードステップで対象要素をスクリーンショットに含める方法

Playwrightコードステップを実行した時、対象の要素が画面外（スクロールが必要な位置）にあると、テスト結果のスクリーンショット内に含まれないことがあります。

対象要素が表示領域（ビューポート）に入るまで明示的にスクロールを実行することで、この問題を解決できます。

サンプルコード

以下は、要素のテキストを検証する際、対象要素が表示領域に入るまでスクロールするサンプルコードです。"foo" や "target" 、およびコード内容は、検証したい内容に適宜置き換えてください。

// 1. まず要素を特定する
const target = page.getByRole("heading", {
name: "foo"
});

// 2. 対象の要素が表示領域に入るまでスクロールする
await target.scrollIntoViewIfNeeded();

// 3. 要素のテキストを検証する
await expect(target).toContainText("foo", {
useInnerText: true
});

コードの解説

要素の特定: getByRole などを用いて、操作・検証したい要素を定義します。
スクロール実行: scrollIntoViewIfNeeded() を呼び出すことで、要素が現在見えていない場合のみ、Playwrightが自動でその場所までスクロールします。
検証: 要素が画面内にある状態で検証を行います。