随着现代 Web 应用程序的复杂性不断增加，前端的开发工具也在不断发展。其中一个流行的工具是 Storybook，它是一个交互式 UI 开发环境，从本质上来说可以帮助我们快速构建和测试组件。
即使 Storybook 提供了强大的构建和测试工具，但仍需要一种工具对组件进行视觉和审美上的测试。这时候，storybook-chromatic 便应运而生了。
storybook-chromatic 是一个 npm 包，它可以帮助我们创建可视化回归测试套件，以捕捉在我们进行 UI 更改时的视觉问题。
在本文中，我们将探讨如何使用 storybook-chromatic。
安装
安装 storybook-chromatic 非常简单，只需运行以下命令即可：
--- ------- ---------- -------------------
安装成功后，让我们来看一下 storybook-chromatic 的配置。
配置
首先，在您的 .storybook/config.js 文件中加入以下配置：
------ - ------------ - ---- ------------------- ------ - ------------- - ---- ---------------------- ------------------------------
该配置将 Storybook 和 Chromatic 连接起来，以确保在视觉回归测试期间可以正确运行。
接下来，创建一个名为 .env 的文件，并将以下内容添加到其中：
----------------------------- --------- ------- ----- -----
替换 <Your Chromatic Project Token Here> 为您的 Chromatic 项目的真实标识符。
现在让我们看一下，如何使用 storybook-chromatic 进行测试。
测试
首先，确保您的组件在 Storybook 中。如果没有，请按照以下示例进行安装：
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ----------- ---- ---------------- ------------------------ ------- --------------- -- -- ------------ ----
现在，您可以使用 Chromatic 进行手动回归测试。要执行此操作，请运行以下命令：
--- --- ---------
此命令将创建一个屏幕截图集合，并将其发送到 Chromatic，以便在组件上运行测试。
story-chromatic 还为我们提供了几个可选属性来控制测试的细节：
viewports- 这个选项可以定义在每个屏幕截图中使用的视口（viewport），我们可以使用这个选项来确保我们的 UI 在不同设备上的显示效果问题，视口格式为{ width: number, height: number, deviceScaleFactor?: number, isMobile?: boolean, hasTouch?: boolean }[]。waitBeforeScreenshot- 该选项用于配置 Chromatic 捕获屏幕截图前的等待时间，其值默认为 500。disableAnimations- 在某些情况下，使用动画会让屏幕截图显示不同，该选项可以帮助我们禁用屏幕截图中的动画。
示例代码如下：
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ----------- ---- ---------------- ------------------------ ------- ----------------------------- ---------- - - ------ ---- ------- --- -- - ------ ----- ------- --- - -- --------------------- ----- ------------------ ---- --- --------------- -- -- ------------ ----
现在，您已经掌握了如何使用 storybook-chromatic 进行视觉回归测试的所有步骤。让我们来总结一下关于 storytelling-chromatic 的使用。
总结
storybook-chromatic 是一个非常有用的工具，它可以帮助我们更轻松地执行视觉回归测试。本文中，我们学习了如何安装和配置 storybook-chromatic，并详细介绍了如何在我们的项目中使用它进行回归测试。
有了 storybook-chromatic，我们可以大大提高我们的组件开发的效率，并在迭代过程中更容易地发现视觉问题。让我们在未来的项目中继续使用这个强大的工具，以提高我们的工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/storybook-chromatic