视觉回归检验

Question

为了测试网站的视觉外观，仅仅使用selenium (功能表面测试)这样的工具是不够的，因为它没有直接检查可视化外观和/或CSS代码。不同的方法是可能的

• 定义样式指南
• CSS和HTML的语法检查
• DOM比较
• 截图比较

如何检查网页应用程序中网站的视觉外观？

我用Java实现了一个屏幕截图比较工具。屏幕截图由一个基于selenium的框架生成。我从逐像素的比较开始。实际上，我将截图分割成不同的部分(可能有10x10个矩形)，并比较相应部分的直方图。对于未来，我想自动确定相关的部分(感兴趣的地区)。也许有人有办法这么做。

Answer 1

测试网站外观最有效的工具仍然是人眼和大脑。

也就是说，如果您想要或需要自动化，图像比较可能是最不有效的方法，因为即使有模糊逻辑，它也会产生太多的假阳性。只需改变硬件(不同的监视器或视频卡--这会改变颜色饱和度、图像亮度等，在考虑屏幕分辨率变化之前)，屏幕截图图像比较就会失败。

如果我必须这样做，我会首先查看验证网站的眼睛，然后构建文件比较例程的CSS和HTML的基础上，使用保存的基线。这将避免不同浏览器之间不同呈现的问题(最初验证最好由眼睛来处理)，并且在进行更改时所需的工作量要少得多(对于每个图像，您需要定义感兴趣的区域、允许的差异以及允许的位置)。对于文件比较，您只需要一种识别和删除诸如时间戳之类的东西的方法，而时间戳总是会改变的--它不受基线文件更改的影响)。

有一些测试工具可以进行图像比较:我尝试过的那些工具并没有给我留下深刻的印象。他们也许能满足你的需要。

Answer 2

必须说，使用自动化方法从来没有成功过。最后，最终总是以现金的形式使用更多的专家资源，而不是更便宜的眼球资源。

我看到的最后一个项目的问题是环境和应用程序更改太快，无法从不变的重复测试中获益；尽管客户机认为系统不太稳定。

如果我有许多站点具有大量的静态显示，我可能会尝试一种具有高级自动化的混合方法来创建目标问题列表。但我不会把目光放得太高。

Answer 3

如前所述，阿普托尔斯眼正是这样做的。

没有更多的像素比较，直方图和阈值。Applitools拥有专有的算法，用于分析屏幕并确定屏幕截图是否与基线匹配。他们在这方面做得很好。如果您真的需要，您也可以设置一个“人工”级别进行比较，例如，您可以使用“布局”而不是“严格”来确保两个屏幕截图具有相似的结构，但不一定有相同的内容。

stephenb的答案中提到的非常酷的机器人框架实际上是在Applitools python上构建的，而且Applitools对于大多数流行的编程语言(Python、Ruby、C#.)也有自己的SDK。

您可以在web上查看您的测试结果，Applitools还提供了测试结果的自动维护，其他工具都没有提供这些维护。因此，例如，如果将某个区域标记为动态区域，Applitools将在测试的其他步骤，甚至在同一测试的其他基线(不同的形式因素)中，自动识别和标记该区域为动态区域。