此文章尚未发布,搜索引擎不可见。
Delta-QA vs Percy:结构化视觉测试还是云端截图?

Delta-QA vs Percy:结构化视觉测试还是云端截图?

Delta-QA vs Percy:结构化视觉测试还是云端截图?

基于截图的视觉测试(screenshot testing):一种视觉回归检测方法,通过捕获网页或组件的完整图像,然后逐像素与参考图像进行比较——超出可配置阈值的任何差异都会被标记为潜在回归。

Percy长期以来一直是提到自动化视觉测试时首先想到的名字。2020年被BrowserStack收购后,该工具确立了自己作为希望在测试管道中添加视觉比较层的团队的"显而易见"解决方案。很长一段时间里,它确实是最好的可用选择——更多是因为默认而非卓越,但仍然是最好的。

格局已经改变。如今每个团队应该问的问题不再是"如何将Percy集成到我的测试中?"而是"Percy的方法对我的需求是否仍然最为相关?"

Delta-QA对同一问题提出了截然不同的答案。没有截图,没有云端,没有SDK,没有按截图计费。一种结构化、本地化、无代码且免费的方法。让我们直接对比两者。

Percy:将视觉测试作为现有测试的扩展

Percy的工作原理看似简单:在自动化测试的关键节点,触发截图捕获。截图被发送到BrowserStack的服务器,在那里逐像素与参考图像(baseline)进行比较。差异显示在Web仪表板中,团队可以批准或拒绝每个变更。

想法很优雅。执行则不那么优雅。

要使用Percy,你首先需要有自动化测试——Cypress、Playwright、Selenium、Puppeteer或众多支持的框架之一。然后安装与你的框架对应的Percy SDK。修改测试以在相关位置添加捕获调用。配置认证令牌以与Percy服务器通信。并祈祷你的CI管道具有足够稳定的网络连接,以便在每次运行时发送高分辨率截图。

如果你是熟悉测试工具的开发者,这一切在几小时内就能完成。如果你不是开发者——而负责视觉质量的人中有相当一部分不是——你就完全依赖他人来设置和维护你的视觉测试工具。

Delta-QA:将视觉测试作为独立活动

Delta-QA建立在相反的前提上:视觉测试不应该是功能测试的附属品。它是一项独立的活动,有自己的需求、自己的用户和自己的约束。

实际操作中,你为Delta-QA提供一个页面的两个版本(两个URL、两个环境或两个时间点),工具会分析它们之间的结构差异。不会将截图发送到云端。不进行像素比较。Delta-QA检查DOM、计算的CSS属性和元素层次结构,以识别发生了什么变化。

结果是一份清晰的重要差异报告:添加、删除、修改、移动的元素,以及受影响的CSS属性。没有模糊的解释,没有"这个像素的颜色变化了一个不可察觉的色调"。结构性事实,可验证且可解释。

所有这些都无需编写一行代码。如果你能使用Web浏览器,你就能使用Delta-QA。这句话不是营销口号——它就是界面的真实写照。

代码vs无代码:为什么这改变了一切

Percy和Delta-QA之间最根本的区别不是技术性的——而是组织性的。

Percy是开发者工具。它存在于代码中,通过npm或pip安装,在配置文件中配置,在CI/CD管道中运行。当你的测试人员是开发者时,这完全合理。当他们不是时,这就是一堵墙。

想想你的团队。谁关心产品的视觉质量?当然是开发者。但还有创建设计稿的设计师、验证用户旅程的产品负责人、定义验收标准的QA经理、管理内容页面的市场负责人。这些人都不应该需要编写代码来验证网站看起来是否正确。

Percy在结构上将他们排除在视觉测试流程之外。他们可以在仪表板中查看结果——批准或拒绝变更——但无法配置新测试、添加新页面进行监控或调整检测参数。他们是为他人设计的工具的被动消费者。

Delta-QA包含了他们。团队中的任何人都可以启动视觉比较、添加页面进行监控、配置灵敏度阈值并解读结果。视觉测试成为共同责任,而不是委派的技术任务。

按截图计费:惩罚严谨性的模式

