⚡

视觉回归测试配置 visual-regression-setup

本技能用于为桌面应用程序配置自动化视觉回归测试，通过截图对比来检测UI界面的非预期变化。它支持集成Percy、Chromatic等专业工具，也支持自定义截图对比方案，并可配置差异阈值、动态内容处理及CI/CD流水线。关键词：视觉回归测试、UI测试、截图对比、Percy、Chromatic、Playwright、Cypress、Puppeteer、自动化测试、CI/CD。

测试 0 次安装 0 次浏览更新于 2/25/2026

name: visual-regression-setup description: 配置视觉回归测试，支持Percy、Chromatic或自定义截图对比 allowed-tools: Read, Write, Edit, Bash, Glob, Grep tags: [testing, visual-regression, screenshots, ui-testing, desktop]

visual-regression-setup

为桌面应用程序配置视觉回归测试，以捕获意外的UI变化。

功能

配置Percy集成
为Storybook设置Chromatic
自定义截图对比
配置阈值设置
处理动态内容遮罩
设置CI/CD集成

输入模式

{
  "type": "object",
  "properties": {
    "projectPath": { "type": "string" },
    "provider": { "enum": ["percy", "chromatic", "reg-suit", "custom"] },
    "framework": { "enum": ["playwright", "cypress", "puppeteer"] }
  },
  "required": ["projectPath"]
}

Percy集成

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure'
  }
});

// test.spec.js
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test('视觉测试', async ({ page }) => {
  await page.goto('/');
  await percySnapshot(page, '主页');
});

自定义对比

const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });

test('匹配截图', async () => {
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot({
    failureThreshold: 0.01,
    failureThresholdType: 'percent'
  });
});

相关技能

playwright-electron-config
desktop-ui-testing 流程