视觉测试
视觉测试是测试组件最高效的方法。只需点击一个按钮，你就可以截取 Storybook 中每个 story 的快照，并将这些快照与基线（即上次已知的“良好”快照）进行比较。这不仅可以检查组件的外观，还可以检查组件功能的很大一部分，而无需编写或维护任何测试代码！
Storybook 原生支持使用 Chromatic 进行跨浏览器视觉测试，Chromatic 是 Storybook 团队提供的一项云服务。启用视觉测试后，每个 story 都会自动转化为测试。这让你可以在 Storybook 中直接获得关于 UI bug 的即时反馈。
安装插件
通过安装 Storybook 维护者提供的官方插件 @chromatic-com/storybook，为你的项目添加视觉测试
npx storybook@latest add @chromatic-com/storybook启用视觉测试
启动 Storybook 时，你将看到一个新的视觉测试插件面板，你可以在其中运行测试并查看结果。
首先，登录你的 Chromatic 账户。如果你没有账户，可以在登录过程中创建一个。
登录后，你将看到你的 Chromatic 账户及关联的项目。你可以从列表中选择一个，或创建一个新项目。
现在你已经将项目与插件关联，可以点击“捕获 UI 变化”按钮来运行你的第一次视觉测试构建。
第一次构建将为你的 stories 创建基线快照，这些快照将在你再次运行视觉测试时用于比较。
运行视觉测试
在你进行代码更改后，有两种方法可以在 Storybook 中运行视觉测试。
在侧边栏展开的测试小部件中，点击视觉测试部分的运行按钮。
或者，在视觉测试插件面板中，点击面板右上角的运行按钮。
无论哪种方法，都会将你的 stories 发送到云端进行快照拍摄并检测视觉变化。
审查更改
如果你的 stories 中存在视觉变化，它们将在侧边栏中被 🟡 突出显示。点击 story 并转到视觉测试插件面板，查看哪些像素发生了变化。
如果更改是预期的，请 ✅ 在本地接受它们作为基线。如果更改不是预期的，请修复 story 并使用重新运行按钮重新运行测试。
在插件中完成接受更改作为基线后，你就可以将代码推送到你的远程仓库了。这将把基线同步到云端，供任何拉取你分支的人使用。
使用 CI 自动化
该插件设计用于与 CI 协同工作。我们建议在开发期间使用该插件检查更改，并在准备合并时在 CI 中运行视觉测试。
你在插件中接受为基线的更改，将在 CI 中自动接受为基线，这样你就无需重复审查。
- 在你的 CI 工作流程中添加一个运行 Chromatic 的步骤。
- 配置你的 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 |
{
"buildScriptName": "deploy-storybook",
"debug": true,
"projectId": "Project:64cbcde96f99841e8b007d75",
"zip": true
}常见问题
视觉测试与快照测试有什么区别？
快照测试将每个 story 渲染的标记与已知基线进行比较。这意味着测试比较的是 HTML 数据块，而不是用户实际看到的内容。这反过来可能会导致误报增加，因为代码更改并不总是产生组件的视觉变化。
视觉测试将每个 story 渲染的像素与已知基线进行比较。由于你测试的是用户实际体验的内容，你的测试将更加丰富且易于维护。
更多测试资源