Percy的定价模式值得特别关注,因为它创造了一种反向激励。

Percy按每月截图数量收费。计划从包含的截图配额开始,超出配额的每张截图都需额外付费。测试越多,付费越多。视觉覆盖越严谨,账单越高。

想一下这在实践中意味着什么。你有一个拥有500个产品页面的电商网站。你想在每次部署后视觉验证每个页面。这是每次部署500张截图。如果你每天部署,那就是每月15,000张截图。如果你在三种分辨率下测试(桌面、平板、移动),那就是每月45,000张截图。覆盖这个量级的计划不会是400美元的那个。

这种模式在测试覆盖和预算之间制造了不健康的紧张关系。团队最终会限制测试的页面、降低测试频率或在更少的分辨率下测试——不是因为这是正确的技术决策,而是因为预算要求如此。工具的定价模式在主动降低测试质量。

Delta-QA不收取任何费用。不按截图,不按页面,不按月。你可以随心所欲地测试任意数量的页面、任意频率、任意分辨率。测试覆盖的严谨性受限于你的雄心,而非钱包。

云端vs本地:你的数据主权

发送到Percy的每张截图都经过BrowserStack的服务器并存储在那里。对于大多数公开网站,这不是问题。但公开网站只是团队测试内容的一小部分。

你的后台管理系统呢?包含客户数据的内部仪表板呢?包含匿名化生产数据(或并不总是完美匿名化)的预发布环境呢?你的医疗门户、银行界面、人力资源管理系统呢?

将这些页面的截图发送到第三方服务器,即使是经SOC 2认证的可信第三方,也会引发某些组织无法忽视的问题。行业法规(GDPR、HIPAA、PCI-DSS)、内部安全政策以及数据保护常识对可以经过外部服务器的内容设定了限制。

Delta-QA消除了这个问题。工具在本地运行。你的页面在本地分析。结果留在本地。没有数据离开你的环境。这不是高级功能或企业部署选项——这是工具的基础架构。

结果稳定性:善变的像素vs可靠的结构

任何使用过基于截图的视觉测试工具的人都知道,误报是这种方法的祸根。Percy在智能比较算法、可配置灵敏度阈值和排除区域方面取得了重大进展。但根本问题依然存在:比较像素本质上是不稳定的。

字体渲染因操作系统而异。反锯齿因显卡而异。在略有不同时刻捕获的动画会产生不同的图像。动态内容(日期、计数器、广告)在捕获之间发生变化。从CDN加载的图像可能以不同顺序到达。出现或消失的滚动条会将所有元素偏移几个像素。

这些情况中的每一种都会在Percy中生成不是真正bug的"diff"。每个误报都消耗时间:有人必须查看diff,判断这不是真正的问题,然后批准它。乘以数百张截图和数十次部署,你就会得到数小时浪费在筛选误报上的工作。生活中有更令人兴奋的事情——几乎所有事情都是。

Delta-QA的结构化方法对这些问题免疫。字体渲染可能变化——CSS结构保持不变。反锯齿可能不同——计算的CSS属性不会改变。文本内容可能更新——DOM层次结构和样式保持稳定。结构化方法的误报率只是截图方法的一小部分。

CI/CD集成:两种方法,同一目标

Percy通过其SDK集成到CI/CD管道中。这是一个成熟的集成,与主要CI系统(GitHub Actions、GitLab CI、Jenkins、CircleCI)配合良好。但它增加了网络依赖:如果Percy的服务器慢或不可用,你的管道会受到影响。

Delta-QA也集成到CI/CD管道中,但不需要SDK或外部依赖。工具在你的CI runner上本地运行。没有网络延迟,第三方服务宕机也不会超时。你的管道只依赖于你自己的基础设施。

何时Percy仍然是正确的选择

Percy在某些特定场景下是好工具。

你希望视觉测试作为现有功能测试的补充。 如果你已经有一套健壮的Cypress或Playwright测试套件,在该套件中添加Percy是阻力最小的路径。你在测试的关键时刻添加捕获,视觉覆盖立即运行。

