视觉测试
视觉测试是测试组件最高效的方法。只需点击一个按钮,你就可以截取 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 渲染的像素与已知基线进行比较。由于你测试的是用户实际体验的内容,你的测试将更加丰富且易于维护。
更多测试资源