FuzzyとSeleniumとの比較

Question

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

実際には、特に画像では、完全なピクセルの一貫性を得ることは困難です。私はマイナーなぼかし/レンダリング成果物を "失敗"の代わりに "合格"としてカウントしたいので、私たちのテストを脆弱なものにするためにあいまいな比較を行う方法があるのだろうかと思っています。

私はbase64文字列の間のLevenshtein距離を出発点として考えていましたが、それが良いアプローチであるかどうか、または「何かがページ上を移動した」 ""レンダリング成果物 "から"。任意のアイデア/アプローチ？

Answer 1

私はImageMagickコマンドラインツールを使っていました（画像比較を再発明する理由があります）。 「比較」ツールの「ピーク絶対誤差」メトリックでは、2つの画像が同じになる前にピクセルをかすめる必要があります。これはうまくいくようです...少し歪みのある画像では、一致しないピクセルがたくさんあるかもしれませんが、わずかなぼかしで十分です。実際には異なる2つの画像については、ほとんどのピクセルが一致する可能性があるにもかかわらず、非常に異なる傾向のないものがあります。今私は15％未満のPAEをチェックして、画像を同一であると見なすべきかどうかを確認しています。私が使用しているコマンドラインは次のとおりです。ImageMagickのの比較ツールの

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

ドキュメントはここにある：http://www.imagemagick.org/script/compare.php

Answer 2

アーティファクト（BMPやPNGなど）を作成しないイメージ形式を使用すると、ピクセルごとの比較ができます。 私はあなたが共通のEuclidean Distanceで各ピクセルをチェックすることができると思います。 パフォーマンスを少し改善するために、平方根を計算するが、距離の二乗をチェックしません

// 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を必要に応じて調整してください。

Answer 3

私は目立たない変化を報告回避しようとする人間の視覚システムのモデルを使用していますperceptualdiffを使用してきました（レンダラー回帰テストに使用された著者）。使用量が非常に簡単である：

perceptualdiff -output diff.ppm baseline.png test.png 

（diff.ppm差分の領域を強調PPM形式の画像である）

needle回帰テストフレームワークは、スクリーンショットを比較するPDIFFを使用するためのサポートを有している：

http://needle.readthedocs.org/en/latest/#engines

Answer 4

他の誰かが同様のものを探している人は、描写されている - dpxdtです。これは、CI/CDプロセスの一部として使用するように設計されています。

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

サイト全体をクロールし、ページの差異を比較するなどの機能があります。