AI 生成组件的自动化回归测试：快照对比与交互回放的工程方案-育师

AI 生成组件的自动化回归测试：快照对比与交互回放的工程方案

一、那段"改了一个 props 默认值，三个页面塌了"的凌晨

凌晨两点，线上告警：用户详情页的对话框无法关闭。回溯提交记录，前端同学修改了Modal组件的closable默认值从true改为false，目的是修复另一个产品要求的"重要提示不可关闭"场景。改了 3 行代码，破了 3 个页面。

这个问题在传统测试体系中几乎无解。单元测试测了Modal的渲染，但测不到它在上百个页面中的实际使用效果。E2E 测试覆盖了核心流程，但不覆盖"对话框长什么样"。

AI 在这里的切入点：自动生成组件快照，在每次变更时自动对比，发现视觉和行为上的回归。不是替代人工 QA，而是把"肉眼比对"这个最耗时的工作自动化。

二、快照对比 + 交互回放的双通道检测架构

两个通道互补：快照通道检测视觉回归（按钮变圆了、颜色变了、布局塌了），交互通道检测行为回归（点击没反应、Dialog 关不掉了、路由跳转错了）。

三、生产级实现

// visual-testing/snapshot-regression.ts // 视觉回归测试：自动截图 + 像素对比 + AI 差异分析 import { test, expect } from '@playwright/test'; import pixelmatch from 'pixelmatch'; import { PNG } from 'pngjs'; import fs from 'fs'; import path from 'path'; /** 组件截图配置 */ interface SnapshotConfig { componentName: string; /** Storybook 的 iframe URL */ storyUrl: string; /** 不同的 Props 组合（变体） */ variants: Array<{ name: string; props: Record<string, any>; }>; /** 视口尺寸 */ viewport?: { width: number; height: number }; } /** * 视觉回归测试用例生成器 * * 设计意图：从组件配置文件自动生成 Playwright 测试， * 不再需要手动为每个组件写截图测试 */ function generateSnapshotTests(configs: SnapshotConfig[]) { for (const config of configs) { test.describe(`${config.componentName} 视觉回归`, () => { for (const variant of config.variants) { test(`${variant.name}`, async ({ page }) => { if (config.viewport) { await page.setViewportSize(config.viewport); } // 访问 Storybook 的组件 iframe（独立渲染，无外层装饰） await page.goto(config.storyUrl); // 等待组件渲染完成（等待数据加载、动画结束） await page.waitForSelector('[data-testid="component-ready"]', { timeout: 10000 }); // 关闭所有动画（CSS + Web Animations），保证截图稳定 await page.addStyleTag({ content: ` *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } ` }); // 截图 const screenshot = await page.screenshot({ fullPage: false }); // 与基准截图对比 const baselinePath = path.join( 'visual-baselines', config.componentName, `${variant.name}.png` ); if (!fs.existsSync(baselinePath)) { // 首次运行：保存为基准 fs.mkdirSync(path.dirname(baselinePath), { recursive: true }); fs.writeFileSync(baselinePath, screenshot); console.log(`[Baseline] 已创建基准截图: ${baselinePath}`); return; } // 像素级对比 const diff = await pixelDiff(screenshot, fs.readFileSync(baselinePath)); // 差异阈值：超过 0.5% 的像素不同 → 判定为回归 if (diff.ratio > 0.005) { // 保存差异图（红色标记不同像素） fs.writeFileSync( path.join('visual-diffs', config.componentName, `${variant.name}-diff.png`), diff.diffImage ); throw new Error( `[视觉回归] ${config.componentName}/${variant.name} 检测到 ${(diff.ratio * 100).toFixed(2)}% 像素差异` ); } }); } }); } } /** * 像素级图片对比 * 使用 pixelmatch 做像素逐个比对，忽略抗锯齿相关差异（阈值 0.1） */ async function pixelDiff( newScreenshot: Buffer, baselineScreenshot: Buffer ): Promise<{ ratio: number; diffImage: Buffer }> { const newImg = PNG.sync.read(newScreenshot); const baselineImg = PNG.sync.read(baselineScreenshot); // 尺寸统一（防止截图尺寸不一致导致的对比失败） const width = Math.min(newImg.width, baselineImg.width); const height = Math.min(newImg.height, baselineImg.height); const diff = new PNG({ width, height }); const diffPixels = pixelmatch( newImg.data, baselineImg.data, diff.data, width, height, { threshold: 0.1, alpha: 0.3 } ); return { ratio: diffPixels / (width * height), diffImage: PNG.sync.write(diff) }; }

