参加直播会议:周四,美国东部时间上午 11 点,Storybook 9 发布 & 问答

视觉测试

在您的 Story 中捕获意外的视觉变化 & UI 错误

在 Github 上查看

Storybook 视觉测试插件

对您的 Story 运行视觉测试,并将更改与最新基准进行比较,以便在开发早期发现 UI 回归。支持多种视口、主题和浏览器。

先决条件

入门指南

运行以下命令安装插件并通过 Storybook 的 CLI 为您的项目自动配置

npx storybook add @chromatic-com/storybook

启动 Storybook 并导航到“视觉测试”面板,使用 Chromatic 运行您的第一个视觉测试!

配置

默认情况下,此插件提供零配置支持,可与 Storybook 和 Chromatic 一起运行视觉测试。但是,如果需要,您可以通过提供一些选项进行自定义。有关使用 Storybook 配置和使用此插件的更多信息,请参阅 Chromatic 文档

获取帮助

如果您对插件有任何疑问或需要帮助,请联系 Chromatic 团队。登录您的 Chromatic 帐户,然后单击屏幕右下角的聊天图标与我们开始对话。

贡献

我们欢迎贡献!如果您是维护者,请参阅以下说明,以使用 Chromatic 设置您的开发环境。

更新 GraphQL schema

该插件使用 Chromatic 公共 GraphQL API。我们依靠其 schema 来生成类型定义。 schema 更改时需要手动更新。要更新,请获取 https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql 并将其保存到 src/gql/public-schema.graphql 下。

故障排除

启用插件运行 Storybook 时抛出错误

安装后,运行 Storybook 可能会导致以下错误

const stringWidth = require('string-width');

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.

这是使用旧版本 Yarn 包管理器(例如 1.x 版本)时的已知问题。要解决此问题,您可以升级到最新的稳定版本。但是,如果无法升级,请调整您的 package.json 文件并提供 resolution 字段,以使 Yarn 包管理器能够安装正确的依赖项。这样做可能需要在再次安装依赖项之前删除 node_modules 目录和 yarn.lock 文件。

 "resolutions": {
    "jackspeak": "2.1.1"
  }

或者,您可以使用不同的包管理器(npmpnpm)。

版本兼容性

插件版本 Storybook 版本
^4.0.0 ^9.0.0
^3.0.0 ^8.2.0
^2.0.2 8.0.0 - 8.1.x

许可

MIT

制作者
  • katiebayes
    katiebayes
  • jmhobbs
    jmhobbs
  • tmeasday
    tmeasday
  • ndelangen
    ndelangen
  • ethriel3695
    ethriel3695
  • stevenkitterman
    stevenkitterman
支持
    Angular
    Ember
    HTML
    Preact
    React
    React native
    Svelte
    Vue
    Web Components
标签