ビジュアルリグレッションテスト

目次

• 概要
• 使用場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

ビジュアルリグレッションテストは、UI コンポーネントとページのスクリーンショットをキャプチャし、バージョン間で比較することで意図しないビジュアル変更を検出します。この自動化されたアプローチにより、従来の機能テストでは検出できない CSS バグ、レイアウトの問題、デザインの回帰を検出できます。

使用場面

• CSS リグレッションバグの検出
• ビューポート全体でのレスポンシブデザインの検証
• 複数のブラウザ間でのテスト
• コンポーネントのビジュアル一貫性の確認
• レイアウトシフトと重なりの検出
• テーマ変更のテスト
• デザインシステムコンポーネントの検証
• PR でのビジュアル変更のレビュー

クイックスタート

最小限の動作例：

// tests/visual/homepage.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Homepage Visual Tests", () => {
  test("homepage matches baseline", async ({ page }) => {
    await page.goto("/");

    // Wait for images to load
    await page.waitForLoadState("networkidle");

    // Full page screenshot
    await expect(page).toHaveScreenshot("homepage-full.png", {
      fullPage: true,
      maxDiffPixels: 100, // Allow small differences
    });
  });

  test("responsive design - mobile", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
    await page.goto("/");

    await expect(page).toHaveScreenshot("homepage-mobile.png");
  });

  test("responsive design - tablet", async ({ page }) => {
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリ内の詳細な実装：

ガイド	内容
Playwright Visual Testing	Playwright ビジュアルテスト
Percy Visual Testing	Percy ビジュアルテスト
Chromatic for Storybook	Storybook 向け Chromatic
Cypress Visual Testing	Cypress ビジュアルテスト
BackstopJS Configuration	BackstopJS 設定
Handling Dynamic Content	動的コンテンツの処理
Testing Responsive Components	レスポンシブコンポーネントのテスト

ベストプラクティス

✅ 推奨事項

• 動的コンテンツ (タイムスタンプ、広告) を非表示にするか、モック化する
• 複数のビューポート間でテストする
• アニメーションと画像の読み込みを待つ
• 一貫したビューポートサイズを使用する
• キャプチャ中はアニメーションを無効化する
• インタラクティブ状態 (ホバー、フォーカス) をテストする
• 差分を承認する前に慎重にレビューする
• ベースラインをバージョン管理に保存する

❌ 非推奨事項

• 常に変わるコンテンツを含むページをテストする
• わずかな正当な差異を無視する
• レスポンシブテストをスキップする
• デザイン変更後にベースラインを更新し忘れる
• ランダムデータを含むページをテストする
• 過度に厳密なしきい値 (0% の差異) を使用する
• ブラウザ/デバイスの変種をスキップする
• 未承認の差異をコミットする