可视化回归测试：Vue 3 + Percy的CI/CD集成流程

前言

嗨，大家好！今天我们要聊聊一个非常有趣的话题——如何在Vue 3项目中集成Percy进行可视化回归测试，并将其融入到CI/CD流水线中。想象一下，你辛辛苦苦写了一堆代码，结果一不小心改坏了UI，老板看到后可能会说：“这啥玩意儿？之前不是好好的吗？”为了避免这种尴尬的局面，我们可以通过Percy来捕捉UI的变化，确保每次改动都不会破坏现有的界面。

什么是Percy？

Percy是一个强大的可视化回归测试工具，它可以帮助我们在每次构建时自动捕获页面的截图，并与之前的版本进行对比。如果发现有任何视觉上的差异，Percy会立即通知我们，甚至可以告诉我们具体是哪里出了问题。这样，我们就不用担心因为一个小改动而引发大灾难了。

Percy的工作原理

截屏：Percy会在每次构建时自动截取页面的快照。
比较：将这些快照与之前保存的基准图像进行比较。
报告：如果有任何差异，Percy会生成详细的报告，指出哪些元素发生了变化。
审批：开发人员可以查看这些差异，并决定是否接受新的设计，或者修复问题。

Vue 3简介

Vue 3是Vue.js的最新版本，带来了许多性能优化和新特性。相比Vue 2，Vue 3的核心库体积更小，响应式系统更快，组件的生命周期也更加清晰。如果你还没有升级到Vue 3，强烈建议你试试看！

Vue 3的关键特性

Composition API：这是Vue 3最引人注目的新特性之一，允许我们以更灵活的方式组织代码。
更好的TypeScript支持：Vue 3对TypeScript的支持更加完善，开发体验大幅提升。
性能提升：Vue 3在渲染速度、内存占用等方面都有显著改进。

集成Percy到Vue 3项目

接下来，我们将详细介绍如何将Percy集成到Vue 3项目中，并将其与CI/CD流水线结合使用。这个过程其实并不复杂，只需要几个简单的步骤。

1. 安装Percy CLI

首先，我们需要安装Percy的命令行工具（CLI）。这可以通过npm或yarn来完成：

npm install @percy/cli --save-dev

或者

yarn add @percy/cli --dev

安装完成后，我们还需要配置Percy的API密钥。可以在项目的根目录下创建一个.percy.yml文件，并添加以下内容：

version: 2
clients:
  percy-web:
    token: YOUR_PERCY_TOKEN

2. 配置Percy SDK

为了让Percy能够捕获Vue 3应用的快照，我们需要安装并配置Percy的Web SDK。这可以通过以下命令完成：

npm install @percy/agent @percy/puppeteer --save-dev

然后，在项目的入口文件（通常是main.js）中引入Percy SDK：

import { percySnapshot } from '@percy/puppeteer';

// 在应用启动后调用Percy的快照函数
app.mount('#app');
percySnapshot('Home Page');

3. 编写测试用例

为了确保Percy能够正确捕获页面的快照，我们需要编写一些测试用例。这里我们可以使用Jest和Puppeteer来模拟浏览器行为，并调用Percy的快照函数。

首先，安装Jest和Puppeteer：

npm install jest puppeteer --save-dev

然后，在tests/e2e目录下创建一个测试文件visual-regression.test.js，并编写如下代码：

const { percySnapshot } = require('@percy/puppeteer');
const { launch } = require('puppeteer');

describe('Visual Regression Tests', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await launch();
    page = await browser.newPage();
    await page.goto('http://localhost:8080');
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should match the home page layout', async () => {
    await percySnapshot(page, 'Home Page');
  });

  it('should match the about page layout', async () => {
    await page.goto('http://localhost:8080/about');
    await percySnapshot(page, 'About Page');
  });
});

4. 配置CI/CD流水线

现在，我们已经完成了本地的配置，接下来需要将Percy集成到CI/CD流水线中。假设你使用的是GitHub Actions，可以在.github/workflows/ci.yml文件中添加以下步骤：

name: CI

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        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 project
        run: npm run build

      - name: Run visual regression tests
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
        run: |
          npx percy exec -- npm test

在这个配置中，我们使用了percy exec命令来运行Percy的可视化回归测试。PERCY_TOKEN是从GitHub Secrets中获取的环境变量，确保你的Percy API密钥不会泄露。

结语

通过以上步骤，我们成功地将Percy集成到了Vue 3项目中，并将其纳入了CI/CD流水线。这样一来，每次代码提交或拉取请求时，Percy都会自动捕获页面的快照，并与之前的版本进行比较。如果发现任何视觉上的差异，我们可以在第一时间发现问题并进行修复。

希望这篇文章对你有所帮助！如果你有任何疑问或建议，欢迎在评论区留言。编码愉快，再见！ 😊

参考资料