visual-regression-testing

ビジュアル回帰テスト

目次

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

概要

ビジュアル回帰テストでは、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％）
• ブラウザーやデバイスの違いを考慮したテストを省略しないでください
• 未承認の差分をコミットしないでください