Как проверить, что изображение было изменено, если в коде HTML нет изменений?

Как проверить, что изображение было изменено, если в коде 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>

Таким образом, когда пользователь что-то меняет, например, добавляет Sink, изображение фактически изменяется, но ничего не изменяется в html-коде, поэтому я НЕ МОГУ проверить изменения в автотестах. Я вижу, что с s3.amazonaws.com были сняты новые изображения, но они видны только на вкладке Сеть консоли браузера и не отображаются в HTML-коде страницы.

Итак, мой вопрос: могу ли я как-то проверить, что изменения в тестах автоматизации пользовательского интерфейса?

Моя первая мысль заключалась в том, чтобы получить хэш изображения до и после изменений, а затем посмотреть, является ли хэш одинаковым. Это скажет вам, изменилось ли изображение.

Вот краткий пример и функция, которую вы можете использовать в своем коде.

Эта функция принимает 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