视觉回归测试(Visual Regression Testing):「一种自动化质量保证技术,通过比较应用程序两个版本之间用户界面的外观来识别非预期的视觉变化,无论是结构性的(布局)、风格性的(颜色、字体)还是功能性的(缺失或位移的元素)。」
在SaaS视觉测试领域,两个名字多年来主导着行业讨论:Applitools和Percy。如果你刚开始接触视觉回归测试,建议先阅读我们的视觉回归测试完整指南.一个押注人工智能和企业级市场,另一个则专注于CI/CD集成和BrowserStack生态系统。两者都承诺能检测到功能测试所遗漏的问题:视觉回归。
但该选哪个?正如工程领域中经常遇到的情况一样,答案是「取决于具体情况」。本文不会向你推销其中任何一个。它将以裁判般的客观视角剖析各自的优劣势——顺便说一句,还会介绍一个两大巨头都希望你忽略的第三选择。
Applitools:为企业级服务的AI
Applitools成立于2013年,带着一个大胆的理念:利用人工智能像人类一样理解用户界面。这不是简单的逐像素比较,而是一种能够区分真正bug和无关紧要变化的结构化分析。
Applitools的优势
Visual AI——核心差异化竞争力。 Applitools的旗舰技术,最初被称为「Visual AI」,后来进化为「Ultrafast Grid」,确实令人印象深刻。逐像素比较会将每个微小的渲染差异标记为潜在问题,而Applitools的Visual AI则能理解页面结构。它知道同一段文字的两种略微不同的渲染并非回归。它也知道一个颜色发生了变化的按钮,很可能就是一个问题。
在实践中,这意味着与传统的逐像素方法相比,误报率显著降低。对于被大量无关警报淹没的团队来说,这是一种范式转变。
Ultrafast Grid。 无需在每个浏览器/分辨率组合上本地运行测试,Applitools会捕获页面的DOM和CSS,然后在其云端grid上重建渲染。你只需在本地运行一次测试,Applitools就会在数十种组合中「重放」视觉效果。优雅且高效。
丰富的集成生态系统。 Applitools几乎与所有主流工具集成:Selenium、Cypress、Playwright、Puppeteer、Storybook、Appium等。提供超过70个SDK。无论你的技术栈是什么,很可能都有对应的Applitools SDK。
企业级功能。 团队管理、访问控制、高级报告、Jira/Slack集成、批量基准截图维护——Applitools满足大型组织对测试工具的所有预期。
Applitools的劣势
价格。 让我们来谈谈房间里的大象。Applitools不公开其定价,这对你的钱包来说很少是好兆头。市场反馈表明价格可能迅速攀升,尤其是对于需要高捕获量的团队。基于「检查点」的定价模式意味着测试越多,付费越多——这实际上产生了一种限制测试的逆向激励。如果这超出了你的预算,我们的Applitools 最佳替代方案指南可能对你有帮助。
复杂性。 Applitools功能的广度是一把双刃剑。对于一个只想「比较部署前后截图」的团队来说,学习曲线相当陡峭。不同的测试类型(经典模式、ultrafast模式、原生移动端)、匹配级别(严格、内容、布局)以及各种配置选项——掌握这个工具需要时间。
云依赖。 你的所有截图都要经过Applitools的服务器。对于某些行业——银行、医疗、国防——这是不可接受的红线。即使对其他行业来说,这也创造了一种依赖:如果服务不可用,你的视觉测试也就随之瘫痪。
必须编码。 尽管有AI加持,Applitools本质上仍是开发者工具。每个测试都必须用编程语言编写,通过SDK集成,并以代码形式维护。非技术背景的QA人员只能站在一旁观望。
Percy:BrowserStack的原生CI/CD工具
Percy于2020年被BrowserStack收购,定位截然不同。Applitools以 sophisticated AI瞄准企业级市场,而Percy则押注CI/CD管道集成的简便性。
Percy的优势
出色的CI/CD集成。 Percy在持续集成工作流中表现出色。每个pull request都能自动触发视觉捕获,结果直接显示在你的版本控制工具界面中(GitHub、GitLab、Bitbucket)。审查/批准的工作流对于习惯代码审查的团队来说非常自然。
BrowserStack的强大后盾。 自被收购以来,Percy受益于BrowserStack庞大的多浏览器渲染基础设施。捕获在真实浏览器上完成(而非模拟),确保了高渲染保真度。
相对简洁易用。 Percy比Applitools更容易上手。概念清晰:将SDK集成到你的测试中,Percy负责捕获和比较。仪表盘干净,结果清晰可读,批准/拒绝的工作流直观明了。
Storybook和组件支持。 Percy提供专门的Storybook集成,能自动捕获每个story。对于使用Storybook作为设计系统单一真相来源的团队来说,这是一个非常自然的采用路径。
慷慨的免费层。 Percy提供免费层,允许在做出承诺前先试用工具。它足以用于小项目或认真评估——Applitools在这方面则更为困难。
Percy的劣势
逐像素比较。 这是Percy技术上的阿喀琉斯之踵。与Applitools的Visual AI不同,Percy主要使用逐像素比较(尽管做了一些改进)。结果是:更多误报,尤其是在包含动态内容、动画或可变字体渲染的项目上。
Percy随着时间的推移改进了其算法,但与Applitools的AI方法之间的差距仍然明显。这有点像基础拼写检查器和语言模型之间的区别——两者都能发现明显错误,但一个理解上下文,另一个则不能。
免费层限制。 Percy的免费层虽然值得欢迎,但对月度捕获量有严格限制。一旦超出,定价就遵循典型的SaaS模式:逐级递增,攀升迅速。如果你在寻找 Percy 的替代方案,市场上已经出现了多个有竞争力的选择。
匹配灵活性不足。 与Applitools相比,Percy在调整比较灵敏度方面提供的配置选项较少。你减少误报的杠杆更少,这在复杂项目中可能会令人沮丧。
BrowserStack依赖。 和Applitools一样,Percy是云服务。你的数据发送到BrowserStack。你的测试能力取决于他们的可用性。而你的预算取决于他们的定价表——这在下次续约时可能会上调。
直接对比:7个关键标准
1. 比较技术
Applitools采用专有的AI方法来分析页面的视觉结构,而非单个像素。Percy使用改进的逐像素比较。在实践中,Applitools以更少的噪声检测回归。Percy更容易将非显著差异标记为问题。
优势:Applitools,毫无疑问。
2. CI/CD集成
两者都能集成到CI/CD管道中,但Percy是围绕这一工作流设计的。Percy的pull request体验——审查中直接显示视觉结果——比Applitools略胜一筹。
优势:Percy,略有领先。
3. 多浏览器渲染
Applitools通过Ultrafast Grid重建渲染(快但为重建)。Percy使用真实的BrowserStack浏览器(慢但更忠实)。两者都覆盖主流浏览器。
平局——速度与保真度的取舍,各有侧重。
4. 采纳难度
Percy对首次项目来说更简单。Applitools功能更强大但需要更多学习时间。两者都需要开发技能。
优势:起步选Percy,长期选Applitools。
5. 定价
两者在定价透明度方面都不突出。都按使用量收费(捕获/检查点),阶梯递增。Percy提供更易获得的免费层。Applitools总体被认为更贵,尤其是在大规模使用时。
优势:免费层Percy,超出后视情况而定。
6. 生态系统与集成
Applitools支持70多个SDK,几乎集成所有测试框架。Percy更为选择性,但覆盖主流(Cypress、Playwright、Selenium、Storybook)。Percy的Storybook集成尤其出色。
优势:广度Applitools,Storybook选Percy。
7. 数据隐私
两者都是云服务,在你的服务器上处理截图。Applitools为大账户提供私有托管选项(需额外付费)。Percy不提供此选项作为标准。
优势:企业选项Applitools,但两者默认都不是本地运行。
各适合谁?
选择Applitools,如果:
你是拥有专用测试预算的大型组织。你有数百个页面需要跨多种浏览器测试。你被逐像素方法的误报所淹没。如果你还在纠结视觉测试和功能测试的关系,我们的视觉测试 vs 功能测试文章可以帮你理清思路。你有专职开发人员维护测试。你能为高端工具证明重大投资的合理性。
选择Percy,如果:
你是拥有成熟CI/CD工作流的开发团队。你寻求自然的pull request集成。你使用Storybook管理组件。你想通过免费层快速起步。你已经在BrowserStack生态系统中。
选择……其他方案,如果:
你没有可用的开发人员来编写和维护测试。你不想将截图发送到第三方云端。你的预算不允许持续的SaaS费用。你在寻找整个团队都能使用的工具,而不仅仅是开发者。如何选择合适的视觉测试工具取决于你的优先级和约束条件。
第三条路:如果视觉测试不需要云端呢?
Applitools和Percy功不可没:它们普及了自动化视觉测试的概念。在它们之前,视觉回归检测要么是手动的(人工肉眼对比截图),要么根本不存在——正如我们在从手动测试到自动化测试指南中详细分析的那样。
但两者共享我们认为值得商榷的假设:
假设一:视觉测试必须在云端。 为什么?因为SaaS就是这样运作的,而SaaS是最赚钱的商业模式。但从技术角度看,图像比较完全可以在本地运行。你的截图不需要穿越互联网才能被比较。
假设二:视觉测试是代码测试的延伸。 两个工具都通过SDK集成到现有测试框架中。这对开发者来说是合理的,但事实上排除了所有不编程的人。QA分析师、设计师、产品负责人——那些对界面外观有专业见解的人——只能等待开发者向他们展示结果。
假设三:视觉测试的成本与使用量成正比。 测试越多,付费越多。这是经典的按量计费SaaS模式。但你对质量的承诺是否应该取决于你按截图付费的能力?这有点像烟雾探测器每次检查空气都收费——到某个时刻,你会想把它拔掉。
Delta-QA挑战这三个假设:
- 本地运行,而非云端:你的数据留在你手中。无传输、无外部依赖、无合规顾虑。
- 无代码,而非SDK:团队中的每个人都能创建和解读视觉测试。无需编码技能。
- 免费,而非按量计费:想测多少就测多少,无需盯着计数器。视觉质量不应该有价格上限。
Delta-QA不是来「杀死」Applitools或Percy的。这些工具有它们的位置,尤其是在希望与开发管道深度集成的组织中。但对于寻求更易获得、更自主、更经济的视觉测试方法的团队来说,现在有了第三条路。
常见问题
Applitools比Percy更适合视觉测试吗?
Applitools凭借Visual AI拥有更优越的比较技术,比逐像素方法产生更少的误报。Percy则提供更好的CI/CD集成和更易获得的免费层。「更好」取决于你的优先级:精度(Applitools)还是集成简便性(Percy)。
Applitools和Percy多少钱?
两者都不公布详细的价格表。都按使用量(捕获/检查点)计费,阶梯递增。Applitools总体被认为更贵,尤其是在大规模使用时。Percy的免费层在月度捕获量上有限制。获取精确价格需要联系他们的销售团队。
不编程能用Applitools或Percy吗?
不能。两个工具都需要通过SDK集成到现有测试框架中(Selenium、Cypress、Playwright等)。你需要编写代码来创建测试和维护场景。如需无代码的视觉测试方案,Delta-QA等替代品允许非技术人员创建和管理测试。
Percy能在BrowserStack生态之外工作吗?
可以,即使你不使用其他BrowserStack产品,Percy也能独立工作。不过,如果你已经在使用BrowserStack进行跨浏览器视觉测试,集成BrowserStack是一个优势。另外,如果你倾向于基于代码的方案,Playwright 和 Cypress 是两大主流框架——可参阅我们的Playwright vs Cypress 对比。BrowserStack的收购加强了Percy的多浏览器渲染能力。
有Applitools和Percy的免费替代品吗?
有。在开源领域,BackstopJS提供基础但可用的视觉测试功能。我们的免费视觉测试工具对比也梳理了其他免费选项。Playwright原生包含toHaveScreenshot()用于截图比较。如需无代码、本地、无捕获限制的解决方案,Delta-QA提供了一个免费的替代方案,无需任何开发技能。
我的数据在Applitools或Percy上安全吗?
两个服务都在其云服务器上处理你的截图。Applitools为大账户提供私有托管选项。Percy将数据存储在BrowserStack基础设施上。如果数据主权是绝对优先级,我们的本地部署视觉测试指南深入分析了这一主题——本地解决方案(如Delta-QA)通过将一切保留在你的基础设施上来消除这一问题。
延伸阅读
想要无SDK、无云端、无账单的视觉测试?