0

HTMLコードに変更がない場合、画像が変更されたことを確認する方法は? 少し複雑に聞こえるかもしれませんので、詳細を追加してみます。

まず、Kotlin + Selenide でテストを書いていますが、tips\tricks\answers が Java + Selenium である場合は、まったく問題ありません。

次に、状況は次のとおりです。ユーザーの将来のキッチンのビジュアライザーがあり、シンクや蛇口など、さまざまなものを追加\編集\削除できます。いくつかのプリセットがあります。キャビネット付きのもの、テーブル付きのもの、椅子付きのテーブルなどがあります。次のようにコード化されています。<a href="#" class="preset-buttons-selected" style="background-image: url("https://s3.amazonaws.com/bla-bla-bla/some_image.png");"></a>

したがって、ユーザーが何かを変更すると、たとえばシンクを追加すると、画像は実際に変更されますが、html コードでは何も変更されないため、自動テストで変更を確認できません。s3.amazonaws.comからプルされた新しい画像があることがわかりますが、ブラウザ コンソールの [ネットワーク] タブにのみ表示され、ページの html コードには表示されません。

それで、私の質問は、どうにかして UI 自動化テストの変更を確認できるでしょうか?

4

1 に答える 1

3

私が最初に考えたのは、変更の前後で画像のハッシュを取得し、ハッシュが同じかどうかを確認することでした。これにより、イメージが変更されたかどうかがわかります。

コードで使用できる簡単な例と関数を次に示します。

この関数は、画像を取り込み、URLその画像の MD5 ハッシュを返します。

public static String getHashOfImage(URL imageUrl) throws IOException, NoSuchAlgorithmException
{
    BufferedImage buffImg = ImageIO.read(imageUrl);
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(buffImg, "png", outputStream);
    byte[] data = outputStream.toByteArray();

    MessageDigest md5 = MessageDigest.getInstance("MD5");
    md5.update(data);
    byte[] digest = md5.digest();

    return new BigInteger(1, digest).toString(16);
}

3 つのランダムな画像を含むテスト サイトを使用した簡単な例を次に示します。3 つの画像のそれぞれにハッシュが出力されているはずです。ページをロードするたびに、3 つのイメージの異なるセットがロードされますが、それを数回実行すると、2 つのイメージが同じ場合にハッシュが実際に同じであることを確認できるように、2 つのイメージが同じであるインスタンスを取得する必要があります。 .

driver.get("http://the-internet.herokuapp.com/dynamic_content");

List<WebElement> images = driver.findElements(By.cssSelector("img"));
for (int i = 1; i < images.size(); i++)
{
    System.out.println(getHashOfImage(new URL(images.get(i).getAttribute("src"))));
}

出力例は次のようになります

c8977e445530e09a06ce368f7f5e70dd
c8977e445530e09a06ce368f7f5e70dd
62baf598cd68eec5725df67e33c05cba

最初の 2 つの画像は同じですが、3 番目の画像とは異なります。

このコードの一部はhttps://sites.google.com/site/matthewjoneswebsite/java/md5-hash-of-an-imageから改作されました

于 2017-05-31T15:15:37.787 に答える