我希望该框架能够检测呈现出彼此不同的网页部分。可以在此处看到此类功能的示例。 （文章中的第一张图片）
我从未从事过图片处理工作，因此需要关于已经公开可用的哪些算法可以帮助我完成任务的想法。从我的角度来看，简单的逐像素比较不能很好地工作，因为它没有考虑元素的概念。
#1 楼
我来看看Google QualityBots。它通常用于比较多个版本的Chrome上的网站，但看上去与您尝试执行的操作非常相似。我个人没有时间自己尝试一下，主要是因为使用了EC2机器。除此之外，它是开源的。这里是Google测试博客上的一篇有关它的文章
和项目页面
评论
太棒了！尽管我不会像设计的那样使用该系统，但是他们的图像比较方法正是我所需要的。我将实现它以与当前基于Selenium的框架一起使用。谢谢！
– osjak
2012-1-24的3:41
我很确定我想在我们的硒堆栈中实现这一点... +1
– yoosiba
2012年1月24日在16:22
@osjak-您实现了吗？我需要建立类似的东西。
– 9ikhan
13年4月30日在11:38
#2 楼
Imagemagick是跨平台的图像库和命令行工具，具有可用于比较图像的功能。我大约在2012年工作的一个团队成功地使用它来确定两个图像是否不同。我们使用相同的库构建了一个GUI，可以将两个图像并排显示，并突出显示差异，以供人们决定差异是否重大。评论
Selenium具有完整网页和单个元素的屏幕截图功能。 Imagemagick的语言特定绑定可用于进行屏幕截图比较测试。您也可以使用特定语言的图像处理工具，但是imagemagick是比大多数图像库更快，功能更广泛的工具。
–SilentGuy
19年7月3日在20:56
#3 楼
我不确定这是否是您要寻找的东西，但是，您是否已签出sikuli？我从来没有亲自使用过它，但是，我在这里多次看到它推荐用于相同类型的测试。评论
我有同样的想法。这是指向sikuli的其他SQA问题的链接：sqa.stackexchange.com/search?q=sikuli
–user246
2012年1月23日14:03
sikuli可以很好地使基于图像的事物自动化，但是将图像与osjak的需求进行比较并不是一件容易的事。查看blog.sikuli.org，您可以看到sikuli中的图像识别用于在桌面上查找图像，因此您可以将桌面区域用作方法参数。计算图像差异，标记差异是完全不同的主题。我认为sikulii不能比硒（或基本上是您使用硒的语言）更好地完成该任务。
– yoosiba
2012年1月23日14:43
从我所见，sikuli使用简单的逐像素比较。它对他们有用，但我认为这不会帮助我。 （还是）感谢你的建议。
– osjak
2012年1月24日，下午3:45
好吧，除非您要进行精确匹配或某种特定的比较算法或DOM结构进行比较，否则Sikuli可用于比较图像或图像所代表的屏幕/页面上的任何对象/元素。执行此操作的方法是在屏幕上捕获参考元素/对象（例如，只是一个按钮）（从屏幕截图中裁剪出来），或者如果您需要相对于其他对象的参考元素/对象，则捕获屏幕的更大部分甚至是整个屏幕。将（裁剪的）捕获图像保存为参考图像。然后在测试中使用Sikuli API尝试查找给定屏幕上是否存在对象。
–大卫
2012年10月4日在2:44
Sikuli API也具有用于设置查找图像差异程度的参数，尽管与其他工具或库相比，它在指定差异方面的功能可能较少。
–大卫
2012年10月4日在2:46
#4 楼
这是一个可以直观比较网站dpxdt版本的工具。这是一个视频，解释了该工具的工作方式和使用方法：安全连续部署的秘诀。最后，这是一个如何使用Selenium实施该指南的指南。
#5 楼
这是另一个投入使用的方法，BBC开源了他们使用的一种叫做Wraith的东西，可以在GitHub上找到。Wraith使用PhantomJS或SlimerJS创建不同环境的屏幕截图，然后创建两个图像的差异，受影响的区域以蓝色突出显示
需求
您将需要PhantomJS或SlimerJS，ImageMagick和Ruby 1.9.3或更高版本。由您决定要对哪个浏览器引擎运行。
它可以在Windows，Linux和OSX上运行。
评论
可能值得注意的是，您仍然需要手动检查差异以确保它看起来还可以。您可以根据百分比差异触发失败，但通常这不是很可靠。
– Ardesco
2014年1月6日，12：14
相似的项目：github.com/Huddle/PhantomCSS
–布赖恩·洛（Brian Low）
2014年6月20日下午4:25
#6 楼
如果您使用的是python + selenium，则有一个有用的软件包，称为needle：它通过截取网站部分的屏幕快照并比较它们来检查CSS是否正确渲染。针对已知的良好屏幕截图。它还
还提供了用于测试计算出的CSS值和HTML元素的位置的工具。
您可以观看PyCon US 2014上Julien Phalip演讲的简短演示：
Web功能测试的高级技术
#7 楼
应该有用于图像比较的开源框架。因此，您可以使用现有的Selenium堆栈浏览页面，然后触发给定的图像处理框架。我还和一个人一起工作，该人在AutoIt中实现了浏览器自动化，并在其中实现了图像比较。但是后来他切换到某个外部库进行图像比较，因为它很快。
对于Selenium2，您可以从此链接开始。
评论
我们正在使用解决布局错误的方法。设置非常棘手-开箱即用的配置非常敏感，因为它会带来大量假阴性。虽然有几个参数可以降低灵敏度。
– DuncN
2012年1月23日13:30
我们还使用一种工具来比较“基本”图像（oracle）和新呈现的页面。我们的程序员根据他们在网络上找到的一些代码在内部编写了这些代码-当他们回到我身边时，我会发布一个链接。
– DuncN
2012年1月23日下午13:33
这对于我需要的来说似乎太复杂了。不过谢谢！
– osjak
2012-1-24的3:42
#8 楼
不过，只是一个简单的问题-您确定这是您要拒绝的途径吗？您要检查几页？在一定数量的页面上，运行检查所花费的时间使检查的值无效。这是在调整配置以消除误报的基础上。除此之外，任何动态数据都会抛出比较结果-我们的错误之一是每次呈现页面时googlemaps都会略有不同#9 楼
您想要实现的目标称为自动化视觉回归/验证测试。诸如Selenium或其包装器（量角器）之类的测试自动化工具仅提供自动化部分-您希望对页面显示进行视觉验证是正确的。
您提到的-您需要以下元素：
版本控制-定义代表已批准结果的基线以及要与之进行比较的当前结果集
环境信息-能够管理每个环境的基线的能力（操作系统，Web浏览器类型，视口大小-即尺寸，设备等）时不时截屏
图像比较-您希望避免原始像素之间的比较，因为大多数测试都会失败。您还需要不同的比较模式-即-忽略人眼无法察觉的更改，或者忽略与页面布局成比例的更改（在您更改页面语言时，请说明这种情况-如果一切正常，为什么测试会失败？正确吗？）
可以定义应忽略的动态区域的功能
对iFrame的支持
最后但并非最不重要的一点：易于维护。如果您对该页面进行了合法更改-并且所有测试都失败了（应按其要求进行）-您只希望批准一次更改并在所有步骤中自动批准它。否则，您将面临进行所有测试并获得批准的噩梦。
正如@ user3210346所提到的那样-支付少量钱并使用Applitools-因为它们是唯一提供所有功能的公司我在上面提到过。
我对他们的产品有丰富的经验，他们非常愿意倾听并添加功能。
#10 楼
我在很多方面同意DuncN。在花费大量时间之前尝试一下概念验证可能会有所帮助？有付费服务的建立时间几乎为零，并且可以像我过去使用过的MogoTest一样迅速告诉您该想法本身是否会有所帮助。它不是免费的，但价格却很便宜，如果您选择自己开发，则可以借鉴自己的开发示例。
#11 楼
尽管它不使用屏幕截图，即它不是基于像素的，但是您可以使用recheck-web（免责声明：我为进行重新测试而工作，该项目背后的公司）。源和基于重新检查，它将图形用户界面（以及更多，例如日志文件）映射到特殊的数据模型，该模型使您不仅可以检测视觉回归，还可以检测不可见的更改，例如CSS属性或链接目标。 recheck-web分别进行重新检查，基本上遵循Golden Master Testing和Whitelist Testing的原理。它目前支持Selenium并提供Java SDK，其外观如下：
class MyRecheckWebTest {
WebDriver driver;
Recheck re;
@Before
void setUp() {
driver = new ChromeDriver();
// Use the default implementation.
re = new RecheckImpl();
}
@Test
void test() throws Exception {
// Set the file name of the Golden Master.
re.startTest( "my-golden-master-name" );
// Do your Selenium stuff.
driver.get( "https://my-url.com/" );
// Single call instead of multiple assertions (doesn't fail on differences).
re.check( driver, "my-test-step-name" );
// Conclude the test case (fails on differences).
re.capTest();
}
@After
void tearDown() {
driver.quit();
// Produce the test report.
re.cap();
}
}
您可以使用recheck.cli（免费）或进行复审（付费）来查看测试报告并维护您的Golden Masters。
#12 楼
关于Microsoft Expression，有很多软件可以帮助您进行手动验证。示例包括：https://browserlab.adobe.com/zh-cn/index.htmlhttp://browsershots.org/
这些也很棒，因为它们可以用于x浏览器测试
#13 楼
还有一种简单的老式方法，将给定的屏幕截图/图像与参考图像/图像进行比较，以检查它们是否具有相同的MD5 / SHA1哈希值。不幸的是，这可能不适用于整个网页的屏幕截图。但是，它至少可以用于比较网页上的单个图像。以为我会指出来的。#14 楼
我想添加PhantomFlow和PhantomCSS优点：
D3库提供了很好的可视化报告。您还可以生成可视化的用户流。
PhantomJS的javascript可以将一个动作（单击，键入，选择等）添加到测试中。
该截图在PhantomJS无头浏览器中相当稳定。
缺点：
仅为PhantomJS运行
需要编写JavaScript使其以您的应用程序用户流运行。
评论
PhantomFlow和PhantomCSS在带有弹性框元素的页面上不起作用。 PhantomJS
– Graham P Heath
2015年11月21日，下午1:54
PhantomCSS不再维护：github.com/HuddleEng/…。
–beatngu13
19 Mar 20 '19在20:16
#15 楼
一个运行良好的新竞争者是Ghostinspector。有免费和付费版本。您可以设置公差并通过css选择器设置目标，这两个功能都很强大。
评论
您如何针对所有不同的屏幕宽度执行此操作？
– SuperUberDuper
18年2月6日在11:54
#16 楼
我不建议使用图像比较，因为它存在更快，最简单的方式来获得精确结果。自动化框架是用于视觉测试的强大工具。它使用计算工作，无需CSS或图像比较。
超级快速工作-在GitHub上有使用方法的示例。
#17 楼
听起来您正在寻找的是将视觉测试添加到功能测试中。尝试使用Applitools。这是一篇有关使用Applitools进行基于硒的测试的好文章。
评论
链接断开。总结您的答案中的文章会更有价值。
–user246
2014年12月24日在2:25
#18 楼
有一个名为“ automated-screenshot-diff”的项目。您应该尝试一下。
这是一个npm软件包，用于比较图像/屏幕截图。如果查看examples文件夹，您将看到一个示例，该示例说明如何使用casperjs动态获取这些屏幕截图，然后可以使用automatic-screenshot-diff比较它。
自动截屏差异从图像A-图像B产生感知差异，我认为这几乎是问题所在。
也...该项目能够生成JSON和HTML的比较报告（以Jenkins Artifact的形式存储）。
它是如何工作的？
然后自动截屏差异将扫描屏幕快照的文件夹，并计算出预生产（阶段）发行和生产发行之间的差异。所有生成的图像差异将与屏幕截图位于同一目录中。如果您不知道如何生成这些屏幕截图，请查看examples文件夹。
只需5分钟即可查看项目页面。
评论
嗨，伊戈尔您能否提供更多有关此项目如何帮助发布者的信息，以及其他答案中未解决的新增内容？
–凯特·保罗（Kate Paulk）
13年12月16日在12:33
@KatePaulk刚刚编辑了我的原始答案，以使其变得更好。
–伊戈尔·埃斯科巴（Igor Escobar）
2014年1月3日在16:18
评论
您可以使用md5sum命令比较2张图像。这对我来说可以。如果您的图片相同，将会为您带来共同的结果。小心沿着这条路走，这很乱，而且页面图像比较需要解决很多问题。不同的压缩算法将具有非常细微的差异，对于人眼是不存在的，但是对于能够查看每个像素的机器，您可能会遇到零星的图像问题，按照实际标准，这些图像看起来完全相同。之所以不相等，是因为存在单个像素，彼此之间只有几个阴影。为了解决这个问题，您应该找到一种方法来纳入像素容限的概念
您如何针对所有不同的屏幕宽度执行此操作？听起来真的很可怕。