如何将HTML5画布上的图像元素与使用SeleniumWebDriver存储在硬盘上的另一个图像进行比较？

Question

我是自动化测试的初学者，我正在为Selenium WebDriver使用Java。我有一个HTML5画布作为网络应用程序的一部分，类似于油漆。虽然我成功地在画布上移动了一个元素。但是现在，我想把这个元素（以像素为单位的图像）与保存在电脑硬盘上的另一张图像进行比较。我认为在画布上截取元素的屏幕截图，然后与另一张图像进行比较会是一个更好的主意...但是我在互联网上没有找到足够可信的资源，通过这些资源我可以通过截屏来比较这两张图片。

所以，我想问是否有其他更好的方法或任何API的帮助下，我将能够比较这两个图像？

Answer 1

转换Base64的两个映像并进行比较。

要获取画布中图像的Base64，请使用以下代码：

WebElement canvas = driver.findElement(By.tagName("canvas"));
JavascriptExecutor js = (JavascriptExecutor) driver;
String canvas_base64_String = js.executeScript("return arguments[0].toDataURL('image/png').substring(22);", canvas).toString();

Answer 2

您可能想看看这个叫做aShot的非常方便的框架

文档、社区和支持非常强大。

此外，下面是用于屏幕比较的代码示例。

截图比较

。takeScreenshot（）返回一个屏幕截图对象，其中包含用于比较的图像和数据。通过比较，可以忽略某些Web元素。

Screenshot myScreenshot = new AShot()
  .addIgnoredElement(By.cssSelector("#weather .blinking_element")) // ignored element(s)
  .takeScreenshot(driver, yandexWeatherElement);

使用ImageDifference查找两个图像之间的差异。

ImageDiff diff = new ImageDiffer().makeDiff(myScreenshot, anotherScreenshot);
BufferedImage diffImage = diff.getMarkedImage(); // comparison result with marked differences

请注意，您可以在上面的链接中看到更多示例。