视觉测试

可视化测试，也称为可视化回归测试，可捕获 UI 外观中的错误。

通过截取每个故事的屏幕截图并将它们提交进行比较以识别更改来工作。

非常适合验证用户看到的内容：布局、颜色、大小和对比度。

Storybook 是视觉测试的绝佳工具，因为每个故事本质上都是一个测试规范。

每当编写或更新故事时，都会免费获得规范。

有许多用于视觉测试的工具。

建议使用 Storybook 维护的 Chromatic 在闪电般快速的云浏览器环境中运行视觉测试。

对于 Chromatic 的自我管理替代方案，提供 StoryShots 。

通过与 jest-image-snapshot 集成来对故事运行视觉测试。

设置 Chromatic 插件

Chromatic 是为 Storybook 构建的云服务。

使用零配置运行可视化测试。

首先，使用 GitHub、GitLab、Bitbucket 或电子邮件进行注册，并为 Storybook 生成一个唯一的 project-token。

接下来，从 yarn 安装 chromium CLI 包：

1
2

yarn add --dev chromatic

软件包安装完成后运行以下命令：

1
2

npx chromatic --project-token <your-project-token>

注意： 不要忘记将 your-project-token 替换为 Chromatic 提供的令牌。

1
2
3
4



Build 1 published.

View it online at https://www.chromatic.com/build?appId=...&number=1.

当 Chromatic 完成时，它应该已经成功部署了您的 Storybook 并为您的所有组件的故事建立了基线（即起点）。

此外，为您提供指向已发布 Storybook 的链接，可以与团队共享该链接以收集反馈。

每次运行 Chromatic 时，它都会生成新快照并将它们与现有基线进行比较。
这是检测 UI 更改和防止潜在 UI 回归的理想选择。

例如，假设您正在处理一个组件并调整样式。
当 Chromatic 重新运行时，它将突出显示基线和更新组件之间的差异。

如果更改是有意的，请将其作为基线。否则，拒绝它们以防止 UI 回归。

快照测试将每个故事的渲染标记与已知基线进行比较。

这意味着测试比较的是 HTML 的 blob，而不是用户实际看到的内容。

反过来，这会导致误报增加，因为代码更改并不总是会在组件中产生视觉变化。