视觉测试

视觉测试是测试组件最高效的方式。只需点击一下按钮，您就可以截取 Storybook 中每个故事的快照，并将这些快照与基线进行比较——即上次已知的“良好”快照。这不仅可以检查组件的外观，还可以检查大量的组件功能，而无需编写或维护任何测试代码！

Storybook 通过 Storybook 团队开发的云服务Chromatic原生支持跨浏览器视觉测试。启用视觉测试后，每个故事都会自动变成一个测试。这会直接在 Storybook 中为您提供 UI 错误的即时反馈。

安装插件

通过安装 Storybook 维护者开发的官方插件 @chromatic-com/storybook，为您的项目添加视觉测试

npx storybook@latest add @chromatic-com/storybook

启动 Storybook 后，您会看到一个新的“视觉测试”插件面板，您可以在其中运行测试并查看结果。

Visual Tests addon enabled

已经在使用 Vitest 插件？在展开的测试小组件中，您现在会看到一个“视觉测试”部分

点击底部的“运行测试”按钮将运行所有测试，包括组件测试和视觉测试。

首先，登录您的 Chromatic 账户。如果您没有账户，可以在登录过程中创建一个。

登录后，您将看到您的 Chromatic 账户及其项目。从列表中选择一个或创建一个新的。

Visual Tests addon project selection

现在您已将项目链接到插件，您可以按“捕获 UI 更改”按钮来运行您的第一个视觉测试构建。

Visual test panel showing the Catch a UI change button

第一次构建将为您的故事创建基线快照，在您再次运行视觉测试时将与这些快照进行比较。

在进行代码更改后，有两种方法可以在 Storybook 中运行视觉测试。

在侧边栏中展开的测试小组件中，按“视觉测试”部分中的运行按钮。

或者，在“视觉测试”插件面板中，按面板右上角的运行按钮。

Visual tests addon panel showing the Run visual tests button

任何一种方法都会将您的故事发送到云端以获取快照并检测视觉更改。

如果您的故事中存在视觉更改，它们将在侧边栏中以 🟡 突出显示。点击故事并转到“视觉测试”插件面板，以查看哪些像素发生了变化。

如果更改是故意的，请在本地 ✅ 接受它们作为基线。如果更改不是故意的，请修复故事并使用重新运行按钮重新运行测试。

Visual test panel with diff

当您在插件中完成将更改接受为基线后，就可以将代码推送到远程存储库。这将把基线同步到云端，供任何检出您分支的人使用。

Visual test panel with accepted baselines

该插件旨在与 CI 协同使用。我们建议在开发过程中使用该插件检查更改，然后在准备合并时在 CI 中运行视觉测试。

您在插件中接受为基线的更改将在 CI 中自动接受为基线，因此您无需重复审查。

成功在 CI 中设置 Chromatic 后，您的拉取/合并请求将带有“UI 测试”徽章。该徽章会通知您测试错误或需要您的团队验证的 UI 更改。在您的 Git 提供商中将该检查设置为必需项，以防止意外的 UI 错误被合并。

该插件默认包含涵盖大多数用例的配置选项。您还可以通过 ./chromatic.config.json 文件微调插件配置以匹配您项目的要求。以下是插件特定选项的简要列表以及如何使用它们的示例。查看完整的选项列表。

选项	描述
`projectId`	自动配置。设置项目标识符的值 `"projectId": "Project:64cbcde96f99841e8b007d75"`
`buildScriptName`	可选。定义自定义 Storybook 构建脚本 `"buildScriptName": "deploy-storybook"`
`debug`	可选。在控制台中输出详细的调试信息。 `"debug": true`
`zip`	可选。推荐用于大型项目。配置插件将您的 Storybook 作为 zip 文件部署到 Chromatic。 `"zip": true`

./chromatic.config.json

{
  "buildScriptName": "deploy-storybook",
  "debug": true,
  "projectId": "Project:64cbcde96f99841e8b007d75",
  "zip": true
}

快照测试将每个故事的渲染标记与已知的基线进行比较。这意味着测试比较的是 HTML 块，而不是用户实际看到的内容。这反过来又可能导致假阳性增加，因为代码更改并不总是会给组件带来视觉变化。

视觉测试将每个故事的渲染像素与已知的基线进行比较。因为您测试的是用户实际体验到的内容，所以您的测试将更丰富且易于维护。

更多测试资源