画像Diffによるビジュアルリグレッションテスト

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

ビジュアルリグレッションテストは、既知の正常なベースラインとアプリケーションのスクリーンショットを比較することで、意図しないUI変更を検出するQA技術です。個々のCSSプロパティやDOM構造をアサートするのではなく、ユーザーが実際に見るレンダリング出力を検証します。

仕組み

テストワークフローは3つのステージに従います：

1. ベースラインのキャプチャ — 制御された環境でアプリケーションを実行し、主要ページとコンポーネントのスクリーンショットを撮影。これらが参照画像になります。
2. テストスクリーンショットのキャプチャ — コード変更後、同一条件（同じビューポートサイズ、ブラウザ、OS）で同じページとコンポーネントの新しいスクリーンショットを撮影。
3. 画像Diffで比較 — ピクセルレベルの比較でベースラインとテストスクリーンショットの差異を特定。許容閾値を超える変更をフラグします。

許容閾値の設定

すべてのピクセル差異が実際の問題を示すわけではありません。アンチエイリアシング、サブピクセルレンダリング、フォントヒンティングは、異なるマシン間で軽微な変動を生じさせます。適切な許容閾値（通常、ピクセルチャネルあたり1-5%）はこれらの偽陽性をフィルタリングしつつ、意味のある視覚的変更をキャッチします。

Tolerance = 0   → すべてのサブピクセル変動をフラグ（ノイズが多すぎる）
Tolerance = 5   → 色/レイアウト変更をキャッチし、アンチエイリアシングを無視
Tolerance = 20  → 主要な視覚的差異のみをキャッチ
Tolerance = 50  → 極端な変更のみをフラグ（寛容すぎる）

ベースライン管理

ベースラインはUIが意図的に変更されるたびに意図的に更新する必要があります。典型的なワークフロー：

• テストコードと一緒にバージョン管理にベースラインを保存
• ベースライン更新を承認する前にプルリクエストでDiff画像をレビュー
• ブラウザやOS別に個別のベースラインを使用

一般的な落とし穴

• 非決定的レンダリング（アニメーション、動的コンテンツ、タイムスタンプ）による不安定なテスト
• CIとローカルマシン間の環境差異によるフォントレンダリングの違い
• 大量のストレージを消費する大規模ベースラインリポジトリ
• 数百のフルページスクリーンショット比較時の遅い実行