ビジュアルリグレッションテストとは? 意図しないUI変更の検出

ビジュアルリグレッションテストは、UIのスクリーンショットを撮影し、承認済みのベースラインとピクセル単位で比較して、予期しない視覚的変更を検出します。

機能テストは動作を確認しますが、視覚的な崩れは見逃します。ボタンがずれていたり色が間違っていたりしても、クリックテストは通ってしまうのです。ビジュアルリグレッションテストは、UIをレンダリングし、スクリーンショットを撮り、それをベースライン画像とdiffします。どんな差異もレビュー用に提示されます。スクリーンショットは環境に敏感なため、これらを安定して実行することは、主にCIの一貫性の問題です。

仕組み

テストはコンポーネントやページをレンダリングし、スクリーンショットを撮り、保存されたベースラインと比較します。ピクセルが閾値を超えて異なる場合、テストは失敗し、diffを表示するので、人間が変更を承認または却下できます。

ベースラインと承認

ベースラインは、合意された正しい見た目です。変更が意図的な場合はベースラインを更新し、そうでない場合はコードを修正します。ベースラインの管理はビジュアルテストの中核のworkflowです。

不安定さ(flakiness)という課題

フォントのレンダリングはOSごとに異なります。
アニメーションやタイミングが不安定なキャプチャを引き起こします。
日付のような動的データが画像を変化させます。

Storybookとの組み合わせ

storyは決定的なコンポーネントの状態であり、ビジュアルテストの入力として理想的です。多くのチームはすべてのstoryをスナップショットして、各コンポーネントの状態に保護されたベースラインを持たせています。

CI/CDにおけるビジュアルリグレッションテスト

これらのテストはpipelineでビルド済みのアプリやStorybookに対して実行されるため、一貫性がすべてです。ローカルとCIでフォントや画面サイズが異なると、誤ったdiffが生じます。安定した同一のrunnerでキャプチャを実行することで、ベースラインの信頼性が保たれます。マネージドrunner(Latchkeyなど)はその一貫した環境を提供し、スクリーンショットのdiffがrunnerのノイズではなく実際の変更を反映するようにします。

重要なポイント

ビジュアルリグレッションテストは、UIのスクリーンショットを承認済みのベースラインとdiffします。
ベースラインの管理が中核のworkflowです。意図的な変更はベースラインを更新します。
レンダリングの違いによる誤ったdiffを避けるには、一貫したCI runnerが不可欠です。