当前位置：首页 > news >正文

Playwright与Visual-Regression-Tracker结合使用：自动化视觉测试完整流程

news 2026/8/16 13:50:41

Playwright与Visual-Regression-Tracker结合使用：自动化视觉测试完整流程

【免费下载链接】Visual-Regression-TrackerBackend and Frontend application for tracking differences via image comparison项目地址: https://gitcode.com/gh_mirrors/vi/Visual-Regression-Tracker

Visual Regression Tracker是一款开源的视觉测试解决方案，能够通过图像对比追踪UI差异，帮助开发团队在自动化测试中及时发现视觉问题。本文将详细介绍如何将Playwright与Visual Regression Tracker无缝集成，构建完整的自动化视觉测试流程，让前端UI测试变得简单高效。

📋 准备工作：环境搭建与安装

1. 安装Visual Regression Tracker服务

Visual Regression Tracker提供了便捷的Docker安装方式，只需几步即可完成服务部署：

# 克隆仓库 git clone https://gitcode.com/gh_mirrors/vi/Visual-Regression-Tracker cd Visual-Regression-Tracker # 运行安装脚本 curl https://raw.githubusercontent.com/Visual-Regression-Tracker/Visual-Regression-Tracker/master/vrt-install.sh -o vrt-install.sh chmod a+x vrt-install.sh ./vrt-install.sh

安装成功后，服务默认运行在http://localhost:8080，首次启动会显示初始管理员凭据。

Visual Regression Tracker安装成功后显示的初始凭据界面，包含管理员账号和默认密码

2. 安装Playwright视觉测试代理

在Playwright项目中安装官方提供的Visual Regression Tracker代理：

npm install @visual-regression-tracker/agent-playwright --save-dev

🔧 配置与初始化

创建配置文件

在项目根目录创建vrt.config.js配置文件，填入Visual Regression Tracker服务信息：

module.exports = { apiUrl: "http://localhost:4200", project: "YOUR_PROJECT_ID", apiKey: "YOUR_API_KEY", branchName: "main", enableSoftAssert: true };

项目ID和API Key可在Visual Regression Tracker的项目设置页面获取

初始化测试环境

在Playwright测试文件中引入VRT代理并初始化：

const { test } = require('@playwright/test'); const { track } = require('@visual-regression-tracker/agent-playwright'); test.beforeEach(async ({ context }) => { // 初始化VRT跟踪 await track.init(context); });

📸 编写视觉测试用例

基础截图对比

使用track.screenshot方法替代Playwright原生截图，自动将截图发送到Visual Regression Tracker进行对比：

test('首页视觉测试', async ({ page }) => { await page.goto('https://example.com'); // 执行视觉检查 await track.screenshot(page, '首页完整截图', { // 可选配置：设置视口大小 viewport: { width: 1280, height: 720 } }); });

高级配置：忽略区域

对于动态内容区域（如广告、时间显示），可通过忽略区域提高测试稳定性：

await track.screenshot(page, '产品列表页', { ignoreAreas: [ // 坐标格式：{ x: 起始X, y: 起始Y, width: 宽度, height: 高度 } { x: 800, y: 10, width: 400, height: 50 }, // 忽略右上角时间区域 { x: 0, y: 600, width: 1280, height: 100 } // 忽略页脚动态内容 ] });

通过Visual Regression Tracker设置忽略区域的演示，可排除动态内容对测试结果的干扰

🔍 查看测试结果

测试结果可视化

测试执行完成后，访问Visual Regression Tracker控制台（http://localhost:8080）查看详细结果：

通过测试：新截图与基线完全匹配
差异警告：存在微小差异但在可接受范围内
测试失败：发现显著视觉变化

Visual Regression Tracker显示测试成功的界面，展示通过的测试用例和匹配度

处理视觉差异

当发现视觉差异时，有以下几种处理方式：

接受差异：如果变化是预期的（如UI更新），可将新截图设为新基线
调整测试：如果差异是由于测试配置问题，可修改忽略区域或测试参数
修复问题：如果差异是bug，修复后重新运行测试

Visual Regression Tracker展示视觉差异的对比界面，左侧为基线图，右侧为新截图，中间为差异标记

🚀 集成到CI/CD流程

将Visual Regression Tracker视觉测试集成到CI/CD管道，实现每次代码提交自动执行视觉检查：

# .github/workflows/visual-test.yml示例 name: 视觉测试 on: [push] jobs: visual-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: 安装依赖 run: npm ci - name: 启动VRT服务 run: docker-compose up -d - name: 运行Playwright测试 run: npx playwright test - name: 停止VRT服务 run: docker-compose down