Question

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

首先，我用Kotlin + Selenide编写测试但是如果你的提示\技巧\答案将在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自动化测试中的更改吗？

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

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

1 个答案: