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

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

前言

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

什么是Percy?

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

Percy的工作原理

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

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都会自动捕获页面的快照,并与之前的版本进行比较。如果发现任何视觉上的差异,我们可以在第一时间发现问题并进行修复。

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


参考资料

发表回复

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