ピクセルパーフェクト比較アルゴリズムの内部

最もシンプルな差分：ピクセル単位

画像比較の最も直接的なアプローチは、すべてのピクセルを反復処理してRGB値が一致するかチェックすることです：

def naive_diff(img_a, img_b):
    diff_count = 0
    for y in range(height):
        for x in range(width):
            if img_a[y][x] != img_b[y][x]:
                diff_count += 1
    return diff_count / total_pixels

これは動作しますが、ナイーブです。フォントレンダリングのサブピクセル単位のずれ1つで、人間の目にはほぼ同じに見えるにもかかわらず、数千ピクセルが異なるとフラグされる可能性があります。

知覚的色距離

人間の視覚はすべての色の違いを均等に知覚するわけではありません。#FF0000から#FF0001への変化は見えませんが、#808080から#818080への変化は特定のコンテキストでは気づくかもしれません。

CIELAB色空間は知覚的に均一になるよう設計されており、等しい数値的距離がほぼ等しい知覚差異に対応します。Delta Eメトリクスは、CIELAB空間における2色間のユークリッド距離を測定します：

Delta E = sqrt((L2 - L1)^2 + (a2 - a1)^2 + (b2 - b1)^2)

Delta Eが2.0以下であれば、一般的に知覚不能と見なされます。最新のビジュアルテストツールはこのしきい値を使用して、意味のある色のシフトをキャッチしつつノイズをフィルタリングします。

構造的類似性指標（SSIM）

SSIMはピクセルレベルの比較を超えて、構造パターンを評価します。3つのコンポーネントを考慮します：

• 輝度：全体的な明るさの比較
• コントラスト：領域間の分散比較
• 構造：ピクセルパターンの相関

SSIM(x, y) = ((2*μx*μy + c1) * (2*σxy + c2)) / ((μx² + μy² + c1) * (σx² + σy² + c2))

SSIMは-1から1の値を返し、1は画像が同一であることを意味します。0.95以上の値は通常、知覚可能な差異がないことを示します。

SSIMがUIテストに重要な理由

UIのスクリーンショットには多くの構造があります：テキストブロック、ボーダー、シャドウ、余白。SSIMは、アンチエイリアシングやレンダリング差異により個々のピクセルがわずかにずれても、これらの構造要素が保持されているかどうかをキャプチャします。

アンチエイリアシング検出

アンチエイリアシングは、ビジュアルテストにおける偽陽性の最大の発生源です。ブラウザが斜めの線や曲線テキストをレンダリングする際、滑らかな見た目を作るためにエッジピクセルを背景とブレンドします。しかし、正確なブレンドは以下の要因で異なります：

• ブラウザのバージョン
• オペレーティングシステム
• GPUドライバ
• ディスプレイのスケーリング係数

スマートな差分アルゴリズムは、ピクセルがエッジ上にあるか（大きく異なる隣接ピクセルがあるか）、色の差異が予想されるアンチエイリアシング範囲内かをチェックすることで、アンチエイリアスピクセルを検出します。

知覚ハッシュ

ピクセルレベルの比較なしに2つの画像が類似しているかを素早く判断するために、知覚ハッシュはコンパクトなフィンガープリントを作成します：

1. 画像を小さなグリッド（例：8x8）にリサイズ
2. グレースケールに変換
3. 離散コサイン変換（DCT）を計算
4. DCTの中央値に基づいてバイナリハッシュに圧縮

知覚ハッシュのハミング距離が5未満の2枚の画像は、ビジュアル的に同一である可能性が高いです。このアプローチは、コストの高いピクセルレベル比較を実行する前のプリフィルタリングに有用です。

アルゴリズムの選択

適切なアルゴリズムは要件に依存します：

ほとんどの本番ビジュアルテストパイプラインでは組み合わせを使用します：高速プリスクリーニングに知覚ハッシュを使い、フラグされた画像の詳細比較にDelta EまたはSSIMを使用します。

ScanUで始める

これらのテクニックを本番環境で適用するには、注力するページセットから始めて、意味のあるUI変更のたびにベースラインスクリーンショット比較を実行しましょう。プランは料金、実装の詳細はFAQ、プロダクトの機能は機能で確認できます。