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

Question

How to check that the image was changed if there're no changes in HTML code? It may sound a little bit complicated so I'll try to add some details.

First of all, I write tests with Kotlin + Selenide but if your tips\tricks\answers will be in Java + Selenium I'm totally OK.

Secondly, here's the situation: I have a visualizer of user's future kitchen where he\she can add\edit\delete different stuff, e.g. sinks and faucets. There're several presets: some of them with cabinets, some of them have tables, tables with chairs, etc. It is coded like this: <a href="#" class="preset-buttons-selected" style="background-image: url("https://s3.amazonaws.com/bla-bla-bla/some_image.png");"></a>

So, when the user changes something, e.g. adds a Sink, image is actually changed, but nothing is changed in the html code that is why I CANNOT verify the changes in the autotests. I see that there're new images were pulled from s3.amazonaws.com but it is only visible in Network tab of the browser console and it is not visible in the html code of the page.

So, my question is, can I somehow verify that changes in my UI automation tests?

Answer 1

My first thought was to get a hash of the image before and after the changes and then see if the hash is the same. This will tell you if the image has changed.

Here's a quick example and a function that you can use in your code.

This function takes in a URL to the image and returns the MD5 hash of that image.

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

and here's a quick example using a test site that contains three random images. You should see a hash printed for each of the three images. Each time you load the page, a different set of three images are loaded but if you run it a few times you should get an instance where two are the same so you can verify that the hash is indeed the same when two images are the same.

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

Example output would look like

c8977e445530e09a06ce368f7f5e70dd
c8977e445530e09a06ce368f7f5e70dd
62baf598cd68eec5725df67e33c05cba

where the first two images were the same but different from the third.

Some of this code was adapted from https://sites.google.com/site/matthewjoneswebsite/java/md5-hash-of-an-image