加入直播会话:周四东部时间上午 11 点,Storybook 9 发布及问答
文档
Storybook Docs

视觉测试

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

Storybook 原生支持使用 Chromatic 进行跨浏览器视觉测试,Chromatic 是 Storybook 团队提供的一项云服务。启用视觉测试后,每个 story 都会自动转化为测试。这让你可以在 Storybook 中直接获得关于 UI bug 的即时反馈。

安装插件

通过安装 Storybook 维护者提供的官方插件 @chromatic-com/storybook,为你的项目添加视觉测试

npx storybook@latest add @chromatic-com/storybook

启用视觉测试

启动 Storybook 时,你将看到一个新的视觉测试插件面板,你可以在其中运行测试并查看结果。

Visual Tests addon enabled

已经在使用 Vitest 插件?在展开的测试小部件中,你现在会看到一个视觉测试部分

Expanded testing widget, showing the Visual tests section

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

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

登录后,你将看到你的 Chromatic 账户及关联的项目。你可以从列表中选择一个,或创建一个新项目。

Visual Tests addon project selection

现在你已经将项目与插件关联,可以点击“捕获 UI 变化”按钮来运行你的第一次视觉测试构建。

Visual test panel showing the Catch a UI change button

第一次构建将为你的 stories 创建基线快照,这些快照将在你再次运行视觉测试时用于比较。

运行视觉测试

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

在侧边栏展开的测试小部件中,点击视觉测试部分的运行按钮。

Test widget showing the Run visual tests button

或者,在视觉测试插件面板中,点击面板右上角的运行按钮。

Visual tests addon panel showing the Run visual tests button

无论哪种方法,都会将你的 stories 发送到云端进行快照拍摄并检测视觉变化。

审查更改

如果你的 stories 中存在视觉变化,它们将在侧边栏中被 🟡 突出显示。点击 story 并转到视觉测试插件面板,查看哪些像素发生了变化。

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

Visual test panel with diff

在插件中完成接受更改作为基线后,你就可以将代码推送到你的远程仓库了。这将把基线同步到云端,供任何拉取你分支的人使用。

Visual test panel with accepted baselines

使用 CI 自动化

该插件设计用于与 CI 协同工作。我们建议在开发期间使用该插件检查更改,并在准备合并时在 CI 中运行视觉测试。

你在插件中接受为基线的更改,将在 CI 中自动接受为基线,这样你就无需重复审查。

  1. 在你的 CI 工作流程中添加一个运行 Chromatic 的步骤。
  2. 配置你的 CI 以包含环境变量,用于向 Chromatic 进行身份验证(项目令牌)。

PR 检查

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

配置

该插件默认包含涵盖大多数用例的配置选项。你还可以通过 ./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
}

常见问题

视觉测试与快照测试有什么区别?

快照测试将每个 story 渲染的标记与已知基线进行比较。这意味着测试比较的是 HTML 数据块,而不是用户实际看到的内容。这反过来可能会导致误报增加,因为代码更改并不总是产生组件的视觉变化。

视觉测试将每个 story 渲染的像素与已知基线进行比较。由于你测试的是用户实际体验的内容,你的测试将更加丰富且易于维护。

更多测试资源