如何使用Selenium WebDriver验证两个图像？ [重复]

Webdriver不提供直接的任何图像验证功能，但是我们可以使用TakeScreenshot WebDriver函数通过截取整个网页的两个屏幕截图来验证图像，一个在脚本创建时，另一个在执行时。 br />我创建了一个示例脚本，其中首先捕获了Google主页的屏幕截图并将(input.jpg)保存到我的项目中，另一个屏幕快照(output.jpg)在测试执行时捕获在同一页面上并保存到了项目中。我想比较两个图像，如果它们不相同，则测试脚本将失败。

我应该如何在使用硒的图像验证中应用逻辑？

我不明白这个问题。您在问如何比较屏幕截图吗？

我创建了一个示例脚本，在该脚本中，我首先捕获了Google主页的屏幕截图并将其保存（GoogleInput.jpg）到我的项目中，另一个屏幕快照“ GoogleOutput.jpg”在测试执行时捕获了同一页面并保存至项目中。我想比较两个图像，如果它们不相同，则测试脚本将失败。那我该如何使用Selnium

硒不提供比较图像的方法。您将需要其他一些机制来做到这一点。这并不意味着您不能在项目中使用Selenium。相反，这意味着您将需要使用Selenium来捕获图像，并使用Selenium以外的其他方式来比较图像。

采取此路线时要小心。有整个公司致力于解决这一自动化问题。我知道的最大的之一是Applitools。他们写了很多关于他们使用的解决方案的文章，而无需深入了解具体的实现细节。因此，通过探索他们和其他公司如何解决他们的问题，您可能会学到很多东西

他们在产品周围拥有整个生态系统。如果您开始比较图像，您将开始意识到不同的浏览器将以不同的方式呈现html。对于人类来说，两幅图像看上去与计算机看起来相同，但是，渲染的文本可能会使用不同的算法进行平滑处理，这可能会导致像素不匹配。这是从屏幕截图进行图像验证的常见问题。同一浏览器中也可能存在此问题，但是对于不同的版本或在不同的操作系统上也是如此。这是公司着手解决的问题之一。

#1 楼

Selenium是一个软件库，用于定位网页上的元素并与之交互。要处理图像，您需要使用其他库。 Selenium可以提供屏幕截图（图像），但是您需要使用其他东西来处理此类图像。

作为程序员，您需要掌握多个库，并学会使用正确的工具工作。

#2 楼

使用Sikulix API。 Sikuli是一个库，可以帮助您比较两个图像或在屏幕上显示图像时对其进行识别。显示上述图像后，您可以单击识别的图像。

下载链接

转到下载链接。

下载sikulix-setup-1.1.0.jar
运行jar文件。
在选项下选择/或选择最适合您的选项。

单击立即安装
完成安装，您将找到一个名为sikulixapi.jar的文件。该jar必须包含在您的类路径中。

示例代码：

Screen screen = new Screen();
//set a timeout for waiting for the image
screen.setAutoWaitTimeout(30000); //default is 10 seconds
//wait for an image to get displayed on the screen and then click on it
screen.wait(new Pattern("img/image.PNG")).click();
//wait for an image with exact match
screen.wait(new Pattern("img/image.PNG").exact()).click();

匹配是基于图像文件名还是基于图像内容？

– dzieciou
16年4月28日在4:48

其基于图像内容。 Sikuli计算匹配率，因此，如果匹配超过阈值（例如0.7），则为匹配。如果我们想要完全匹配，则必须指定。

–小熊猫
16-4-28在4:50

#3 楼

验证图像的一种方法是使用Applitools + Selenium。它似乎在硒人群中越来越受欢迎，因为它不仅可以进行图像比较，而且还可以进行布局比较。我自己没有使用过它，但是它在我的TODO列表中。

从外观上，他们有一个不错的教程，您可以在其中选择您的环境（Selenium）和语言，它将向您展示如何安装依赖项，并提供一些示例代码来运行测试。

我已经看到它与Sauce Labs合作出现了很多，这是一个博客文章，其中包含一些Java示例代码。

#4 楼

您可以计算图像的哈希值，然后比较哈希值是否相等。
SO在计算哈希值时有一个问题

#5 楼

我们使用的一种非硒工具（我们使用付费版本）是GhostInspector，它提供了多种屏幕截图选项，包括按百分比差异和通过CSS选择器比较目标区域。

#6 楼

如果将Selenium / Webdriver与Javascript结合使用，则可以使用一些库来比较屏幕截图：

