Visual Testing

软件质量保障:所寫即所思｜一个阿里质量人对测试的所感所悟。

视觉测试也称为视觉 UI 测试。用于验证开发的软件用户界面 (UI) 是否符合预期。视觉测试不仅要验证开发的网页设计正确地遵循 UI 元素的空间、大小、形状和位置，还要验证网页元素在各种设备和浏览器中正常工作。

视觉检测系统

视觉检测系统是一种基于计算机视觉技术的系统，用于自动化检测和识别图像或视频中的对象、事件、异常或其他感兴趣的目标。这些系统使用各种图像处理和机器学习技术，例如模式识别、特征提取、分类、聚类和检测等算法，来对图像或视频进行分析和处理。

视觉测试的步骤

• • 测试人员执行基准代码来测试 Web 应用程序的页面。

  • 将当前页面记录为快照A，作为页面基线，未来的测试将与之进行比较。

  • 测试人员执行测试代码，并记录运行代码的快照B。

  • 将快照B开始与基线快照A进行比较。

  • 在这些快照比对中发现不一致，则测试被视为执行失败。

  • 如果未发现快照B较A的任何变化，则此次变更是符合预期的。

一些视觉测试工具可以生成测试报告，包含快照A、B中的差异点。

• • 如果这些图像差异是由缺陷引起的，开发人员则需要修复它并进行回归测试。

  • 如果差异确实由于需求变更引起，则开发人员将基准更新为快照B。

为什么功能（UI）测试不能覆盖视觉测试？

UI测试本质上属于功能测试，主要关注用户界面的功能和用户交互，通过模拟用户在界面上的各种操作和输入，来验证软件是否符合功能要求和用户体验标准。

视觉错误是渲染问题，渲染验证不会被功能测试工具捕获。

例如：在创建网站时，提交按钮被放置在中心，但在整个过程之后，如果错误地将其移动到浏览器页面的右侧，那么功能测试可能不会发现提交按钮的位置放错了，因为它测试按钮功能是否正常工作。
在视觉测试实现的情况下，它将各种快照与基线快照进行比较，并会发现提交按钮被错误放置的缺陷。

视觉测试策略

下面是三种常见的视觉测试的策略：

1.单独开发视觉测试用例：测试同学为不同的视觉场景编写测试用例，这个方法将会耗费大量测试同学的工作时间。

2.在现有功能测试中插入视觉测试点：在这种方法中，用于验证应用程序功能的测试已经存在，只需要在这些测试用例中添加一些视觉测试点以验证页面。

3.将视觉测试组件嵌入到功能自动化测试框架:这种方法很容易实现，只需要单独开发组件代码。选择视觉验证工具：例如Applitools、Percy和Galen。

1. 将工具与测试框架集成：大多数视觉验证工具都提供与测试框架（例如Selenium、Cypress和TestCafe）的集成。
2. 维护和更新视觉测试用例。
3. 调试和修复问题：调试和修复在视觉验证测试期间发现的任何问题。
4. 分析测试结果：分析测试结果以识别视觉不一致性。
5. 执行视觉测试：将视觉测试作为常规测试用例套件的一部分执行。应在不同的浏览器和设备上运行视觉验证测试，以确保跨浏览器兼容性。
6. 编写视觉测试代码：编写代码以捕获视觉元素并将其与预期输出进行比较。大多数视觉测试工具提供API以捕获页面截图并将其与预期输出进行比较。
7. 定义视觉测试点：识别应验证的应用程序的视觉元素，可以包括文本、图像、按钮和布局元素。

    

视觉测试的类型

以下是两种类型的视觉测试：

1.手动测试：在手动测试中，测试人员将手动检查网页上的布局和用户界面元素。在这里，测试人员必须手动拍摄快照或页面截图，将这些快照与基线快照进行比较，以检测差异并向团队确认。

进行手动测试的另一种有效方法是使用组件资源管理器。在此，测试人员定义测试状态，使用资源管理器选择状态和组件，并在页面上进行检查。

