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

ビジュアルリグレッションテスト（VRT）は、レンダリングされたスクリーンショットをピクセル単位で比較し、コードのバージョン間で意図しない見た目の変化を自動的に検出します。レイアウトのずれ、色の変化、間隔の崩れなど、単体テストではまったく検出できないCSSのリグレッションを見つけられます。

VRTでは、まずコンポーネントやページのベースラインとなるスクリーンショットを取得します。その後、コード変更後に新しいスクリーンショットを取得して比較します。差分は差分画像で強調表示されます。開発者は差分を確認し、意図した変更であれば承認し、意図しないリグレッションであれば修正します。

ピクセル差分は画像をピクセル単位で比較するため感度が高い一方、アンチエイリアスやサブピクセルレンダリングの違いによる誤検知が起こりやすくなります。構造差分ツール（Applitools AI）は正確なピクセルではなく視覚的な意図を比較するため、フォントのレンダリングの違いによる誤検知を減らせます。

承認されたスクリーンショットが新しいベースラインになります。ベースラインはバージョン管理（大きな画像にはGit LFS）または専用のクラウドサービスに保存します。各PRではベースラインとの差分が表示され、メンテナーがレビューの一環として見た目の変更を承認または却下します。

コンポーネントレベルのVRTでは、個々のUIコンポーネントを分離してテストします（Storybookを使用）。ページレベルのVRTでは、実際のブラウザでページ全体をテストします。コンポーネントテストはより高速で対象を絞りやすく、ページテストではコンポーネント間の統合レベルのレイアウト問題を検出できます。

デフォルト、hover、focus、active、disabled、loading、error、empty、fullのすべての視覚的な状態をテストします。hover状態にはJavaScriptによるシミュレーション（Playwrightのpage.hover()）が必要です。状態の網羅性が不足すると、インタラクティブな状態におけるリグレッションを見逃す原因になります。

複数のブラウザ（Chrome、Firefox、Safari）とビューポート（モバイル、タブレット、デスクトップ）でスクリーンショットをレンダリングします。ブラウザによるレンダリングの違いで誤検知が起こる可能性があるため、ブラウザごとのベースラインを使用し、既知のレンダリング差を許容するよう差分のしきい値を設定します。

フォントのレンダリングは、OS、ブラウザ、GPUの組み合わせによって微妙に異なります。Dockerと特定のChromeバージョンを使用した一貫性のあるCI環境を使い、環境に起因する誤検知をなくします。クラウドVRTサービスでは、環境の一貫性が自動的に保たれます。

タイムスタンプ、ユーザーアバター、広告、ランダムなデータなどの動的コンテンツは、誤検知の原因になります。スクリーンショットを取得する前に、動的な領域を単色のオーバーレイでマスクします。ほとんどのVRTツールは、マスキング対象を要素セレクターで指定できます。

すべてのPRでCI上のVRTを実行します。承認されていない視覚的な差分が検出された場合は、ビルドを失敗させます。視覚的な差分はエンジニアリングだけでなくデザインにも関わるため、差分の確認をエンジニアだけでなくデザインレビュアーにも割り当てます。

VRTは、見た目の一貫性が製品の機能であるコンポーネントライブラリやデザインシステムで、最も高い投資対効果を発揮します。頻繁に変更されるマーケティングページでは、ベースラインの保守コストがリグレッションを検出する価値を上回る場合があります。

フォントのレンダリングの違いによって、ビジュアルリグレッションテストに誤検知が生じるのはなぜですか？

ビジュアルリグレッションテスト（VRT）は、コードのバージョン間でスクリーンショットを比較し、CSSやレイアウトのリグレッションを検出します。効果的なVRTには、一貫した環境、状態の網羅、動的コンテンツのマスキング、差分をデザインレビュアーに振り分けるレビューワークフローが必要です。これにより、単なる自動ゲートではなく、共同で品質を高めるためのツールになります。