ビジュアルリグレッションテスト（Visual Regression Testing）

ビジュアルリグレッションテストは、DOM の中身ではなく、ページの見た目を確認するテストです。最初の実行でベースラインのスクリーンショットを取得し、以降の実行では新しいスクリーンショットを撮って、ベースラインとピクセル単位（または知覚的なアルゴリズム）で比較します。しきい値を超える差分があるとテストは失敗し、変化した箇所を強調した差分画像が生成されます。CSS の変更でボタンが画面外に押し出されるといった、機能的なアサーションでは見逃す問題を検出できます。

例（Playwright）

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

test('dashboard looks right', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard.png', {
    fullPage: true,
    mask: [page.getByTestId('last-updated')],
    maxDiffPixels: 100,
  });
});

test('pricing card', async ({ page }) => {
  await page.goto('/pricing');
  await expect(page.getByTestId('pro-plan')).toHaveScreenshot();
});

最初の実行はベースラインが存在しないため失敗し、ベースラインが書き出されます。意図的なデザイン変更の後は、次のコマンドでベースラインを再生成します。

npx playwright test --update-snapshots

toHaveScreenshot は Web ファーストアサーションです。連続した 2 回のキャプチャが一致するまでスクリーンショットを撮り直すため、アニメーション途中のフレームと比較してしまうことを防げます。

安定させるコツ

• ベースラインと実行で同じ環境を使う。 フォントやアンチエイリアスは OS によって異なります。Playwright がブラウザーとプラットフォームごとにベースラインを保存するのはこのためです。CI が使うのと同じ Docker イメージでベースラインを生成しましょう。
• 動的なコンテンツをマスクする。 タイムスタンプ、アバター、広告、ライブデータを表示するグラフは必ず差分になります。
• 時刻とデータを固定する。 固定のテストデータを使い、必要に応じて時計をモックします。
• アニメーションを無効にする。 Playwright はスクリーンショット撮影時に CSS アニメーションをデフォルトで無効にします。
• ページ全体よりコンポーネントを優先する。 カード 1 枚のスクリーンショットが失敗する理由は 1 つですが、ページ全体なら 20 通りあります。

よくある間違い

• 差分を見ずに承認する。 ベースラインを一括更新すると、スイートが形だけの承認になってしまいます。
• どこでも許容差をゼロにする。 わずかなレンダリングの違いがノイズを生みます。小さなしきい値を設定しつつ、本物のリグレッションを隠してしまうほど大きくはしないようにしましょう。
• 機能テストの代わりに使う。 スクリーンショットでわかるのは合計金額が正しい位置にあることであって、正しい数値であることではありません。