基于截图的视觉测试(screenshot testing):一种视觉回归检测方法,通过捕获网页或组件的完整图像,然后逐像素与参考图像进行比较——超出可配置阈值的任何差异都会被标记为潜在回归。
Percy长期以来一直是提到自动化视觉测试时首先想到的名字。2020年被BrowserStack收购后,该工具确立了自己作为希望在测试管道中添加视觉比较层的团队的"显而易见"解决方案。很长一段时间里,它确实是最好的可用选择——更多是因为默认而非卓越,但仍然是最好的。
格局已经改变。如今每个团队应该问的问题不再是"如何将Percy集成到我的测试中?"而是"Percy的方法对我的需求是否仍然最为相关?"
Delta-QA对同一问题提出了截然不同的答案。没有截图,没有云端,没有SDK,没有按截图计费。一个确定性、本地化、无代码且免费的视觉比对引擎。让我们直接对比两者。
如果测试每一个页面都不会再让你的账单上涨呢? Delta-QA 在本地进行视觉测试,桌面版免费,无需注册,也不必集成任何 SDK。免费使用 Delta-QA →
Percy:将视觉测试作为现有测试的扩展
Percy的工作原理看似简单:在自动化测试的关键节点,触发截图捕获。截图被发送到BrowserStack的服务器,在那里逐像素与参考图像(baseline)进行比较。差异显示在Web仪表板中,团队可以批准或拒绝每个变更。
想法很优雅。执行则不那么优雅。
要使用Percy,你首先需要有自动化测试——Cypress、Playwright、Selenium、Puppeteer或众多支持的框架之一。然后安装与你的框架对应的Percy SDK。修改测试以在相关位置添加捕获调用。配置认证令牌以与Percy服务器通信。并祈祷你的CI管道具有足够稳定的网络连接,以便在每次运行时发送高分辨率截图。
如果你是熟悉测试工具的开发者,这一切在几小时内就能完成。如果你不是开发者——而负责视觉质量的人中有相当一部分不是——你就完全依赖他人来设置和维护你的视觉测试工具。
Delta-QA:将视觉测试作为独立活动
Delta-QA建立在相反的前提上:视觉测试不应该是功能测试的附属品。它是一项独立的活动,有自己的需求、自己的用户和自己的约束。
实际操作中,你为Delta-QA提供一个页面的两个版本(两个URL、两个环境或两个时间点),工具会比较它们之间的视觉差异。不会将截图发送到云端。Delta-QA的确定性引擎在真实浏览器中渲染两个页面并比较视觉结果,以人类感知为基准校准,只标记人眼会注意到的差异。
结果是一份清晰的重要差异报告:受影响的元素及其变化的属性。没有模糊的解释,没有"这个像素的颜色变化了一个不可察觉的色调"。可验证、可重现、可解释的事实。
所有这些都无需编写一行代码。如果你能使用Web浏览器,你就能使用Delta-QA。这句话不是营销口号——它就是界面的真实写照。
代码vs无代码:为什么这改变了一切
Percy和Delta-QA之间最根本的区别不是技术性的——而是组织性的。
Percy是开发者工具。它存在于代码中,通过npm或pip安装,在配置文件中配置,在CI/CD管道中运行。当你的测试人员是开发者时,这完全合理。当他们不是时,这就是一堵墙。
想想你的团队。谁关心产品的视觉质量?当然是开发者。但还有创建设计稿的设计师、验证用户旅程的产品负责人、定义验收标准的QA经理、管理内容页面的市场负责人。这些人都不应该需要编写代码来验证网站看起来是否正确。
Percy在结构上将他们排除在视觉测试流程之外。他们可以在仪表板中查看结果——批准或拒绝变更——但无法配置新测试、添加新页面进行监控或调整检测参数。他们是为他人设计的工具的被动消费者。
Delta-QA包含了他们。团队中的任何人都可以启动视觉比较、添加页面进行监控、配置灵敏度阈值并解读结果。视觉测试成为共同责任,而不是委派的技术任务。
按截图计费:惩罚严谨性的模式
Percy的定价模式值得特别关注,因为它创造了一种反向激励。
Percy按每月截图数量收费。计划从包含的截图配额开始,超出配额的每张截图都需额外付费。测试越多,付费越多。视觉覆盖越严谨,账单越高。
具体到2026年的数字:Percy提供一个相当慷慨的免费额度——每月5,000张截图,且不限制用户数量。但这里藏着一个容易被忽视的陷阱:每个视口(viewport)都会单独计为一张截图。如果你在10个页面上测试3种分辨率(桌面、平板、移动),每次运行就会消耗30张截图配额。按每天运行2次计算,你在2到3周内就会触及免费额度的上限。超出之后,Percy 采用按用量计费的付费套餐(价目表见 browserstack.com/percy),账单会随用量快速增长。
想一下这在实践中意味着什么。你有一个拥有500个产品页面的电商网站。你想在每次部署后视觉验证每个页面。这是每次部署500张截图。如果你每天部署,那就是每月15,000张截图。如果你在三种分辨率下测试(桌面、平板、移动),那就是每月45,000张截图——远远超过 5,000 张免费截图,因此会落在按用量计费的付费套餐上,成本随用量持续增长。
这种模式在测试覆盖和预算之间制造了不健康的紧张关系。团队最终会限制测试的页面、降低测试频率或在更少的分辨率下测试——不是因为这是正确的技术决策,而是因为预算要求如此。工具的定价模式在主动降低测试质量。
Delta-QA不收取任何费用。不按截图,不按页面,不按月。你可以随心所欲地测试任意数量的页面、任意频率、任意分辨率。测试覆盖的严谨性受限于你的雄心,而非钱包。
云端vs本地:你的数据主权
发送到Percy的每张截图都经过BrowserStack的服务器并存储在那里。对于大多数公开网站,这不是问题。但公开网站只是团队测试内容的一小部分。
你的后台管理系统呢?包含客户数据的内部仪表板呢?包含匿名化生产数据(或并不总是完美匿名化)的预发布环境呢?你的医疗门户、银行界面、人力资源管理系统呢?
将这些页面的截图发送到第三方服务器,即使是经SOC 2认证的可信第三方,也会引发某些组织无法忽视的问题。行业法规(GDPR、HIPAA、PCI-DSS)、内部安全政策以及数据保护常识对可以经过外部服务器的内容设定了限制。
Delta-QA消除了这个问题。工具在本地运行。你的页面在本地分析。结果留在本地。没有数据离开你的环境。这不是高级功能或企业部署选项——这是工具的基础架构。
对比你的界面不该让你付出一笔云端订阅费。 Delta-QA 在本地进行视觉测试,桌面版免费,无需注册,截图也只会留在你自己这里、不会存到别处。免费使用 Delta-QA →
结果稳定性:善变的像素vs稳定的结果
任何使用过基于截图的视觉测试工具的人都知道,误报是这种方法的祸根。Percy在智能比较算法、可配置灵敏度阈值和排除区域方面取得了重大进展。但根本问题依然存在:比较像素本质上是不稳定的。
字体渲染因操作系统而异。反锯齿因显卡而异。在略有不同时刻捕获的动画会产生不同的图像。动态内容(日期、计数器、广告)在捕获之间发生变化。从CDN加载的图像可能以不同顺序到达。出现或消失的滚动条会将所有元素偏移几个像素。
这些情况中的每一种都会在Percy中生成不是真正bug的"diff"。每个误报都消耗时间:有人必须查看diff,判断这不是真正的问题,然后批准它。乘以数百张截图和数十次部署,你就会得到数小时浪费在筛选误报上的工作。生活中有更令人兴奋的事情——几乎所有事情都是。
为缓解这一问题,Percy自2025年底起引入了由AI驱动的「视觉审查代理」(Visual Review Agent),能够过滤约40%由抗锯齿和字体渲染差异引起的误报。这确实是一项进步,但反过来说,仍有大约60%的噪音需要人工逐一甄别。AI减轻了负担,却没有从根源上消除它。
Delta-QA的确定性视觉比对引擎对这些问题免疫。它在真实浏览器中渲染两个页面并比较视觉结果,并以人类感知为基准校准——只标记人眼会注意到的差异:字体渲染可能变化,反锯齿可能不同,文本内容可能更新,但这些都不会被当作回归报告出来。在429个已验证的测试案例中,这套方法实现了零误报。Delta-QA不是在过滤噪音——它从一开始就不产生噪音。该引擎由 AI 在开发阶段持续打磨,产品本身不依赖 LLM。
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更复杂——它不是,也不自称是。而是因为它以更少的摩擦、更低的成本和更高的可访问性解决了视觉测试问题。在现实世界中,被采用的工具总是比令人印象深刻的工具更有用。
准备好测试时不必再数着截图了吗? 用 Delta-QA 启动你的第一次对比,免费且无需注册。免费使用 Delta-QA →
常见问题
Percy是免费的吗?
Percy提供免费计划,每月5,000张截图、不限用户数。但要注意每个视口都单独计为一张截图,所以多分辨率测试会让配额消耗得很快。超出免费额度后,Percy 采用按用量计费的付费套餐(价目表见 browserstack.com/percy),成本随截图量增长。对于具有重要测试覆盖的严肃专业使用,免费计划是不够的。Delta-QA免费且无容量限制。
可以不写代码使用Percy吗?
不可以。Percy需要将SDK集成到自动化测试框架中。即使是最简单的集成方案(Percy CLI配合URL)也需要使用终端和命令行指令。Delta-QA完全无代码——Web界面足以配置和运行视觉测试。
Delta-QA 的引擎能检测到与截图相同的bug吗?
它能检测到绝大多数视觉回归——颜色、大小、位置、字体、外边距等人眼会注意到的变化。它无法检测纯图形渲染问题(图像损坏、Web字体问题、浏览器特定的渲染bug),这些需要像素级视觉比较。对于大多数团队来说,这些回归占实践中遇到的视觉bug的90%以上。
Percy能处理需要认证的页面吗?
可以,但仅限于自动化测试的上下文中。你的测试脚本必须处理认证(登录、cookies、令牌),然后Percy捕获认证页面的截图。使用Delta-QA,访问认证页面是直接的,因为工具在你的本地环境中运行,你已经可以访问你的应用程序。
消除误报可以节省多少时间?
使用基于截图的视觉测试工具的团队经常报告,筛选误报占视觉测试时间的30%到60%。在每周有20次部署和数百张截图的典型一周中,这是数小时的人工时间用于批准不是bug的差异。Delta-QA 以人类感知为基准校准、只标记真实回归,大幅降低了这个比率。
Percy和Delta-QA可以共存吗?
当然可以。你可以在自动化测试中使用Percy进行关键组件的像素比较,同时使用Delta-QA进行所有页面的日常覆盖。两个工具独立运行,互不干扰。如果你想要两种方法的最佳组合,这甚至是一个明智的搭配。
Percy支持本地部署(on-premise)吗?
不支持。Percy仅提供云端服务,运行在BrowserStack的基础设施上,没有本地部署选项。Delta-QA则提供本地Desktop版本,以及面向企业服务器的On-Premise版本,让对数据存放位置有硬性要求的组织也能合规使用。
视觉测试应该是一张广泛部署的安全网,而不是为能够负担SDK和云订阅的团队保留的奢侈品工具。Percy开辟了道路。Delta-QA让每个人都能走上这条路。