Applitools 的 5 个免费替代方案：视觉回归测试工具推荐

Applitools 是一款强大的视觉测试工具，但其基于 Test Units 且定价不公开的收费模式并不适合所有预算。好在市面上还有许多免费的替代方案，让你无需前期投入即可开启视觉测试之旅。

下面介绍 Applitools 的 5 个替代工具，各有优劣。

1. BackstopJS

这是什么

BackstopJS 是一款基于命令行的开源视觉回归测试工具。它会截取应用的屏幕截图，并进行逐像素比对以检测差异。

优势

完全免费：采用 MIT 许可证的开源项目
可自动化：轻松集成到 CI/CD 流水线中
灵活配置：支持通过 CSS 选择器定义精细的测试场景
多浏览器支持：底层使用 Puppeteer 或 Chromium
报告生成：输出可视化报告，突出显示差异部分

配置示例

以下是使用 BackstopJS 测试首页的配置示例：

{
  "id": "mon_site",
  "viewports": [
    { "label": "desktop", "width": 1280, "height": 720 },
    { "label": "mobile", "width": 375, "height": 667 }
  ],
  "scenarios": [
    {
      "label": "Page d'accueil",
      "url": "https://monsite.com",
      "referenceUrl": "https://monsite.com",
      "selectors": ["header", "main", "footer"],
      "delay": 500
    }
  ]
}

此配置会在桌面端和移动端分别截取 header、main 和 footer。delay 选项会在截图前等待 500 毫秒，适用于存在动画或异步加载的页面。

典型使用场景

BackstopJS 在以下几种场景下表现出色：

CSS 重构后的验证：在更新 CSS 框架（如 Tailwind、Bootstrap）后，运行 BackstopJS 可以验证布局未发生意外变化。
响应式设计测试：得益于可配置的视口，你可以验证网站在各种屏幕尺寸下的显示效果。
持续监控：结合 cron 任务或 webhook，BackstopJS 可以监控生产环境网站，并在检测到视觉变化时向你发出警报。

局限性

技术门槛：需要 JavaScript 和命令行技能
需安装：必须安装 Node.js 并配置环境
维护成本：网站演进时测试场景需要手动更新
无 AI 能力：仅进行逐像素比对，容易产生误报

何时使用

BackstopJS 适合具备技术能力、希望获得免费且可定制解决方案的开发团队。尤其适合需要完全掌控配置的项目。

2. Percy（开源版本）

这是什么

Percy 由 BrowserStack 开发，提供开源版的视觉测试工具。Percy 以服务的形式运行，能够自动化地捕获和比对屏幕截图。

优势

原生 CI/CD 集成：支持 GitHub Actions、CircleCI、Travis CI 等众多工具
团队协作界面：团队成员可以共同审阅视觉变更
分支管理：视觉变更与 pull request 相关联
多 SDK 支持：支持 Selenium、Cypress、Playwright、Puppeteer 及 Ruby Capybara

局限性

免费套餐有限：免费版仅适用于开源项目，或对每月截图数量有限制
云端依赖：截图存储在 Percy 的服务器上
技术配置：需要安装 SDK 并修改测试代码

GitHub Actions 集成示例

Percy 可以直接集成到你的 CI/CD 工作流中。以下是一个 GitHub Actions 配置示例：

name: Visual Testing
on: [push, pull_request]
jobs:
  percy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run test:visual
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

通过此配置，每次推送或创建 pull request 都会触发视觉测试。Percy 会将截图与基准线进行比对，并直接在 pull request 界面显示差异。

典型使用场景

Pull Request 审查：Percy 直接在 PR 中标记视觉变更，让审阅者能够直观看到代码的视觉影响。
设计系统：维护组件库的团队使用 Percy 验证组件更新不会破坏现有外观。
开源项目：面向开源项目的免费套餐，让贡献者可以直观地验证他们的贡献。

何时使用

Percy 适合开源项目，或已经在使用 BrowserStack 并希望将其无缝集成到开发流程中的团队。

3. Playwright Screenshots

这是什么

Playwright 是微软推出的浏览器自动化框架，原生提供屏幕截图和视觉对比功能。这是一个无需额外安装其他工具的集成式方案。

优势

已在你的技术栈中：若你已经使用 Playwright 进行功能测试，则截图功能完全免费
多浏览器支持：原生支持 Chromium、Firefox 和 WebKit
内置比对：expect(page).toHaveScreenshot() 方法会自动比对截图
免费开源：Playwright 采用 Apache 2.0 许可证

局限性

比对能力基础：没有 AI 加持，仅支持逐像素比对
需手动配置：每个需要验证的页面都要编写测试代码
灵敏度高：抗锯齿或字体渲染的细微差异会产生误报
无审查界面：没有协作式仪表盘来查看差异

Playwright 测试示例

const { test, expect } = require('@playwright/test');

test('Page d\'accueil - capture visuelle', async ({ page }) => {
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-desktop.png');
});

test('Page d\'accueil - version mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-mobile.png');
});

首次执行时会创建参考截图。后续执行会自动将新截图与基准线进行比对。如存在差异，Playwright 会生成对比报告。

