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

Question

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

首先，我使用 Kotlin + Selenide 编写测试，但如果您的提示\技巧\答案将使用 Java + Selenium 编写，我完全没问题。

其次，情况是这样的: 我有一个用户 future 厨房的可视化工具，他/她可以在其中添加/编辑/删除不同的东西，例如水槽和水龙头。 有几种预设:有些带有柜子，有些有 table ，有 table 有椅子等。 它的编码如下:<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 自动化测试中的更改吗？

Answer 1

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

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

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

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

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