发布于 由admin

可视化测试：Storybook + Chromatic的Vue组件回归测试方案

可视化测试：Storybook + Chromatic的Vue组件回归测试方案

引言

大家好，欢迎来到今天的讲座！今天我们要聊的是一个非常实用的话题——如何使用 Storybook 和 Chromatic 来为 Vue 组件做可视化回归测试。如果你是一个前端开发者，尤其是使用 Vue 框架的开发者，你一定遇到过这样的问题：改了一行代码，结果发现某个组件的样式或行为突然不对了，而你根本不知道是哪里出了问题。这时候，可视化测试就能派上大用场了！

什么是可视化测试？

简单来说，可视化测试就是通过对比不同版本的 UI 界面，确保它们在视觉上没有发生变化。这有点像我们小时候玩的“找不同”游戏，只不过这次是机器帮我们找不同。通过这种方式，我们可以轻松地检测出组件在不同状态下是否保持一致，避免因为代码改动导致的意外变化。

为什么选择 Storybook 和 Chromatic？

  • Storybook 是一个非常流行的工具，它允许你以隔离的方式展示和开发组件。你可以为每个组件编写不同的状态（称为“故事”），并实时预览它们。
  • Chromatic 则是专门为 Storybook 设计的可视化测试工具。它可以帮助你在每次提交代码时自动捕获组件的截图，并与之前的版本进行比较。如果有任何视觉上的差异，它会立即通知你。

这两者的结合简直是天作之合，能够让你在开发过程中更加自信，减少因 UI 变化带来的风险。

Step 1: 安装和配置 Storybook

首先，我们需要为 Vue 项目安装并配置 Storybook。假设你已经有一个现成的 Vue 项目，接下来我们来一步步搞定它。

1.1 安装 Storybook

打开终端，进入你的项目目录，然后运行以下命令：

npx sb init --builder @storybook/builder-vite

这个命令会自动为你安装 Storybook 及其依赖项，并生成一些基本的配置文件。如果你使用的是 Vite 作为构建工具，建议使用 @storybook/builder-vite，这样可以更好地与 Vite 集成。

1.2 配置 Storybook

安装完成后，你会在项目的根目录下看到一个新的 .storybook 文件夹。里面包含了一些配置文件，比如 main.js 和 preview.js。我们可以在 main.js 中添加一些自定义配置，比如指定要加载的故事文件路径：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3',
};

1.3 编写第一个故事

接下来，我们来编写一个简单的 Vue 组件，并为其编写故事。假设我们有一个按钮组件 Button.vue：

<!-- src/components/Button.vue -->
<template>
  <button :class="['btn', type]">
    {{ label }}
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    label: {
      type: String,
      default: 'Click me',
    },
    type: {
      type: String,
      default: 'default',
    },
  },
};
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.default {
  background-color: #007bff;
  color: white;
}

.primary {
  background-color: #6c757d;
  color: white;
}
</style>

现在，我们为这个按钮组件编写一些故事。创建一个 Button.stories.js 文件：

// src/components/Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    label: { control: 'text' },
    type: { control: 'select', options: ['default', 'primary'] },
  },
};

const Template = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
  label: 'Click me',
  type: 'default',
};

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  type: 'primary',
};

1.4 启动 Storybook

完成以上步骤后，你可以通过以下命令启动 Storybook：

npm run storybook

现在，打开浏览器，访问 http://localhost:6006，你应该能看到你刚刚编写的按钮组件的不同状态。你可以通过调整参数来查看不同样式的按钮。

Step 2: 集成 Chromatic

接下来，我们要将 Chromatic 集成到我们的项目中，以便进行自动化可视化测试。

2.1 注册 Chromatic

首先，你需要去 Chromatic 注册一个账号。注册完成后，你会得到一个 API 密钥。我们将使用这个密钥来配置 Chromatic。

2.2 安装 Chromatic CLI

在终端中运行以下命令来安装 Chromatic 的命令行工具：

npx chromatic --setup

这个命令会提示你输入刚才获得的 API 密钥，并为你生成一个 chromatic 脚本。你可以在 package.json 中找到它：

{
  "scripts": {
    "build-storybook": "build-storybook",
    "chromatic": "chromatic"
  }
}

2.3 配置 Chromatic

为了让 Chromatic 知道我们要测试哪些故事，我们需要在 .storybook/ 目录下创建一个 chromatic.config.js 文件。这个文件可以用来指定哪些故事需要被测试，或者排除某些故事不进行测试。

// .storybook/chromatic.config.js
module.exports = {
  // 只测试特定的故事
  includeStories: ['Default', 'Primary'],

  // 或者排除某些故事
  // excludeStories: ['Experimental'],
};

2.4 运行可视化测试

现在，你可以通过以下命令来运行一次手动的可视化测试：

npm run chromatic

Chromatic 会自动捕获所有故事的截图，并将它们上传到云端。如果这是你第一次运行测试，Chromatic 会将这些截图保存为“基准”版本。以后每次运行测试时，Chromatic 都会将新截图与基准版本进行比较，如果有任何差异，它会生成一个报告并通知你。

2.5 自动化测试

为了确保每次代码提交时都能自动运行可视化测试，你可以将 Chromatic 集成到 CI/CD 流程中。大多数 CI 工具（如 GitHub Actions、GitLab CI、CircleCI 等）都支持通过环境变量来配置 Chromatic 的 API 密钥。

例如，在 GitHub Actions 中，你可以在工作流文件中添加以下步骤：

name: Visual Testing

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build Storybook
        run: npm run build-storybook
      - name: Run Chromatic
        run: npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

在这个配置中，CHROMATIC_PROJECT_TOKEN 是你从 Chromatic 获取的 API 密钥，应该存储在 GitHub 的 Secrets 中。

Step 3: 处理可视化差异

当你运行可视化测试时，可能会遇到一些差异。Chromatic 会生成一个详细的报告，显示哪些组件发生了变化。你可以通过以下几种方式来处理这些差异：

  1. 确认差异：如果差异是你预期的（比如你故意修改了组件的样式），你可以直接确认这些差异，Chromatic 会将新的截图保存为新的基准版本。

  2. 修复代码：如果差异是你不希望看到的，说明你的代码可能有问题。你需要回滚代码，或者修复导致差异的 bug。

  3. 忽略差异：有时候，某些差异可能是由于浏览器渲染引擎的细微差异引起的，而不是代码本身的问题。在这种情况下，你可以选择忽略这些差异，但要注意不要滥用这个功能，否则可能会错过真正的 bug。

结语

通过使用 Storybook 和 Chromatic，你可以轻松地为 Vue 组件编写可视化回归测试，确保每次代码更改都不会影响到现有的 UI。这对于维护大型项目尤其重要，因为它可以帮助你快速发现问题，减少调试时间。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言，我们下次再见！ 😊

参考资料：

  • Storybook 官方文档
  • Chromatic 官方文档
  • Vue.js 官方文档

祝你编码愉快！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注