Resemble.JS =>比较两个图像并找出不同之处。 Resemble.js可用于您可能在浏览器中进行的任何图像分析和比较要求。
TemplateMatching.JS =>图片搜索：在更大的图片（例如屏幕截图）中查找其他图片（例如按钮）

感谢@timfredo，这是图像验证的一个很好的例子。您是否有相同的示例/代码-如何将其与Selenium一起使用？

–巴拉特鬃毛
17年1月6日，9：51

要使用Javascript库，您需要通过Javascript / Node.JS控制Selenium和/或将其与PhantomJS一起使用。不幸的是，设置起来非常棘手。或者，也许可以选择基于截图的Web测试工具Kantu。

– timfredo
17年1月6日在9:59

#7 楼

检查此代码是否可行

import java.awt.image.BufferedImage;
 import java.awt.image.DataBuffer;
 import java.io.File;
 import java.io.IOException;
 import java.util.concurrent.TimeUnit;
 import javax.imageio.ImageIO;
 import org.apache.commons.io.FileUtils;
 import org.openqa.selenium.OutputType;
 import org.openqa.selenium.TakesScreenshot;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.firefox.FirefoxDriver;
 import org.testng.Assert;
 import org.testng.annotations.AfterSuite;
 import org.testng.annotations.BeforeSuite;
 import org.testng.annotations.Test;

 public class ImageComparison {

      public WebDriver driver;
      private String baseUrl;

      @BeforeSuite
      public void setUp() throws Exception {
         driver = new FirefoxDriver();
         baseUrl = "https://www.google.co.in/";
         driver.navigate().to(baseUrl);
         driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);      
      }

      @AfterSuite
      public void tearDown() throws Exception {
         driver.quit();    
      }

      @Test
      public void testImageComparison() throws IOException, InterruptedException {         
         File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
         Thread.sleep(3000);
         FileUtils.copyFile(screenshot, new File("GoogleOutput.jpg"));

         File fileInput = new File("GoogleInput.jpg");
         File fileOutPut = new File("GoogleOutput.jpg");

         BufferedImage bufferfileInput = ImageIO.read(fileInput);
         DataBuffer bufferfileInput = bufferfileInput.getData().getDataBuffer();
         int sizefileInput = bufferfileInput.getSize();                     
         BufferedImage bufferfileOutPut = ImageIO.read(fileOutPut);
         DataBuffer datafileOutPut = bufferfileOutPut.getData().getDataBuffer();
         int sizefileOutPut = datafileOutPut.getSize();
         Boolean matchFlag = true;
         if(sizefileInput == sizefileOutPut) {                         
            for(int i=0; i<sizefileInput; i++) {
                  if(bufferfileInput.getElem(i) != datafileOutPut.getElem(i)) {
                        matchFlag = false;
                        break;
                  }
             }
         }
         else {                           
            matchFlag = false;
         Assert.assertTrue(matchFlag, "Images are not same");    
      }
 }

请格式化您的代码。

–user246
16-4-27的14:58

@amit您能否解释为什么使用此方法-BufferedImage bufferfileInput = ImageIO.read（fileInput）; DataBuffer bufferfileInput = bufferfileInput.getData（）。getDataBuffer（）;为什么在脚本中使用“ BufferedImage”？

–巴拉特鬃毛
16年4月28日在9:41

我一直使用BufferedImages来存储和处理内存中的图像。对于Java中的图像比较，我总是使用它。

– amitsahu86
18/12/10在10:30

与整个网页完全匹配的问题在于，如果甚至存在轻微的对齐问题，浏览器大小更改，分辨率更改，浏览器更新导致轻微更改，那么您的测试将失败，调试这将浪费您大量的时间。将整个网页相互比较是一种非常脆弱的测试方法。取而代之的是，获取您要测试的确切区域的详细信息并进行检查。

– Mugen
20年7月3日在5:07

#8 楼

正如@ Peter-Masiar所提到的，您不能仅使用Selenium来做到这一点，但是您可以查看“结构相似性”方法。附加链接。我公司已经大量使用这种方法进行测试。

#9 楼

将Selenium屏幕截图与ImageMagick库结合使用，或编写自己的图像比较功能。 ImageMagick可使用大多数编程语言工作，但是您始终可以从命令行运行它并解析输出。

从命令行中检查。 > Java代码示例。
如何从Java运行命令行工具请在此处检查。

编程黑洞网