使用图像比较测试网络应用程序是一种好方法吗？

Question

我想知道业界是否使用基于比较屏幕截图图像来测试 Web 应用程序，这是否是一种好方法。

场景：
- 模型图片为手工拍摄
- 测试仅比较图像的选定部分
- 例如，测试是用硒编写的
- 测试始终使用相同的数据
- 测试总是 运行 在同一个屏幕上（相同的分辨率）
- 测试将在一些步骤后比较图像（例如：如果用户帐户页面在注册后看起来不错 - 我们总是有相同的数据进行测试）

这有什么好处吗？ 它是测试网络应用程序的 'stable' 方法吗？ 它可以作为（例如）硒测试的最后一步来验证结果吗？ 你怎么看？

我搜索了该主题，但找不到任何好的资源。

Answer 1

这种测试是有解决方案的，比如有Applitools

它基于拍摄基线屏幕截图，然后后续屏幕截图与原始图像进行比较。有4个不同的比较级别：

1. 精确 (MatchLevel.EXACT) - 像素到像素比较
2. 严格 (MatchLevel.STRICT) - 严格比较所有内容，包括每个元素的内容（文本）、字体、布局、颜色和位置，但知道忽略人类不可见的渲染更改
3. 内容 (MatchLevel.CONTENT) - 内容与 Strict 的工作方式类似，除了它会忽略颜色
4. Layout (MatchLevel.LAYOUT) - 比较基线和实际图像的布局（即结构）。它忽略页面之间的内容、颜色和其他样式变化。

一个很大的优势，在我看来，这种测试可以捕获意外 错误（视觉或其他方式）并一次性（您不需要编写多个断言，您只需比较屏幕截图）。您也可以使用更少的代码编写脚本。

可能的缺点是：您无法处理动态内容，有时无法截屏，并且由于有截屏，测试执行（使用 img 文件）可能会更长。

注意：我没有参与 Applitools，但他们有一个网站有很多 tutorial courses。