定义样式指南
CSS和HTML的语法检查
DOM比较
屏幕截图比较
如何您是否从Web应用程序检查网站的外观？
我用Java实现了一个截图比较工具。屏幕截图由基于硒的框架生成。我从逐像素比较开始。实际上，我将屏幕截图分成了不同的部分（可能是10x10的矩形），并比较了相应部分的直方图。为了将来，我想自动确定相关部分（感兴趣的区域）。也许有人对如何做有想法。
#1 楼
测试网站外观的最有效工具仍然是人的眼睛和大脑。也就是说，如果您想要或需要自动化，图像比较可能是最无效的方法，因为即使使用模糊逻辑，图像比较也会产生太多的误报。所要做的就是更改硬件（使用不同的显示器或视频卡-这将更改颜色饱和度，图像亮度等，并且这是在您考虑更改屏幕分辨率之前的时间），并且屏幕快照图像比较将失败。
如果必须这样做，我将首先检查一下站点，然后使用保存的基准在每页的基础上为CSS和HTML建立文件比较例程。这样可以避免在不同浏览器中呈现不同的问题（最好由初次验证用肉眼处理），并且在进行更改时会减少工作量（对于每张图像，您需要定义感兴趣的区域，多少差异）对于文件比较，您实际上仅需要一种方法来标识和剥离时间戳记之类的内容，这些内容将始终更改-不受基准文件更改的影响。
那里是执行图像比较的测试工具：我尝试过的那些工具并没有给我留下深刻的印象。他们可能会满足您的需求。
评论
也许通过人工测试外观是可靠的。但是，如果必须测试1.000个以上的站点以进行回归，则不可行。我测试了很多工具，例如幽灵之类。但是大多数工具使用ImageMagick逐像素比较图像并生成差异图像。就文件比较而言，那也不能满足我的需求。比较必须通过图像处理进行可视化，并且不能访问DOM。
–MRae
14年7月18日在12:03
您是否需要以这种方式进行比较？
–凯特·保罗（Kate Paulk）
2014年7月21日在11:17
#2 楼
必须说，使用自动化方法从未成功过。最后，总是以现金形式使用更多的专家资源，而不是便宜的眼球资源。我看到上一个尝试过的项目的问题是环境和应用程序更改来得太快，无法从不变的重复测试中获得收益。尽管客户认为系统不是非常不稳定。
如果我有很多站点具有大量静态显示，我可能会尝试使用具有高级自动化功能的混合方法来创建目标问题列表。但是我不会把目光放的很高。
#3 楼
如前所述，Applitools Eyes是一项服务，可以做到这一点。不再有像素比较以及直方图和阈值。 Applitools具有专有算法，可以分析屏幕并确定屏幕截图是否与基线匹配。他们在这方面做得很好。如果确实需要，还可以设置“人工”级别进行比较，例如，可以使用“布局”而不是“严格”来确保两个屏幕截图具有相似的结构，但不一定具有相同的内容。
stephenb的答案中提到的非常酷的Robot框架实际上是基于Applitools python SDK构建的，并且Applitools对于大多数流行的编程语言（Python，Ruby，Java，C＃..）也都有自己的SDK。 。
您可以在Web上查看测试结果，Applitools还可以自动维护测试结果，而其他工具则无法提供。因此，例如，如果将一个区域标记为动态区域，Applitools会在测试的其他步骤中，甚至在同一测试的其他基线（不同形状因数）中，自动将该区域标识并标记为动态区域。 >
#4 楼
我们已经开始试用此程序-http://code.google.com/p/qualitybots/来自Google测试团队的一个项目，它是一个不错的博客，值得阅读。尽管目前，我们使用crossbrowsertesting.com和saucelabs进行了大量测试。我们将在不同浏览器上的网站测试分为三个不同类别。
功能性-确保站点的关键过程和功能正常运行。自动化的。
渲染-使用跨浏览器工具的Visual Test，尽管我们将使用自动化来拍摄屏幕快照，以加快过程。
可用性-恐怕是所有手册。
#5 楼
据我所知，视觉回归测试正在蓬勃发展。我开始收集信息并对其进行一些基本测试。这里有几个地方/工具可以检查：关于那些工具的Thoughtworks雷达部分：“这引起了各种各样的视觉回归测试工具，包括CSS Critic，dpxdt，Huxley，PhantomCSS和Wraith”，以及Sikuli
评论
我知道Sikuli可以通过屏幕截图在GUI上自动化一些操作。但是我如何使用它进行视觉测试。有没有一种方法可以模糊比较屏幕截图？
–MRae
14年7月22日在8:38
进行匹配时，可以设置相似性：“可以使用Region.find（）之类的方法来评估区域的视觉内容，该方法会在区域内查找给定的矩形像素图案。该区域中的匹配内容具有0（未找到）和1（被发现且每个像素与图案完全匹配）之间的相似性。建议使用最小相似度进行搜索，以便可以忽略形状和颜色的一些细微变化。（ sikulix-2014.readthedocs.org/en/latest/region.html#Region）
– Laurent Bristiel
2014年7月22日在8:42
#6 楼
查看此工具https://github.com/NaviNet/Robot-AppEyes-一个机器人框架库，该库使用基于云的提供程序来执行“人眼”视觉验证部分。使用Web GUI设置了预期的结果/基线，它甚至允许根据其元素定位器来验证区域-我发现这很酷！
任何使用Selenium2Library的人只需添加Robot库并在现有测试中调用验证即可。
#7 楼
我们最近启动了http://backtrac.io项目，该项目还允许您运行一组屏幕截图并进行比较。现在的主要功能之一是能够比较您的生产和暂存环境。这样，您可以非常有效地看到要更改的内容，并尽早发现错误。#8 楼
Automotion框架是用于视觉测试的强大工具。它使用计算工作，而无需CSS或图像比较。可以超级快速地运行https://github.com/ITArray/Automotion-在GitHub上有使用方法的示例。
评论
无法回答您的问题，但可以在此问题中找到一些有趣的Web比较工具：sqa.stackexchange.com/questions/2459/…