Cypress 视觉测试：为 Cypress 添加视觉测试的完整指南
视觉测试（或 visual testing）是一种自动化验证方法，通过将网页界面的截图与参考图像进行对比，检测任何图形回归问题——按钮错位、字体改变、元素重叠等。
Cypress 是一款出色的工具。我们喜欢它的速度、直观的 API 和庞大的社区。但让我们开门见山：Cypress 原生不支持视觉测试。不同于Playwright 直接内置了 toHaveScreenshot()，Cypress 迫使你依赖第三方插件来获得最基本的截图对比功能。
这个问题比看起来要严重得多。
本指南回顾了为 Cypress 添加视觉测试的现有方案、它们的真实局限性，以及为什么一种截然不同的方法值得你关注。
为什么 Cypress 没有内置视觉测试
这是一个没有被充分提出的问题。Playwright 做到了。为什么 Cypress 没有？
官方回答很外交：Cypress 专注于功能测试。诚实的回答更加微妙。视觉测试是一个复杂的问题——基线管理、渲染差异容忍度、抗锯齿、动画——Cypress 选择将此交给插件生态系统处理。
结果呢？碎片化。每个插件各行其是，有各自的约定、各自的 bug、各自的被弃用风险。你选择的不是一个官方支持的解决方案。你押注的是一个由少数贡献者维护的开源项目——或者一个付费云服务。
对于在 Cypress 上构建了整个测试套件的团队来说，这是一个真实的困境。仅为视觉测试而迁移到 Playwright 不现实。添加一个脆弱的插件也不是办法。让我们看看有什么可用的。
方案 1：cypress-image-snapshot
生态系统中最知名的插件。它依赖 jest-image-snapshot（底层基于 pixelmatch）进行逐像素的截图对比。
工作原理
安装需要对 Cypress 配置进行一些调整——没有什么不可克服的，但需要修改足够多的文件，错误很容易溜进来。如果你想要确切的命令，让你最喜欢的 AI 助手来生成配置吧——它很擅长这个，也能让它在两首关于机器学习的俳句之间不至于无聊。
配置完成后，原理很简单：你在测试中添加一个自定义命令来捕获屏幕并与存储在仓库中的参考图像进行对比。第一次运行创建基线。后续运行检测差异。
没人告诉你的局限性
维护问题。 这个插件经历过长时间的停滞期。当你读到这些文字时，检查一下 GitHub 上最后一次提交的日期。如果超过六个月，你该问自己几个问题了。
误报。 逐像素对比是残酷的。你的本地机器和 CI 之间字体渲染略有不同？误报。抗锯齿因 GPU 而异？误报。你花在校准容忍阈值上的时间比写测试还多。
没有审查界面。 当测试失败时，你得到的是一个文件夹中的 diff 图像。没有仪表板，没有审批工作流。你在文件管理器中打开图像，眯着眼睛寻找差异。这是手工作坊式的。
Git 中的基线管理。 仓库中数百张 PNG 图片。二进制文件的合并冲突是噩梦。Git 历史膨胀。有些团队最终使用 Git LFS，又增加了一层复杂性。
方案 2：Percy（BrowserStack）
Percy 是一个云端视觉测试服务，通过 SDK 与 Cypress 集成。方法根本不同：Percy 不在本地对比，而是将 DOM 和资源发送到其服务器，在真实浏览器中渲染页面，并在网页仪表板中对比结果。
工作原理
你安装 Percy 的 Cypress SDK，在测试中添加一个调用来捕获快照，Percy 在云端完成其余工作。审查工作流在 Percy 的网页界面中进行：你查看差异，批准或拒绝。
对于精确的配置，你的桌面 AI 可以在三秒内给出代码片段——这是它的高光时刻，让它发挥吧，而不是从六个月后就会过时的文档中复制粘贴。
局限性
成本。 Percy 是付费服务。免费计划存在，但每月快照数量有限。对于认真测试的团队，成本上升很快。我们不在这里详述价格——它们定期变化——但预计这是一笔不小的预算项目。
云依赖。 你的快照在 Percy 的服务器上渲染。如果服务宕机，你的测试就会失败。如果 BrowserStack（收购了 Percy）决定更改定价或条款，你毫无谈判筹码。
CI 延迟。 将 DOM 发送到外部服务、等待渲染、获取结果——这会增加流水线的时间。十个测试不明显，但五百个时你会感受到。
供应商锁定。 一旦所有基线都在 Percy 中，迁移到其他地方意味着从头重建一切。这是专有云服务的经典陷阱。
方案 3：Happo
Happo 是 Percy 的一个不太知名的替代品，定位相似：一个捕获和对比组件截图的云服务。
与 Cypress 的集成存在，但不如 Percy 成熟。产品扎实，团队认真，但用户基础较小。社区文档更少，Stack Overflow 上的回答更少，经验分享更少。
相同的成本和云依赖问题同样适用。
方案 4：Applitools Eyes
Applitools 用其基于 AI 的对比技术（他们的"Visual AI"）将概念推向更远。不是逐像素对比，算法试图检测"视觉上有意义的"差异，同时忽略细微的渲染变化。
纸面上很吸引人。实际上，产品强大但复杂。配置不简单，定价不透明，对专有服务的依赖是完全的。如需详细分析，请查看我们的 Applitools 评测。
根本问题：视觉测试作为附加组件
所有这些方案都有一个结构性缺陷：它们将视觉测试视为功能测试的附加品。
你有 Cypress 测试套件。你嫁接一个插件或 SDK。你在现有测试中添加调用。视觉测试变成了功能测试的寄生虫——依赖相同的基础设施、相同的选择器、相同的代码。
当 Cypress 发布主要版本更新时，你的视觉测试插件就崩了。当功能测试改变路径时，你的视觉基线就过时了。当开发人员修改选择器时，功能测试和视觉测试都会失败。
这是一个设计上就脆弱的模型。
视觉测试应该是一等公民，而不是功能套件中的偷渡者。它回答的是一个不同的问题（"看起来对吗？" vs "能用吗？"），应该有自己的工具、自己的工作流、自己的基线。
你的 Cypress 测试看不到什么
Cypress 测试验证按钮存在并触发正确的操作。它不验证按钮是否可见、是否正确对齐、颜色是否正确、内边距是否合适、在所有断点上是否正常。
视觉 bug 之所以狡猾，是因为它们通过了所有功能测试。表单完美运行——但标签在手机上与输入框重叠。下拉菜单正确打开——但出现在另一个元素后面。显示的价格正确——但货币符号在白色背景上显示为白色。
这些 bug 到达生产环境，因为没有人系统地寻找它们。而它们代价高昂：在信誉、转化率、支持工单方面。要了解视觉测试实际检测到什么，具体示例往往比理论更有说服力。
替代方案：将视觉测试与代码分离
如果视觉测试根本不需要 Cypress 呢？
这是我们在 Delta-QA 坚持的立场，我们完全承认这一点。视觉测试不需要代码。不需要插件。不需要 CSS 选择器或 webpack 配置。
Delta-QA 的工作方式不同。你浏览网站，通过点击录制路径，工具捕获参考截图。每次后续运行时，它会对比并在专用界面中展示差异。无需代码。无需插件。不依赖 Cypress、Playwright 或任何其他工具。
这不是妥协。这是一种不同的理念。功能测试和视觉测试是两个不同的学科，各自都值得拥有自己的工具。你的 Cypress 套件继续验证一切是否正常工作。Delta-QA 验证一切是否看起来正确。两者互补而不冲突。
对于不编程的 QA 团队，这是一种解放。对于开发人员，这是节省时间。对于所有人，这意味着更少的误报和有意义的审查工作流。了解为什么无代码视觉测试正在改变游戏规则。
常见问题
Cypress 能否在不使用插件的情况下进行视觉测试？
不能。Cypress 可以用 cy.screenshot() 截图，但不提供任何原生对比机制。你得到的是图像，但与基线的对比、容忍阈值管理和审批工作流必须通过插件或外部服务添加。
Cypress 最好的视觉测试插件是什么？
没有通用答案。cypress-image-snapshot 是最流行的开源选项，但存在维护问题和误报问题。Percy 提供最佳用户体验，但是付费服务。"最好"取决于你的预算、对误报的容忍度以及维护额外代码的意愿。
Percy 与 Cypress 配合使用是免费的吗？
Percy 提供有限月度快照数量的免费计划。对于严肃的专业使用，你需要付费计划。价格定期变化，请查看他们的网站了解当前条款。
可以在 CI/CD 中进行 Cypress 视觉测试吗？
可以，所有描述的方案都在 CI/CD 中有效。但正是在这里问题成倍增加：环境之间的渲染差异、基线管理、执行时间。CI 放大了你视觉测试配置中的每一个脆弱点。
为什么不直接用 Playwright 做视觉测试？
如果你开始一个新项目，Playwright 及其原生 toHaveScreenshot() 确实是基于代码的视觉测试的更好选择。但如果你已经有一个相当规模的 Cypress 套件，迁移不现实。而且即使使用 Playwright，你仍然处于基于代码的视觉测试范式中，有其维护和可访问性限制。
Delta-QA 能替代 Cypress 测试吗？
不能，这也不是目标。Cypress 在功能测试方面表现出色：验证交互是否正常、API 是否正确响应、业务逻辑是否被遵守。Delta-QA 专注于视觉测试：验证界面看起来是否正确。两个工具是互补的，而非竞争的。
在 Cypress 中配置视觉测试需要多长时间？
使用 cypress-image-snapshot，预计一到两个小时用于安装和基本配置，然后几天时间来校准容忍阈值并稳定测试以应对误报。使用 Percy，技术配置更快，但组织设置（快照管理、审查工作流、CI 集成）需要时间。使用 Delta-QA，第一个视觉测试几分钟内就能运行。
结论
Cypress 是一款出色的功能测试工具。我们使用它，也推荐它擅长的部分。但假装它能令人满意地处理视觉测试，那是自欺欺人。
插件存在。它们或多或少能用。但它们脆弱，有些维护不善，有些昂贵，而且都在不需要的地方增加了复杂性。
视觉测试值得比插件更好的待遇。它值得一个专门的工具，为这个特定问题而设计，对整个团队——开发人员和非技术 QA 人员——都可访问。