403文字
2分
編集

PlaywrightでVisual Regression Testingする

#Playwright

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

jsx
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 で指定できる。 指定しない場合、差分があってもエラーは出ない。

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

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

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

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

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

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

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

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

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

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

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