典型使用场景

React/Vue/Angular 组件测试：除了整页之外，Playwright 还能捕获单个组件，非常适合设计系统。
多浏览器验证：同一个测试可以在 Chromium、Firefox 和 WebKit 上无修改地运行，确保跨浏览器视觉一致性。
动态状态测试：结合操作（点击、填写表单）和截图，你可以对界面的不同状态（空表单、错误状态、成功状态）进行视觉验证。

何时使用

如果你已经使用 Playwright，并希望在无需额外工具的情况下增加一层视觉验证，Playwright Screenshots 是理想选择。

4. LambdaTest（免费套餐）

这是什么

LambdaTest 是一个云端测试平台，除其他功能外还提供视觉测试。免费套餐可以让你体验平台的各项能力。

优势

生态完整：LambdaTest 不止视觉测试，还涵盖功能测试、无障碍测试及真机移动测试
多浏览器云平台：支持超过 3000 种浏览器/操作系统组合
集成丰富：CI/CD、测试管理工具、协作工具一应俱全
慷慨的免费套餐：在合理的限额下支持测试

局限性

免费套餐限制：每月的测试分钟数和截图数量有限
学习曲线：丰富的生态对新手来说可能令人望而却步
需要 SDK：自动化视觉测试仍需进行技术集成

典型使用场景

跨浏览器测试：如果你的应用需要在 Chrome、Firefox、Safari 和 Edge 上运行，LambdaTest 可以在无需本地基础设施的情况下，在这些平台上捕获截图。
无障碍测试：LambdaTest 在视觉测试之外还集成了无障碍（WCAG）检查，支持双重验证。
有安全合规要求的团队：LambdaTest 提供在安全环境中测试的功能，对有严格安全政策的企业非常有用。

何时使用

LambdaTest 适合希望拥有一体化平台、并愿意随着需求增长逐步升级到付费套餐的团队。

5. Delta-QA

这是什么

Delta-QA 是一款以"简单易用"为设计理念的视觉测试解决方案。与上述工具不同，Delta-QA 面向希望在零技术能力下开启视觉测试的团队。

优势

无需安装：不用 SDK、不用 Node.js、不用技术配置
无需技术技能：不必会写代码，也无需理解 CI/CD 流水线
界面直观：只需几次点击即可启动视觉测试
无需培训：没有学习曲线，也没有繁复的技术文档需要消化

局限性

方案较新：集成生态正在持续扩展
理念不同：Delta-QA 更注重简单性，而非深度技术定制

何时使用

如果你希望在不投入时间、培训或技术能力的前提下开启视觉测试，Delta-QA 是理想之选。这是一款为追求即时成效的团队打造的工具。

对比表

标准	BackstopJS	Percy (OSS)	Playwright	LambdaTest	Delta-QA
价格	免费	免费 (OSS)	免费	免费套餐	免费
是否需安装	是	是	是	是	否
技术技能要求	需要	需要	需要	需要	不需要
CI/CD 集成	是	是	是	是	是
协作界面	否	是	否	是	是

如何选择？

选择取决于你的具体情境：

你是开发者且希望完全掌控：选择 BackstopJS 或 Playwright
你在做开源项目：选择 Percy
你想要一站式平台：选择 LambdaTest
你想要零代码、零培训的简单方案：选择 Delta-QA

帮助你做出正确选择的几个问题

为了帮助你做出更精准的决定，不妨思考以下问题：

我的团队中是否有人会 JavaScript 或 Python？ 如果没有，请排除 BackstopJS、Playwright 和 Cypress Visual，转而考虑 Delta-QA 或 LambdaTest。
我的项目是开源的吗？ 如果是，Percy 和 Chromatic 为开源项目提供了专属的免费套餐。
我需要在真实移动设备和浏览器上进行测试吗？ 如果需要，LambdaTest 或 Percy（通过 BrowserStack）是最完整的选择。
我是否已经使用了某个测试框架？ 如果你使用 Playwright，直接添加 toHaveScreenshot()。如果使用 Cypress，可引入快照插件。如果使用 Storybook，Chromatic 是自然之选。
我的长期预算是多少？ 免费工具（BackstopJS、Playwright）需要维护时间成本。付费工具（Percy、Chromatic、LambdaTest）需要花钱但可减轻工作量。Delta-QA 介于两者之间：没有前期费用，也没有技术维护负担。
我是否需要向非技术人员汇报？ 如果你的主管或客户希望无需开发者即可看到视觉结果，那么协作式 Web 界面（Percy、LambdaTest、Delta-QA）就不可或缺。

为什么选择 Delta-QA？

在上述所有替代方案中，Delta-QA 以其极致简单的理念脱颖而出：

零安装：无 SDK、无依赖、无技术配置
零技能门槛：无需自动化测试培训，不必精通 TAU（Test Automation University），也不必掌握 JavaScript 或 Python
透明定价：无 Test Units、无复杂计算、无意外费用
即时上手：几分钟内即可启动第一次视觉测试，而非几天

如果你厌倦了视觉测试工具的复杂性，欢迎在 delta-qa.com 体验 Delta-QA，这是最简单的视觉测试替代方案。