可视化回归测试: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都会自动捕获页面的快照,并与之前的版本进行比较。如果发现任何视觉上的差异,我们可以在第一时间发现问题并进行修复。
希望这篇文章对你有所帮助!如果你有任何疑问或建议,欢迎在评论区留言。编码愉快,再见! 😊
参考资料