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

我很高兴地分享 Chromatic Visual Test 插件 已进入私测阶段！到目前为止，已有超过 900 名开发者注册了早期访问。每批新用户都为我们的维护者提供了关键反馈，我们立即将其融入到开发中。

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

• 🌎 Chrome、Safari、Firefox 和 Edge
• ♻️ 复用您的故事作为测试用例
• ⚡️ 所有测试都在云端并行化
• 💅 主题、视口、i18n
• 🔦 快速可视化调试

如果您尚未注册早期访问，请在此注册！

为什么选择 Chromatic Visual Tests 插件？

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

Chromatic Visual Tests 插件通过使开发者能够在 Storybook 内部直接运行可视化测试并查看结果，从而加速了此工作流程。无需再在 git ↔ CI 应用 ↔ Web 浏览器之间跳转。并排编写故事并捕获视觉回归。

按需运行可视化测试

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

对于 beta 版，我们引入了一个可扩展的测试状态栏，可以实时显示进度。

侧边栏中的故事状态

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

对于 beta 版，我们改进了过滤侧边栏的功能，该侧边栏仅显示有更改的故事。

交互式比较视觉变化

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

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

为了响应用户反馈，beta 版更新了插件 UX，以便常用操作现在更靠近在一起。我们还调整了元数据位置，以首先显示最重要的信息。

我们接下来要构建什么

主要的 speed improvements

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

• Storybook 构建时间：静态包速度提升 80%
• 网络延迟：减小包大小以提高测试上传速度
• 捕获时间：通过改进的排队基础设施，速度提升 51%

90 秒设置

通常，感觉好像您需要博士学位才能使开发工具正常工作。我们对 Chromatic Visual Tests 插件的目标是让您在 90 秒内完成从注册到运行测试的过程。这意味着以最少的命令和提交提供最合适的配置。

立即开始使用

Chromatic Visual Tests 插件正在积极开发中，有六名维护人员。我们需要您的帮助才能使其成为现实。您可以使用单个命令安装该插件

npx storybook@latest add @chromatic-com/storybook

我们还发布了文档，以帮助您开始在您的项目中使用该插件。