可视化测试
可视化测试捕捉 UI 外观中的错误。其工作原理是为每个 story 拍摄屏幕截图，并将其与以前的版本进行比较，以识别视觉变化。这非常适合验证布局、颜色、尺寸、对比度以及 UI 的任何其他视觉方面。
Storybook 原生支持使用 Chromatic 进行跨浏览器可视化测试，Chromatic 是 Storybook 团队开发的云服务。当您启用可视化测试时，每个 story 都会自动转换为测试。这使您可以直接在 Storybook 中获得关于 UI 错误的即时反馈。
安装插件
通过安装 @chromatic-com/storybook，即 Storybook 维护者提供的官方插件，将可视化测试添加到您的项目中
npx storybook@latest add @chromatic-com/storybook需要 Storybook 7.6 或更高版本。阅读迁移指南以升级您的项目。
启用可视化测试
当您启动 Storybook 时，您将看到一个新的“可视化测试”插件面板，您可以在其中运行测试并查看结果。
要启用可视化测试，请注册 Chromatic 并创建一个项目。这将使您能够访问大量的云浏览器。
从您的项目列表中选择一个项目以完成设置。如果您是首次设置插件，配置文件和必要的项目标识符将自动为您添加。
配置
该插件默认包含涵盖大多数用例的配置选项。您还可以通过 ./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
}运行可视化测试
单击 Storybook 侧边栏中的 ▶️ 播放按钮以运行可视化测试。 这会将您的 stories 发送到云端以拍摄快照并检测视觉变化。
查看更改
如果您的 stories 中存在视觉变化，它们将在侧边栏中以 🟡 高亮显示。单击 story 并转到“可视化测试”插件面板，以查看哪些像素发生了变化。
如果更改是故意的，请在本地 ✅ 接受它们作为基线。如果更改不是故意的，请修复 story 并使用 ▶️ 播放按钮重新运行测试。
当您完成在插件中接受更改作为基线后，就可以将代码推送到远程存储库了。 这会将基线同步到云端，供任何检出您的分支的人使用。
使用 CI 自动化
该插件旨在与 CI 结合使用。我们建议在开发期间使用该插件检查更改，然后在您准备合并时在 CI 中运行可视化测试。
您在插件中接受为基线的更改将在 CI 中自动接受为基线，因此您无需审查两次。
-
在您的 CI 工作流程中添加一个步骤来运行 Chromatic。
-
配置您的 CI 以包含环境变量，以便使用 Chromatic（项目令牌）进行身份验证。
PR 检查
一旦您在 CI 中成功设置 Chromatic，您的拉取/合并请求将标记有 UI 测试检查。该徽章会通知您测试错误或需要您的团队验证的 UI 更改。在您的 Git 提供程序中将此检查设置为必需，以防止意外的 UI 错误被合并。
可视化测试和快照测试之间有什么区别？
快照测试 将每个 Story 的渲染标记与已知基线进行比较。这意味着测试比较的是 HTML 代码块，而不是用户实际看到的内容。反过来，这可能会导致误报的增加，因为代码更改并不总是会在组件中产生视觉变化。
视觉测试将每个 Story 的渲染像素与已知基线进行比较。因为您测试的是用户实际体验到的内容，所以您的测试将更丰富且更易于维护。
了解其他 UI 测试