Ceph Dashboard 的视觉回归测试
今年夏天，我通过 Google 夏季编程活动 '21 (GSoC) 计划与 Ceph 基金会合作。
Google 夏季编程活动是一个全球性项目，旨在让更多的学生开发者参与到开源软件开发中。学生们在学校放假期间，与一个开源组织合作完成为期 10 周的编程项目。
在这篇博文中，我将分享我完成“Ceph Dashboard 的视觉回归测试”项目的历程。
经验 ¶
我的 GSoC 经历非常棒，从最初对如何浏览代码库一无所知，到最终成功完成我的项目。在此过程中，我学习了
- 测试驱动开发 (TDD)。
- 如何一起解决问题。
- 审查他人的代码。
- 高效的沟通。
- PR 礼仪。
- 在 Scrum 环境中工作。
我也非常感谢我的导师 Ernesto Puerta 和 Alfonso Martinez 以及整个 Ceph dashboard 团队的不断支持、审查、反馈等等。我在这段时间里学到的东西不仅使我成为一个更优秀的程序员，而且我获得的实际经验也无价。
项目 ¶
我所从事的项目是“Ceph Dashboard 的视觉回归测试”，所以视觉回归测试通过比较代码更改前后拍摄的屏幕截图，来检查任何代码更改执行后用户将看到什么。当我第一次在 GSoC 的项目列表中看到这个项目时，它立刻引起了我的注意，当时我从未听说过视觉测试，它只是看起来是一个非常有趣的想法。我深入研究了这个项目，它越来越好，其中包含许多有趣的课题，例如逐像素位图匹配、抗锯齿、浏览器偏移等，我对此始终保持着兴趣。在这篇博文中，我将引导您了解我的项目以及我在旅程中面临的挑战。
视觉回归测试 ¶
所以要理解什么是视觉回归测试，我们首先需要理解什么是回归测试。回归测试用于验证任何系统更改不会干扰现有功能和/或代码结构。回归测试是软件开发中几乎每个测试套件的一部分，原因有很多。开发人员更改或添加一段代码，并且无意中破坏了之前正常工作的某些功能是很常见的。视觉回归测试应用相同的逻辑，但将测试限制在软件的视觉方面。换句话说，它检查代码更改是否破坏了软件界面中的任何方面。视觉回归测试通过比较代码更改前后拍摄的屏幕截图来检查代码更改后用户将看到什么。这就是为什么视觉回归测试有时也称为视觉快照测试。
为什么需要视觉回归测试 ¶
在 ceph dashboard 中，我们已经设置并运行了整个测试金字塔，所以问题是为什么我们需要视觉测试？
- 视觉错误是渲染问题。而渲染验证不是功能测试工具所设计的要捕获的内容。功能测试衡量功能行为。
- 它有助于发现 CSS 错误，有时用户无法看到关键按钮，或者它们处于不可点击的位置。
- 此测试的另一个非常有用的功能是，它可以帮助在进行重大更改时做出明智的决策，例如
- 进行大规模重构。
- 升级框架或库，这可能会影响许多组件。
什么是视觉错误 ¶
视觉错误是与 Web 或移动应用程序的用户界面 (也称为 GUI) 相关的各种问题。虽然这些错误不会产生任何功能影响，但它们可能会破坏特定网站或应用程序的用户体验。
视觉错误的几个例子是
- 文本或按钮错位
- 图像或文本重叠
- 部分可见的元素
- 响应式布局问题。例如，在桌面浏览器上呈现的按钮可能无法在移动浏览器上呈现
在某些情况下，视觉错误会阻止最终用户访问应用程序的关键功能。在这种情况下，该错误需要报告为功能错误。
如前所述，任何视觉错误都可能破坏应用程序的用户体验。因此，这可能会对最终用户在线感知特定品牌的方式产生负面影响。
互联网上的一些视觉错误示例
Material-UI 网站上的按钮错位
在此图像中，视觉错误阻止用户访问应用程序的关键功能。这些类型的视觉错误很容易通过端到端测试未被检测到，因为它们主要检查元素的存在性
算法 ¶
视觉回归测试的通用算法如下所示
视觉回归测试流程图
选择合适的工具 ¶
我的项目的主要任务之一是选择最适合视觉回归测试的工具。为此，我提出了一套评估各种工具的标准，即
- 最小的手动工作量。
- 轻松集成 Cypress。
- 良好的开源支持。
- 忽略浏览器、平台和抗锯齿偏移。
- 支持响应式测试。
- 处理动态数据。
- 生成带有比较的报告。
- CI/CD 集成。
基准测试 ¶
我的流程的下一步是比较工具，将它们与标准进行匹配并进行基准测试。
| 标准 | Phantom CSS | Wraith | Cypress-image-snapshot | Percy | Applitools-Eyes | ||||
|---|---|---|---|---|---|---|---|---|---|
| 最小的手动工作量。 | 否 | 否 | 否 | 是 | 是 | ||||
| 轻松集成 Cypress。 | 否 | 否 | 是 | 是 | 是 | ||||
| 良好的开源支持。 | 是 | 是 | 是 | 是 | 是 | ||||
| 忽略区域。 | 否 | 是 | 是 | 是 | 是 | ||||
| 支持响应式测试。 | 否 | 否 | 否 | 是 | 是 | ||||
| 处理动态数据。 | 否 | 否 | 是 | 是 | 是 | ||||
| 生成报告。 | 否 | 否 | 是 | 是 | 是 | ||||
| CI/CD 集成。 | 否 | 否 | 否 | 是 | 是 |
位图比较 ¶
前三个工具的问题是它们使用了逐像素的**位图匹配**。在位图比较中，在测试运行的各个点捕获屏幕的位图，并将其像素与基线位图进行比较。在比较阶段，它们遍历每个像素对，然后检查颜色十六进制代码是否相同。如果颜色代码不同，则会引发视觉错误。虽然这些速度很快，但它们容易出现许多误报。
位图比较的工作原理
位图比较通常容易出现两种类型的误报
动态数据:
当您拥有会发生变化的动态内容时——您想检查以确保一切都以适当的对齐方式布局且没有重叠。像素比较工具在这里失败。
Ceph Dashboard 中的动态数据导致的误报
- 抗锯齿和浏览器偏移:
字体平滑算法、图像调整大小、显卡，甚至渲染算法都会产生像素差异。仅静态内容就是如此。实际内容可以在任何两个界面之间发生变化。因此，期望两个图像之间精确像素匹配的工具可能会充满像素差异。
浏览器特定渲染导致的误报
解决方案 ¶
而我们的救星是**用于视觉回归测试的 AI**。与逐像素比较不同，由 AI 驱动的自动化视觉测试工具不需要特殊的静态环境来确保准确性，因此即使在动态内容下也具有很高的准确性，因为比较基于关系而不是仅仅像素。
我进行基准测试的两个由 AI 驱动的视觉回归测试工具是
- Percy
- Applitools-Eyes
这两个工具都非常好，并且检查了所有正确的框，因此在两者之间做出决定并不容易。Applitools-Eyes 看起来功能更丰富，例如具有不同的匹配级别等，而 Percy 绝对具有更好的 UI 和出色的文档。最终，我选择了 Applitools-Eyes 用于 ceph dashboard，因为它具有一些功能，例如 RCA（根本原因分析），这对我来说太好了，我无法放弃。
目前，对于 ceph dashboard，我们使用的是 Applitools 的开源计划，该计划允许最多 10,000 个检查点屏幕截图。有关开源计划的更多详细信息，请访问 此处。
视觉测试不是什么 ¶
最后，让我们谈谈视觉测试不是什么
- 不验证逻辑或功能
- 不能替代功能测试
- 不是典型的完全自动化的测试套件。
链接 ¶
结论 ¶
能够在我的导师 Ernesto、Alfonso 和 dashboard 团队的始终如一的指导下，从事这样一个重要项目的夏天非常棒。我于 8 月 31 日在 Ceph Developer Monthly (CDM) 上展示并演示了这个项目。这是一个充满学习的夏天，我很高兴在 GSoC 之后继续为 Ceph 做出贡献。
您可以通过电子邮件与我联系：aaryanporwal2233@gmail.com。
感谢阅读 👋！