Screenshot Comparison

スクリーンショットの比較は、同じ画面、ページ、ウィンドウの2枚のスクリーンショットを確認し、違いを見つける処理です。比較は視覚的に行うこともできます。画像を並べるか、スライダーで重ねるか、部分的な不透明度で合成します。また、計算によって行うこともできます。ソフトウェアが、変わったピクセルを強調表示する差分画像と、違うピクセルの数または割合を出力します。

信頼できる比較には、条件が揃った入力が必要です。2枚の画像は、ピクセルの寸法、スケールファクター、切り抜きが同じである必要があります。ウィンドウのサイズ、Retinaのスケール、スクロール位置が変わると、内容が同じでもほぼすべてのピクセルが異なって見えます。

手動の比較と自動の比較

手動の比較は、数枚の画像や判断が必要な場面に向いています。たとえば、リデザインが読みやすくなったかどうかです。自動の比較は、多数の画像と繰り返しの実行に向いています。スクリプトは、新しい撮影結果を保存済みのベースラインと比較し、閾値を超えて変わったものだけを報告します。

スクリーンショットの比較の用途

• コードの変更後のビジュアルリグレッションテスト。
• 競合他社のページや自社のページで、内容の変更を確認する。
• デザインレビューとリリースノートの前後の画像。
• ドキュメントやダッシュボードが、以前のバージョンと一致することを確認する。

ビジュアルの差分検出の仕組み

1. 2枚の画像を同じサイズに揃えます。
2. 各ピクセルの色の値を比較します。
3. 許容範囲未満の差を無視します。この許容範囲は、アンチエイリアスによるノイズを吸収します。
4. 変わったピクセルをハイライトの色で示し、合計を報告します。

SSIMなどの知覚的な方法は、正確な値ではなく構造とコントラストを比較します。そのため、わずかな描画のずれによる誤検出が減ります。

スクリーンショットの比較でよくある間違い

• サイズまたはスケールファクターが異なる画像を比較する。
• 時計、広告、カルーセル、アニメーションをフレームに残す。
• インストールされているフォントやブラウザのバージョンが異なる状態で撮影する。
• 許容範囲を高く設定しすぎて、実際の変更が通過してしまう。

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

Temposhotの Website Capture は、URLごとに Device、Area、Wait の設定を保持するため、繰り返しの実行で比較可能な画像が得られます。画面の領域については、保存した Custom Area で同じ長方形を保持できます。詳しくは キャプチャのオプション をご覧ください。

よくある質問

適切な差分の閾値はいくつですか？

ページによって異なります。低い値から始め、誤検出を確認し、閾値を上げるのではなく、動的な領域をマスクしてください。

何もインストールせずに2枚のスクリーンショットを比較できますか？

はい。Compare Images は、ブラウザで違いを強調表示します。

出典

• Playwright visual comparisons
• Structural similarity index（Wikipedia）

関連リソース

• 画像を比較: 2枚の画像をローカルで差分比較します。
• Website Captureのクイックスタート: 繰り返し可能なページの一式を撮影します。
• キャプチャソース: 保存したカスタム範囲。