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