ウェブサイト検索

typescript - 頭付きとヘッドレスの実行でのPlaywrightスクリーンショットの違いを無視／排除するにはどうすればよいですか？

Playwrightでアプリケーションをテストしている際に、スクリーンショットテストで少し問題がありました - 次のようなエラーで失敗しました: Error: Screenshot comparison failed:

200px × 167px の画像が期待されましたが、200px × 168px の画像が受信されました。

したがって、スクリーンショットは --headed と通常のヘッドレス実行の場合で1ピクセル異なります。

期待に閾値を追加することや、何かを追加することのようなもの

    toHaveScreenshot: {
      maxDiffPixels: 10,
    },

    toMatchSnapshot: {
      maxDiffPixelRatio: 0.1,
    },

役に立ちません。私の場合、この違いはこれら2つの場合でいくつかの要素が異なるように見えるのではなく、スクリーンショットを撮る要素のサイズが異なるためであり、そのためテストは即座に失敗します。

ですので、私はこの違いを無視する（テストでか、あるいはPlaywrightの設定でも）か、この違いがなぜ現れるのか理解してそれを取り除きたい（可能かどうかは分かりません）。

回答 #1

ビューポートのサイズを設定する提案と同様に、page.screenshot() の clip オプションを使用し、x と y の値をゼロに、幅と高さをそれぞれ 200 と 167 に設定することができます。

回答 #2

手動で0.5秒待機することで、この問題は解決したようです。おそらく、それがブラウザウィンドウが正しくリサイズされるために必要な追加時間だったのでしょう。

await page.waitForTimeout(500)

関連記事