你需要跨浏览器视觉测试。 Percy可以通过BrowserStack的基础设施在不同的浏览器/分辨率组合上捕获截图。如果同时验证Chrome、Firefox、Safari和Edge上的视觉渲染是一个要求,Percy提供这种能力。

你的团队完全由开发者组成。 如果唯一进行视觉测试的人是熟悉SDK和CI/CD管道的开发者,Percy的入门门槛可以忽略不计。

何时Delta-QA是更好的选择

视觉测试本身就是需求,而非功能测试的扩展。 如果你想要独立于自动化测试的视觉测试——或者你根本没有自动化测试——Delta-QA是自给自足的。

非开发者需要参与视觉测试。 QA、设计师、产品负责人、市场——如果这些角色需要能够启动和解读视觉测试而无需通过开发者,Delta-QA是唯一现实的选择。

预算有限或你拒绝按量计费。 如果你不希望测试覆盖由截图预算决定,Delta-QA的免费模式消除了这一限制。

数据保密性不可妥协。 如果你的页面包含敏感数据或安全政策禁止将截图发送到第三方服务器,Delta-QA的本地方法是唯一合规的选项。

你厌倦了误报。 如果你已经尝试过基于截图的视觉测试,而筛选误报让你放弃了,Delta-QA的结构化方法将让你与视觉测试和解。

不加修饰的结论

Percy是一款成熟的工具,与BrowserStack生态系统良好集成,对于想要在自动化测试中添加视觉层的开发团队来说是有效的。它是其特定用例的好工具。

但这个用例比Percy的市场营销所暗示的更为狭窄。大多数团队不需要SDK、云服务和按截图计费来检测视觉回归。他们需要一个简单、快速、人人可用的工具,不会因为测试严谨性而惩罚性地增加账单。

Delta-QA就是这样的工具。不是因为它比Percy更复杂——它不是,也不自称是。而是因为它以更少的摩擦、更低的成本和更高的可访问性解决了视觉测试问题。在现实世界中,被采用的工具总是比令人印象深刻的工具更有用。

常见问题

Percy是免费的吗?

Percy提供免费计划,每月限制一定数量的截图(阈值随时间变化)。之后,付费计划从每月数百美元起,根据截图量递增。对于具有重要测试覆盖的严肃专业使用,免费计划是不够的。Delta-QA免费且无容量限制。

可以不写代码使用Percy吗?

不可以。Percy需要将SDK集成到自动化测试框架中。即使是最简单的集成方案(Percy CLI配合URL)也需要使用终端和命令行指令。Delta-QA完全无代码——Web界面足以配置和运行视觉测试。

结构化方法能检测到与截图相同的bug吗?

它能检测到绝大多数视觉回归——那些由CSS变更、HTML结构变更或布局变更引起的。它无法检测纯图形渲染问题(图像损坏、Web字体问题、浏览器特定的渲染bug),这些需要像素级视觉比较。对于大多数团队来说,结构性回归占实践中遇到的视觉bug的90%以上。

Percy能处理需要认证的页面吗?

可以,但仅限于自动化测试的上下文中。你的测试脚本必须处理认证(登录、cookies、令牌),然后Percy捕获认证页面的截图。使用Delta-QA,访问认证页面是直接的,因为工具在你的本地环境中运行,你已经可以访问你的应用程序。

消除误报可以节省多少时间?

使用基于截图的视觉测试工具的团队经常报告,筛选误报占视觉测试时间的30%到60%。在每周有20次部署和数百张截图的典型一周中,这是数小时的人工时间用于批准不是bug的差异。Delta-QA的结构化方法大幅降低了这个比率。

Percy和Delta-QA可以共存吗?

当然可以。你可以在自动化测试中使用Percy进行关键组件的像素比较,同时使用Delta-QA进行所有页面的日常覆盖。两个工具独立运行,互不干扰。如果你想要两种方法的最佳组合,这甚至是一个明智的搭配。


视觉测试应该是一张广泛部署的安全网,而不是为能够负担SDK和云订阅的团队保留的奢侈品工具。Percy开辟了道路。Delta-QA让每个人都能走上这条路。

免费试用 Delta-QA →