Chromatic 可视化测试插件进入私有 Beta 阶段

我很高兴地宣布，Chromatic 可视化测试插件已进入私有 Beta 阶段！迄今为止，已有 900 多名开发者注册了抢先体验。每一批新用户都为我们的维护者提供了宝贵的反馈，我们立即将其整合到开发中。

私有 Beta 版本包括在云浏览器中运行可视化测试的核心工作流程——以及性能提升、改进和修复。

• 🌎 Chrome、Safari、Firefox 和 Edge
• ♻️ 将你的故事复用为测试用例
• ⚡️ 所有测试都在云端并行运行
• 💅 主题、视口、国际化
• 🔦 快速视觉调试

如果你还没有注册抢先体验，在此注册！

为什么选择 Chromatic 可视化测试插件？

每个英雄都需要一个搭档。对于 Storybook 用户，我们的核心维护者构建了Chromatic。Chromatic 在 CI 中对你的故事运行可视化测试，可以针对所有主流浏览器、视口和主题进行配置。无需编写/维护额外的测试，因为你的故事会自动复用为测试用例！

Chromatic 可视化测试插件通过让开发者直接在 Storybook 中运行可视化测试和查看结果，从而加速了这一工作流程。不再需要在 git ↔ CI 应用 ↔ 网页浏览器之间来回跳转。编写故事并同时捕获视觉回归。

按需运行可视化测试

该插件通过连接可扩展的浏览器云来按需运行可视化测试。过去，你必须等待其他 CI 任务完成（速度慢）或在本地测试（不可扩展且不一致）。使用此插件，你可以在本地机器上测试代码，无需提交或等待！

在 Beta 版本中，我们引入了一个可展开的测试状态栏，实时显示进度。

侧边栏中的故事状态

当插件检测到你的故事中存在视觉变化时，这些故事会用 🟡 标记以供审查。一旦你审查了更改，无论是通过修复它还是将其接受为新的基准，该故事将通过 🟢。

在 Beta 版本中，我们改进了过滤侧边栏的功能，使其只显示有更改的故事。

交互式比较视觉变化

该插件在你的故事旁边的插件面板中显示视觉变化，并为你配备了一套调试工具。

默认情况下，所有像素差异都以霓虹绿色高亮显示。你可以在测试基准和最新快照之间快速切换。你还可以浏览更改在不同浏览器和主题中的显示效果。这适用于你应用的主题、视口、国际化或任何其他全局设置。

根据用户反馈，Beta 版本更新了插件的用户体验，使常用操作现在更加紧凑。我们还调整了元数据位置，以便优先显示最重要的信息。

我们接下来要构建什么

重大速度改进

我们的目标是提供一种测试体验，既具备本地测试的即时性，又拥有云的可扩展性和一致性。Chromatic 每天已经在 CI 中运行数百万个测试，即使在遇到包含数千个测试的构建时，它仍然保持快速。我们正在努力进一步提高速度

• Storybook 构建时间：静态 bundle 速度提升 80%
• 网络延迟：减小 bundle 大小以提高测试上传速度
• 捕获时间：队列基础设施全面改进后快 51%

90 秒完成设置

通常，感觉你需要博士学位才能让一个开发工具工作起来。我们为 Chromatic 可视化测试插件设定的目标是让你从注册到运行测试在 90 秒内完成。这意味着以最少的命令和提交提供最合适的配置。

立即开始

Chromatic 可视化测试插件正在由六名维护者积极开发中。我们需要你的帮助来使其实现。你可以通过单个命令安装该插件

npx storybook@latest add @chromatic-com/storybook

我们还发布了文档来帮助你在项目中开始使用该插件。