PlaywrightでVisual Regression Testingする

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

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

3
test("example test", async ({ page }) => {
4
  await page.goto("https://...");
5
  await expect(page).toHaveScreenshot({
6
    fullPage: true,
7
    maxDiffPixelRatio: 0.05,
8
    animations: "disabled",
9
    mask: [page.locator("video"), page.localtor("img")],
10
  });
11
});

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

許容する差分を指定する#

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

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

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

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

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

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

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

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

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

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

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

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