手动测试步骤：

• • 浏览应用程序并捕获基线页面截图。

  • 从最新版本的应用程序中获取另一组页面截图。

  • 手动比较这些页面截图（基线与当前页面）以找出差异。

2. 自动化测试：自动化测试是一种自动验证用户界面在视觉上是否按预期显示的测试方法。自动化测试的好处是它们从长远角度降低了成本，并且比手动测试更快并且更准确，而且可重复使用测试用例。

• • 如果需要执行回归视觉测试以处理稳定 UI 发生的频繁更改，那么采用自动化将是一个不错的选择。自动化测试还有助于进行出色的视觉页面截图比较。

  • 自动页面截图比较在视觉测试中提供了很高的精确度并增加了投资回报率。

  • 自动截图比对可以捕获到人工比对无法发现到的错误，有助于进行复杂的端到端测试。

自动化视觉测试工具

1. Specter使用了开源的Puppeteer库作为底层引擎，并在其基础上提供了更加高级的功能，例如：

• • 允许用户通过指定CSS选择器或XPath表达式来检测页面上的元素；

  • 在多个屏幕分辨率和设备上进行测试，以确保Web应用程序在不同的屏幕和设备上呈现正确；

  • 支持与GitHub、Jenkins等工具的集成，方便将测试结果与开发团队分享和讨论。

2. Needle是一款基于Node.js的自动化视觉测试框架。

Needle的一些主要功能包括：

• • 支持多个浏览器和移动设备的测试，可以确保应用程序在不同的平台上呈现一致的外观；

  • 支持自定义的测试脚本，允许用户编写JavaScript代码来自动化测试过程；

  • 可以与不同的测试框架集成，例如Mocha、Jasmine和Cucumber，从而使得测试更加灵活和可扩展；

  • 支持基于CSS选择器和XPath表达式的元素选择，可以根据需要对特定的元素进行测试；

  • 支持基于图片比较的测试，可以对图片的相似度进行测试，以检测外观变化。

3. Gemini使用了Selenium WebDriver作为底层引擎，并提供了高级的功能，例如：

• • 支持并行测试，可以同时测试多个页面和元素，提高测试效率；

  • 使用了自适应比较算法，可以检测页面的像素级别的变化；

  • 支持与Jenkins、Travis CI等工具的集成，可以将测试结果自动化地发布到开发团队中；

  • 支持多种浏览器和操作系统的测试，可以确保应用程序在不同的平台上呈现一致的外观。

4. Pix-Diff是一款基于Node.js的自动化视觉测试框架。

Pix-Diff的一些主要功能包括：

• • 支持自定义的测试脚本，允许用户编写JavaScript代码来自动化测试过程；

  • 支持多种浏览器和操作系统的测试，可以确保应用程序在不同的平台上呈现一致的外观；

  • 可以与不同的测试框架集成，例如Mocha、Jasmine和Cucumber，从而使得测试更加灵活和可扩展；

  • 支持基于CSS选择器和XPath表达式的元素选择，可以根据需要对特定的元素进行测试；

  • 使用了像素比较算法，可以检测页面的像素级别的变化。

5. FBSnapshotTestcases是一款用于iOS应用程序的自动化视觉测试框架，它基于Xcode的XCTest框架，并使用了FBReferenceImage与FBScreenshotVerifycation两个核心组件来实现测试过程。

FBSnapshotTestcases的一些主要功能包括：

• • 支持与Xcode和XCTest集成，可以在Xcode中编写和运行测试用例；

  • 使用了FBReferenceImage与FBScreenshotVerifycation两个核心组件，可以捕捉和比较应用程序的屏幕截图；

  • 支持与Objective-C和Swift编写的应用程序集成；

  • 可以检测应用程序的像素级别的变化，并且可以忽略不重要的像素变化；

  • 支持基于屏幕坐标和视图层次结构的元素选择，可以根据需要对特定的元素进行测试。