Visual Regression Testing

ビジュアルリグレッションテストは、ユーザーインターフェースの見た目に生じた意図しない変更を検出する自動テストの手法です。ページまたはコンポーネントのスクリーンショットを撮り、承認済みのベースライン画像と比較し、設定した閾値を超える差があれば、レビューのために報告します。

機能のテストは、ボタンが動作することを確認します。ビジュアルのテストは、ボタンが正しく見えることを確認します。位置、色、サイズ、フォント、間隔が正しいかどうかです。共有の1つのCSSファイルの変更は、多数のページのレイアウトをずらすことがあります。ビジュアルのテストは、この副作用をリリース前に可視化します。チームは継続的インテグレーションでこのテストを実行します。多くの場合はPlaywright、Cypressベースのプラグイン、またはビジュアルテストの専用サービスを使います。

ビジュアルリグレッションテストの仕組み

1. 制御されたブラウザで、固定のビューポートサイズで各ページまたはコンポーネントを描画します。
2. スクリーンショットを撮影し、レビュー後にベースラインとして保存します。
3. 変更のたびに、同じ条件で撮り直します。
4. 新しい画像をベースラインと比較し、差分画像を作成します。
5. レビューする人が、意図した変更を承認して新しいベースラインにするか、不具合を修正します。

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

• デザインシステムとコンポーネントのライブラリ。
• 多数のテンプレートを持つマーケティングサイト。
• CSSや依存関係の更新が頻繁なWebアプリ。
• Chromium、Firefox、WebKitをまたぐブラウザ間のチェック。

ピクセルの差分と知覚的な差分の比較

ピクセルの差分は、各位置の色の値を比較し、不一致の数を数えます。正確ですが、アンチエイリアスやフォントの描画に敏感です。SSIMに基づく比較などの知覚的な差分は、見る人が気づく形で構造とコントラストの変化を測るため、誤検出が減ります。多くのツールは、ピクセルの差分に許容範囲とマスクした領域を組み合わせます。

よくある間違い

• ベースラインを1つのOSで、比較を別のOSで実行し、フォントの描画が変わる。
• 撮影領域に日付、広告、アニメーションを残す。
• 差分を確認せずに承認し、不具合をベースラインにしてしまう。
• 1つのビューポートサイズだけでテストする。

同じスクリーンショットを繰り返し撮りますか？

テストスイートを使わずに手動でビジュアルを確認する場合は、Temposhotの Website Capture が、固定のデバイスサイズでURLのリストを撮影します。Compare Images は、2枚の撮影結果の違いを強調表示します。詳しくは Webサイトのスクリーンショット自動化 をご覧ください。

よくある質問

ビジュアルリグレッションテストは機能のテストの代わりになりますか？

なりません。ビジュアルのテストは見た目を確認します。動作の確認には、機能のテストが引き続き必要です。

誤検出を減らすには？

動的なコンテンツを固定し、すべての実行で同じ環境を使い、意図的に変わる領域をマスクしてください。

出典

• Playwright visual comparisons
• Structural similarity index（Wikipedia）

関連リソース

• 画像を比較: ブラウザで2枚のスクリーンショットの差分を確認します。
• Website Captureのオプション: デバイスと待機の設定。
• 実行と結果: 撮影の実行結果をレビューします。