PlaywrightでVisual Regression Testingを行う場合、次のように記述すればいい。

import { test, expect } from "@playwright/test";

test("example test", async ({ page }) => {
  await page.goto("https://...");
  await expect(page).toHaveScreenshot({
    fullPage: true,
    maxDiffPixelRatio: 0.05,
    animations: "disabled",
    mask: [page.locator("video"), page.localtor("img")],
  });
});

https://playwright.dev/docs/test-snapshots

許容する差分を指定する

maxDiffPixelRatioを指定することで、許容する差分を0〜1で指定できる。 指定しない場合、差分があってもエラーは出ない。

await expect(page).toHaveScreenshot({
  maxDiffPixelRatio: 0.05,
});

ページ全体のスクリーンショットを撮る

fullPage: trueを指定することで、ページ全体のスクリーンショットを撮ることができる。

await expect(page).toHaveScreenshot({
  fullPage: true,
});

これを指定しない場合は、スクロールなどを行いながらスクリーンショットを撮ることになる。 ただし、Webサイトの構成やPlaywrightの設定によては、ページ全体のスクリーンショットを取ることで動作が不安定になる場合があるため注意が必要。

CSSアニメーションを無効にする

animations: "disabled"を指定することで、CSSアニメーションを無効にすることができる。 CSSアニメーションが有効である場合、スクリーンショットを撮る際にアニメーションが動作することで不安定になる。 特にfullPageを有効化している場合、困ることが多い。

await expect(page).toHaveScreenshot({
  animations: "disabled",
});

一部の要素を対象から除外する

maskを指定することで、スクリーンショットを撮る際に特定の要素を対象から除外することができる。 コンテンツを制御出来ない要素などがある場合は、これを指定しないとmaxDiffPixelRatioが機能しなくなる。

await expect(page).toHaveScreenshot({
  mask: [page.locator("video"), page.locator("img")],
});