12

Selenium を使用して Web ページの機能テストを自動化しています。新しいコードを展開するときは、ピクセルごとの比較を行うことが重要です。そのため、Selenium を使用してスクリーンショットを撮り、base64 でエンコードされた文字列を比較して、何か変更があるかどうかを確認しています。

実際には、特に画像の場合、ピクセルの一貫性を完全に保つことは難しいことがわかっています。マイナーなぼやけ/レンダリング アーティファクトを「不合格」ではなく「合格」としてカウントしたいので、あいまいな比較を行ってテストの脆弱性を少し軽減する方法があるかどうか疑問に思っています。

出発点として base64 文字列間のレーベンシュタイン距離を調べることを考えていましたが、それが良いアプローチであるかどうか、または「ページ上で移動したもの」と「レンダリングアーティファクト"。アイデア/アプローチはありますか？

4

4 に答える 4

10

そのため、ImageMagick コマンドライン ツールを使用することになりました (なぜなら、画像比較を再発明するためです)。「比較」ツールの「ピーク絶対誤差」メトリックは、2 つの画像が同一になる前に、ピクセルをどれだけファジングする必要があるかを示します。これはうまくいくようです...わずかなグラフィックの歪みがある画像の場合、一致しないピクセルが多数ある可能性がありますが、それらを一致させるにはわずかなファジングで十分です。しかし、実際には異なる 2 つの画像の場合、ほとんどのピクセルは一致する可能性がありますが、あまり異なる傾向にあるピクセルはほとんどありません。現在、15% 未満の PAE をチェックして、画像が同一としてカウントされるべきかどうかを確認しています。私が使用しているコマンドラインは次のとおりです。

 compare -metric PAE  original.png new.png comparison.png

ImageMagick の比較ツールに関するドキュメントはこちら: http://www.imagemagick.org/script/compare.php

于 2013-03-28T12:59:01.017 に答える
2

アーティファクトを作成しない画像形式 ( BMP やPNGなど) を使用すると、ピクセルごとの比較を行うことができます。共通のユークリッド距離で各ピクセルを確認できると思います。パフォーマンスを少し改善するには、平方根を計算せずに、距離の 2 乗を確認します。

// Maximum color distance allowed to define pixel consistency.
const float maxDistanceAllowed = 5.0;

// Square of the distance, used in calculations.
float maxD = maxDistanceAllowed * maxDistanceAllowed;

public bool isPixelConsistent(Color pixel1, Color pixel2)
{
    // Euclidean distance in 3-dimensions.
    float distanceSquared = (pixel1.R - pixel2.R)*(pixel1.R - pixel2.R) + (pixel1.G - pixel2.G)*(pixel1.G - pixel2.G) + (pixel1.B - pixel2.B)*(pixel1.B - pixel2.B);

    // If the actual distance is less than the max allowed, the pixel is
    // consistent and the method returns TRUE
    return distanceSquared <= maxD;
}

C# コードをテストしませんでしたが、アイデアが得られるはずです。いくつか試してmaxDistanceAllowedみて、ニーズに合わせて調整してください。

于 2013-01-14T09:39:15.020 に答える
1

他の誰かが似たようなものを探しているなら、Depicted-dpxdtがあります。CI/CD プロセスの一部として使用するように設計されています。

知覚差分をサーバー、コマンドライン ツール、ファントム js のラッパーと組み合わせます。

サイト全体をクロールし、ページの違いを比較するなどの機能が実証されています。

于 2015-09-14T13:48:57.683 に答える