如果 HTML 代码没有变化，如何检查图像是否已更改？

Question

如果 HTML 代码没有变化，如何检查图像是否已更改？这听起来可能有点复杂，所以我会尝试添加一些细节。

首先，我使用 Kotlin + Selenide 编写测试，但如果你的 tips\tricks\answers 将在 Java + Selenium 中，我完全没问题。

其次，情况是这样的：我有一个用户未来厨房的可视化工具，其中 he\she 可以 add\edit\delete 不同的东西，例如水槽和水龙头。有几种预设：其中一些带有橱柜，一些带有桌子，带椅子的桌子等。它的编码是这样的：<a href="#" class="preset-buttons-selected" style="background-image: url("https://s3.amazonaws.com/bla-bla-bla/some_image.png");"></a>

因此，当用户更改某些内容时，例如添加一个接收器，图像实际上已更改，但 html 代码中没有任何更改，这就是为什么我 CANNOT 验证自动测试中的更改。我看到从 s3.amazonaws.com 中提取了新图像，但它仅在浏览器控制台的“网络”选项卡中可见，在页面的 html 代码中不可见。

所以，我的问题是，我能否以某种方式验证我的 UI 自动化测试中的更改？

Answer 1

我的第一个想法是获取更改前后图像的哈希值，然后查看哈希值是否相同。这会告诉您图像是否已更改。

这是一个简单的示例和一个您可以在代码中使用的函数。

此函数接收图像的 URL 和该图像的 returns 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);
}

这是一个使用包含三个随机图像的测试站点的简单示例。您应该看到为三个图像中的每一个打印的散列。每次加载页面时，都会加载一组不同的三张图片，但是如果你运行它几次，你应该得到一个实例，其中两个是相同的，这样你就可以验证哈希值确实是相同的，当两个图像相同。

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

前两张图片相同但与第三张不同。

部分代码改编自https://sites.google.com/site/matthewjoneswebsite/java/md5-hash-of-an-image

如果 HTML 代码没有变化，如何检查图像是否已更改？

How to check that the image was changed if there're no changes in HTML code?

java

selenium

automated-tests

kotlin

selenide