ビジュアルリグレッションテストとは？
ビジュアルリグレッションテストは、レンダリングされたスクリーンショットを承認済みのbaseline画像と比較することで、UIへの意図しない変化を捕まえます。
コードレベルのテストは、インターフェースが壊れて見えても合格することがあります。ずれたレイアウト、間違った色、重なった要素などです。ビジュアルリグレッションテストはそのギャップを埋めます。UIをレンダリングし、スクリーンショットを取得し、既知の良好なbaselineとピクセル単位で比較し、視覚的な差異があれば人間が承認または拒否できるよう示します。
仕組み
baselineのスクリーンショットが各ページまたはコンポーネントごとに取得され保存されます。後続の実行では、ツールがUIを再びレンダリングし、新しい画像をbaselineと差分比較します。差異が強調表示され、レビュアーがその変化が意図的なものか（baselineを更新）、リグレッションか（コードを修正）を判断します。
コードテストが見逃すものを捕まえる
- レイアウトのずれや重なった要素。
- 間違った色、フォント、間隔。
- 壊れたレスポンシブのbreakpoint。
- CSSやdesign-systemの変更によるリグレッション。
簡単な例
ビジュアルテストはコンポーネントをレンダリングし、保存されたbaselineスクリーンショットと一致することをアサートします。
await page.goto("/pricing");
await expect(page).toHaveScreenshot("pricing.png");なぜflakyになりうるか
ピクセル比較は敏感です。フォントのレンダリング、アンチエイリアス、アニメーション、環境の違いが、実際のリグレッションではない微小な差分を生むことがあります。緩和策には、一貫した環境でレンダリングすること、動的な領域をマスクすること、小さな差分thresholdを許容することが含まれます。
CIにおけるビジュアルリグレッションテスト
レンダリングの一貫性が重要なため、ビジュアルテストはbaselineを有効に保つために安定した均一な環境を必要とし、タイミングによる一時的なflakeを起こしやすいです。一貫した隔離されたrunner上のheadlessブラウザで実行し、一時的な失敗を自動リトライすることで、差分を意味のあるものに保てます。Latchkeyは、まさにこれに適した一貫した隔離されたrunnerと一時的flakeのリトライを提供します。
重要なポイント
- ビジュアルリグレッションテストはUIのスクリーンショットをbaselineと差分比較します。
- コードテストが見逃すレイアウト、色、間隔のバグを捕まえます。
- 誤った差分を避けるため、一貫したレンダリング環境が不可欠です。