可视化测试

可视化测试可以捕获 UI 外观中的错误。它们通过对每个故事进行屏幕截图并将其与先前版本进行比较来识别视觉更改。这非常适合验证布局、颜色、大小、对比度以及 UI 的任何其他视觉方面。

Storybook 原生支持跨浏览器可视化测试，使用 Chromatic，这是一项由 Storybook 团队提供的云服务。启用可视化测试后，每个故事都会自动转换为测试。这使您能够在 Storybook 中直接获得有关 UI 错误的即时反馈。

安装插件

通过安装 @chromatic-com/storybook（Storybook 维护人员提供的官方插件）将可视化测试添加到您的项目中。

npx storybook@latest add @chromatic-com/storybook

需要 Storybook 7.6 或更高版本。请阅读迁移指南以升级您的项目。

启用可视化测试

启动 Storybook 后，您将看到一个用于可视化测试的新插件面板，您可以在其中运行测试并查看结果。

Visual Tests addon enabled

要启用可视化测试，请注册 Chromatic 并创建一个项目。这将使您可以访问一系列云浏览器。

Visual Tests addon project selection

从您的项目列表中选择一个项目以完成设置。如果您是第一次设置插件，则会自动为您添加配置文件和必要的项目标识符。

配置

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