了解如何使用 Chromatic 和 Percy 实现强大的前端视觉测试。本指南为全球开发人员提供全面概述，涵盖设置、最佳实践和高级技术。
前端视觉测试：深入剖析 Chromatic 和 Percy 集成
在当今快节奏的 Web 开发格局中，确保跨各种浏览器、设备和屏幕尺寸的一致且视觉吸引力的用户界面 (UI) 至关重要。然而，手动 UI 测试耗时、容易出错，并且常常无法捕捉细微的视觉回归。这就是前端视觉测试发挥作用的地方，它提供了一种强大的解决方案来自动化 UI 检查并在整个开发生命周期中保持视觉完整性。本综合指南探讨了两个领先的视觉测试平台：Chromatic 和 Percy，详细介绍了它们的集成、优势以及面向全球开发人员的最佳实践。
理解前端视觉测试
前端视觉测试，也称为视觉回归测试或截图测试，通过将 UI 截图与基线进行比较来检测视觉变化，从而自动化该过程。它允许开发人员识别由代码修改、设计更新或浏览器更新引起的 UI 中意外的变化。这种方法显著降低了向用户发布在视觉上损坏或不一致的用户界面的风险，最终改善了用户体验。
视觉测试的好处
- 早期错误检测： 在生产之前，在开发周期的早期捕获视觉错误。
- 提高代码质量： 鼓励开发人员编写更干净、更易于维护的代码。
- 加快开发周期： 自动化测试过程，节省时间和资源。
- 增强用户体验： 确保跨所有平台的 UI 一致且视觉吸引人。
- 减少手动测试工作： 让 QA 团队能够专注于更复杂的测试场景。
- 增强对发布的信心： 提供更大的保证，确保 UI 按预期运行。
介绍 Chromatic 和 Percy
Chromatic 和 Percy 是领先的基于云的视觉测试平台，可简化视觉测试过程。这两个平台提供类似的功能，包括截图生成、视觉比较以及与流行的 CI/CD 流水线的集成。但是，它们也有独特的功能和优势。让我们深入了解每个平台。
Chromatic
Chromatic 由 Storybook 开发，与 Storybook 生态系统深度集成。Storybook 是一个用于隔离构建和记录 UI 组件的强大工具。Chromatic 通过提供视觉测试和审查功能扩展了 Storybook 的功能。它允许开发人员捕获组件在各种状态和配置下的截图，从而简化了测试 UI 组件的过程。然后，Chromatic 将这些截图与基线进行比较，突出显示任何视觉差异。
Chromatic 的主要功能：
- 紧密的 Storybook 集成： 与 Storybook 无缝集成，实现组件驱动的开发和测试。
- 自动截图生成： 自动生成不同状态下 UI 组件的截图。
- 视觉比较： 将截图与基线进行比较并突出显示视觉变化。
- 审查和协作： 提供用于审查和批准视觉更改的协作界面。
- CI/CD 集成： 与流行的 CI/CD 流水线集成，如 Jenkins、CircleCI 和 GitHub Actions。
- 可访问性测试： 提供基本的可访问性检查。
Percy
Percy 被 BrowserStack 收购，是一个支持各种测试框架和开发工作流程的多功能视觉测试平台。它允许开发人员捕获整个页面、特定组件甚至动态内容的截图。Percy 的复杂视觉比较算法可以检测到最细微的视觉差异。它为管理视觉回归和确保 UI 一致性提供了一个全面的平台。
Percy 的主要功能：
- 跨平台支持： 支持各种测试框架，包括 Jest、Cypress 和 Selenium。
- 截图生成： 捕获整个页面、特定组件和动态内容的截图。
- 视觉比较： 使用高级视觉比较算法比较截图。
- 协作和审查： 提供用于审查和批准视觉更改的协作界面。
- CI/CD 集成： 与流行的 CI/CD 流水线集成。
- 响应式设计测试： 支持跨不同屏幕尺寸和设备的响应式设计测试。
- 浏览器兼容性测试： 对各种浏览器和版本进行测试。
使用 Chromatic 设置视觉测试
让我们逐步介绍使用 Chromatic 设置视觉测试的过程，假设您已设置了 Storybook 项目。以下步骤提供了一个总体概述；请参阅官方 Chromatic 文档以获取最新说明。示例基于 React 和 Storybook 设置；类似的概念适用于其他框架。
先决条件
- 已设置包含组件的 Storybook 项目。
- Chromatic 帐户（免费或付费）。
- 已安装 Node.js 和 npm 或 yarn。
安装和配置
- 安装 Chromatic CLI：
npm install -g chromatic - 与 Chromatic 身份验证：
这将提示您登录到您的 Chromatic 帐户。然后它将设置所需的配置。
chromatic login - 运行 Chromatic：
Chromatic 将构建您的 Storybook 并将其上传到 Chromatic 平台。然后，它将捕获您组件的截图并将其与基线进行比较。
chromatic - 审查和批准更改： Chromatic 将提供指向 Chromatic 界面的链接，您可以在其中审查检测到的任何视觉更改。然后您可以批准或拒绝更改。
- 与 CI/CD 集成： 将 Chromatic 集成到您的 CI/CD 流水线（例如，GitHub Actions、GitLab CI）中，以便在每次拉取请求时进行自动测试。 步骤因您使用的 CI/CD 服务而异；有关详细说明，请参阅 Chromatic 文档。例如，使用 GitHub Actions，您可以在工作流文件中添加一个作业，在构建和单元测试通过后运行 Chromatic。
示例：将 Chromatic 与 GitHub Actions 集成
创建一个新的工作流文件（例如，.github/workflows/chromatic.yml），其中包含以下内容（将 CHROMATIC_PROJECT_TOKEN 替换为您的项目令牌）：
name: Chromatic
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
chromatic-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Publish to Chromatic
run: |
npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Use a secret to store the token
此工作流将在每次推送到 `main` 分支或从 `main` 分支拉取请求时触发 Chromatic。 请记住将 CHROMATIC_PROJECT_TOKEN 替换为存储在 GitHub secret 中的实际 Chromatic 项目令牌。
使用 Percy 设置视觉测试
使用 Percy 设置视觉测试涉及与 Chromatic 类似的步骤，但重点是与您现有的测试框架集成。 这是一个通用指南，具体说明取决于您的框架（例如，React with Jest、Vue with Cypress）。
先决条件
- Percy 帐户（免费或付费）。
- 测试框架（例如，Jest、Cypress、Selenium）。
- 已安装 Node.js 和 npm 或 yarn。
安装和配置
- 安装 Percy CLI：
npm install -D @percy/cli - 与 Percy 身份验证：
在 Percy 平台中创建 Percy 项目并获取项目的令牌。您将在 CI/CD 配置中将此令牌设置为环境变量（例如，
PERCY_TOKEN）。 - 将 Percy 与您的测试框架集成：
这涉及将 Percy 命令添加到您的测试脚本中。具体步骤取决于您的测试框架。例如，使用 Cypress，您将安装
@percy/cypress包，并添加一个用于拍摄 Percy 快照的命令。使用 Jest，您可能会直接使用 Percy API 或专用适配器。使用 Cypress 的示例（在您的 Cypress 测试中 - 例如，
cypress/integration/my_spec.js）：it('should render the homepage', () => { cy.visit('/'); cy.percySnapshot('Homepage'); });在上面的 Cypress 示例中，
cy.percySnapshot('Homepage')拍摄页面当前状态的截图并将其上传到 Percy。 - 配置 CI/CD 集成：
在您的 CI/CD 配置中，确保 Percy 在测试完成后运行。您通常会设置
PERCY_TOKEN环境变量，然后运行 Percy CLI 命令。使用 GitHub Actions 的示例（在您的工作流文件中）：
jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Run tests run: npm test # Replace with your test command - name: Percy Snapshot if: github.event_name == 'pull_request' # Only run Percy on pull requests run: | npx percy snapshot --token $PERCY_TOKEN env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} # Use a GitHub secret - 审查和批准更改：
Percy 将提供一个指向其平台的链接，您可以在其中审查视觉差异并批准或拒绝更改。
视觉测试的最佳实践
有效的视觉测试需要深思熟虑的方法。以下是一些最大化其优势的最佳实践：
1. 定义清晰的基线
建立一个定义明确的基线。这是您的 UI 的初始状态，所有后续截图都将与此进行比较。确保此基线准确反映您应用程序所需的视觉外观。定期审查和更新您的基线，以确保它们是最新的并反映持续的设计更改。
2. 关注关键 UI 元素
优先测试最关键的 UI 元素和用户流程。这包括经常使用、对用户体验有重大影响或易于更改的元素。不必测试每一像素；专注于对您的用户最重要的区域。
3. 在不同环境中进行测试
在各种环境中测试您的 UI，包括不同的浏览器（Chrome、Firefox、Safari、Edge 等）、设备（桌面、平板电脑、智能手机）和屏幕尺寸。这将有助于确保您的 UI 在所有平台上一致呈现。
4. 处理动态内容
如果您的 UI 包含动态内容（例如，从 API 获取的数据），您需要小心处理。考虑使用模拟 API 响应等技术来创建可预测的测试数据，或使用确定性数据集。确保您有策略在不同构建中一致地管理动态内容。
5. 解决不稳定的测试
不稳定的测试是指有时通过有时失败的测试。这些可能是挫败感的主要来源。识别并解决不稳定的测试的根本原因。这可能涉及调整测试配置、增加超时或提高测试数据的可靠性。如果测试始终未能通过，请花时间进行调试并解决问题。不要简单地忽略失败。
6. 与 CI/CD 集成
将视觉测试过程集成到您的 CI/CD 流水线中。这使您能够自动运行每次代码更改的视觉测试，确保在开发周期的早期捕获任何视觉回归。自动化是在节省时间和减少人为错误风险方面的关键。
7. 使用一致的测试环境
确保您的测试环境与生产环境尽可能一致。这包括使用相同的浏览器、操作系统和字体。一致的环境将提高视觉比较的准确性。
8. 记录您的测试策略
记录您的视觉测试策略，包括测试哪些组件、测试环境和预期结果。此文档将有助于确保您的测试过程随着时间的推移保持一致和可维护。这对于新团队成员的入职或对 UI 进行重大更改尤其重要。
9. 优先考虑可访问性
虽然 Chromatic 和 Percy 提供一定程度的可访问性检查，但优先考虑可访问性测试。将可访问性检查集成到您的视觉测试中，以确保所有用户都可以访问您的 UI。查看 WCAG 指南。
10. 定期审查和更新测试
随着您的 UI 不断发展，定期审查和更新您的视觉测试。这包括更新基线、为新功能添加新测试以及删除过时组件的测试。这确保您的测试继续提供价值。
选择合适的平台：Chromatic vs. Percy
Chromatic 和 Percy 之间的最佳选择取决于您的具体需求和项目设置：
考虑 Chromatic，如果您：
- 您已在使用 Storybook 进行组件驱动的开发。
- 您希望与 Storybook 的功能紧密集成。
- 您偏爱简化的设置和易用性，特别是如果您已设置 Storybook。
- 您想要内置的可访问性检查。
考虑 Percy，如果您：
- 您使用的测试框架不是 Storybook，例如 Jest、Cypress 或 Selenium。
- 您需要支持更广泛的测试场景。
- 您需要响应式设计测试或浏览器兼容性测试等高级功能。
- 您更喜欢一种不依赖于特定框架的解决方案。
Chromatic 和 Percy 都是视觉测试的绝佳选择。根据您现有的工具、项目需求和团队偏好评估这些平台。考虑从免费试用或免费套餐开始，以评估功能和能力。许多团队甚至为项目的不同部分同时使用这两个工具。
高级技术和集成
除了基础知识之外，视觉测试平台还提供高级技术，以满足更复杂的 UI 场景并与其他开发工具集成。
1. 测试动态内容：模拟 API
视觉测试中的最大挑战之一是管理动态内容。为了解决这个问题，请考虑模拟 API 响应以确保测试数据是可预测的。这将允许您捕获一致的截图，并防止由不断变化的数据引起的误报或漏报。利用 Mock Service Worker (MSW) 或 Jest 的模拟功能等工具来模拟 API 调用。
2. 测试交互式 UI 组件
要测试交互式 UI 组件（例如，下拉菜单、模态框），您通常需要模拟用户交互。这可能涉及使用您的测试框架以编程方式触发事件（例如，单击、悬停、键盘输入）。Cypress 等工具可以更直接地模拟用户行为。
3. 可访问性测试集成
将可访问性测试工具（例如，Axe、Lighthouse 或 Pa11y）集成到您的视觉测试中。Chrome 和 Percy 可以提供基本的可访问性检查；对于更高级的测试，请考虑在测试流水线中运行可访问性审计，并将这些结果与您的视觉测试结果集成。这样做将有助于确保所有用户都可以访问您的 UI。可访问性不仅在于使 UI 可访问，还在于为具有不同需求的用户确保包容性设计。
4. UI 组件库
视觉测试在使用 UI 组件库（例如，Material UI、Ant Design）时特别有用。为您的库中的每个组件创建视觉测试，以确保一致性并防止在更新库或将其集成到您的项目中时出现视觉回归。
5. 与设计系统集成
如果您正在使用设计系统，请将您的视觉测试链接到您的设计系统文档。这将使您能够快速识别您的 UI 与您的设计系统的规范之间是否存在任何视觉不一致。将 UI 组件与设计系统组件同步。这将有助于在您的产品中保持设计一致性。
可访问性注意事项
可访问性应作为您视觉测试策略的核心组成部分。虽然 Chromatic 和 Percy 提供了一些基本的可访问性检查，但您应该在测试过程中实施全面的可访问性审计。
1. 自动化可访问性测试工具
在您的 CI/CD 流水线中使用 Axe、Lighthouse 或 Pa11y 等自动化可访问性测试工具。这些工具会扫描您的 UI 是否存在可访问性违规，并提供有关发现问题的详细报告。
2. 手动可访问性测试
通过手动测试补充自动化测试。使用屏幕阅读器（例如，JAWS、NVDA、VoiceOver）、键盘导航和颜色对比度分析器进行手动检查，以识别自动化工具可能遗漏的任何问题。考虑聘请可访问性顾问进行全面审计。
3. 代码审查
将可访问性审查纳入您的代码审查流程。让开发人员互相审查代码中的可访问性问题。对您的团队进行可访问性最佳实践的教育，并鼓励他们在整个开发过程中注意可访问性。
结论：前端视觉测试的未来
对于现代 Web 开发而言，前端视觉测试不再是奢侈品，而是必需品。通过将 Chromatic 和 Percy 等平台集成到您的工作流程中，您可以显著提高 UI 的质量、一致性和可维护性。随着 UI 复杂性的增加以及对用户友好、响应迅速且可访问的 Web 应用程序的需求不断增长，视觉测试平台的使用预计将有所增长。随着 Web 的不断发展，视觉测试将在开发过程中变得更加关键。
通过遵循本指南中概述的最佳实践，并及时了解视觉测试的最新进展，您可以为全球用户构建更强大、更可靠、视觉上更具吸引力的用户体验。定期评估您的测试策略，了解新工具和技术，并适应前端开发格局不断变化的需求。持续改进对于在视觉测试中取得持续成功至关重要。