Selenium WebDriverを使用して、HTML5キャンバス上の画像要素とハードドライブに保存された別の画像を比較するには？

Question

私はオートメーションテストの初心者で、Java for Selenium WebDriverを使用しています。私はペイントに似たWebアプリケーションの一部としてHTML5キャンバスを持っています。私はキャンバス上の要素を移動するのに成功しましたが。しかし今、この要素（ピクセル単位の画像）と私のPCのハードドライブに保存された別の画像を比較したいと思います。 私はキャンバス上の要素のスクリーンショットを撮り、それを別のイメージと比較すると良いアイデアだと思っていました。しかし、私は十分な信頼できるリソースをインターネット上で見つけ出すことができません。そのリソースを通じて、スクリーンショットを撮って2つのイメージを比較することができます。

私は両方の画像を比較できるように助けを借りて、より良い方法やAPIがあるかどうか尋ねたいと思います。あなたがドキュメント、コミュニティとサポートaShot

と呼ばれるこの非常に便利なフレームワークを見てとることをお勧めします

Answer 1

はかなり堅牢です。

また、スクリーンショットの比較のコードの例を以下に示します。比較のための画像及びデータを含むスクリーンショットオブジェクトを返す.takeScreenshot()

スクリーン比較

。比較からいくつかのWebElementsを無視することができます。

Screenshot myScreenshot = new AShot() 
    .addIgnoredElement(By.cssSelector("#weather .blinking_element")) // ignored element(s) 
    .takeScreenshot(driver, yandexWeatherElement); 

ImageDifferを使用して2つの画像の違いを確認します。

ImageDiff diff = new ImageDiffer().makeDiff(myScreenshot, anotherScreenshot); 
BufferedImage diffImage = diff.getMarkedImage(); // comparison result with marked differences 

注：上記のリンクをたどる例をもう少し見ることができます。