// visual-testing/interaction-replay.ts // 交互回放测试：录制用户操作序列，在新版本上回放验证 import { chromium, Browser, Page } from 'playwright'; /** 用户操作记录 */ interface ActionRecord { type: 'click' | 'input' | 'scroll' | 'hover' | 'keydown'; selector: string; value?: string; // input 输入值 / keydown 按键 position?: { x: number; y: number }; timestamp: number; // 相对于页面加载的时间偏移 /** 操作后的截图 hash——用于验证回放时渲染一致 */ screenshotHash?: string; } /** * 录制用户操作序列 * 在浏览器中注入脚本，监听 DOM 事件，记录所有交互操作 */ async function recordActions(page: Page, duration: number): Promise<ActionRecord[]> { const startTime = Date.now(); const actions: ActionRecord[] = []; // 暴露录制接口到浏览器上下文 await page.exposeFunction('recordAction', (action: ActionRecord) => { action.timestamp = Date.now() - startTime; actions.push(action); }); // 注入事件监听脚本 await page.evaluate(() => { const record = (type: string, event: Event) => { const target = event.target as HTMLElement; const selector = getSelector(target); (window as any).recordAction({ type, selector, value: (target as HTMLInputElement).value || undefined, position: event instanceof MouseEvent ? { x: event.clientX, y: event.clientY } : undefined }); }; document.addEventListener('click', (e) => record('click', e), true); document.addEventListener('input', (e) => record('input', e), true); document.addEventListener('scroll', (e) => record('scroll', e), true); document.addEventListener('keydown', (e) => record('keydown', e), true); // 辅助：生成元素的可复现选择器 function getSelector(el: HTMLElement): string { if (el.dataset.testid) return `[data-testid="${el.dataset.testid}"]`; if (el.id) return `#${el.id}`; // 回退到标签名 + 文本内容（稳定性差，仅用于展示） if (el.textContent && el.textContent.length < 20) { return `${el.tagName.toLowerCase()}:has-text("${el.textContent.trim()}")`; } return el.tagName.toLowerCase(); } }); // 等待录制时长 await page.waitForTimeout(duration); return actions; } /** * 回放录制的操作序列 * 按时间顺序逐一执行录制的操作，验证行为一致性 */ async function replayActions( page: Page, actions: ActionRecord[] ): Promise<{ passed: boolean; failedAction?: ActionRecord; error?: string }> { for (const action of actions) { try { switch (action.type) { case 'click': if (action.position) { await page.click(action.selector, { position: action.position }); } else { await page.click(action.selector); } break; case 'input': await page.fill(action.selector, action.value || ''); break; case 'scroll': // 滚动操作等待动画完成 await page.evaluate((sel) => { document.querySelector(sel)?.scrollIntoView({ behavior: 'instant' }); }, action.selector); break; case 'keydown': await page.keyboard.press(action.value || 'Enter'); break; } // 每步操作后等待 200ms，等待可能的异步渲染 await page.waitForTimeout(200); } catch (error) { return { passed: false, failedAction: action, error: `操作 ${action.type}(${action.selector}) 回放失败: ${error}` }; } } return { passed: true }; } /** * 完整的录制+回放测试流程 */ async function interactionRegressionTest( componentUrl: string, recordDuration: number = 10000 // 默认录制 10 秒 ) { const browser = await chromium.launch(); // 阶段 1：使用基准版本录制操作 const recordPage = await browser.newPage(); await recordPage.goto(componentUrl); await recordPage.waitForLoadState('networkidle'); const recordedActions = await recordActions(recordPage, recordDuration); await recordPage.close(); console.log(`录制完成：${recordedActions.length} 个操作`); // 阶段 2：使用当前版本回放 const replayPage = await browser.newPage(); await replayPage.goto(componentUrl); await replayPage.waitForLoadState('networkidle'); const result = await replayActions(replayPage, recordedActions); await replayPage.close(); await browser.close(); if (!result.passed) { throw new Error( `交互回放失败：\n` + `失败操作：${JSON.stringify(result.failedAction)}\n` + `错误：${result.error}` ); } console.log('交互回放通过'); }