0

如果 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 自动化测试中的更改？

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);
}

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

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

于 2017-05-31T15:15:37.787 回答