visual-regression-testing

视觉回归测试

目录

• 概述
• 适用场景
• 快速开始
• 参考指南
• 最佳实践

概述

视觉回归测试会捕获 UI 组件和页面的截图，然后跨版本进行比较，以检测意外的视觉变化。这种自动化方法能够发现传统功能测试无法检测到的 CSS 缺陷、布局问题和设计回归。

适用场景

• 检测 CSS 回归缺陷
• 验证不同视口下的响应式设计
• 跨不同浏览器进行测试
• 验证组件的视觉一致性
• 发现布局偏移和重叠问题
• 测试主题更改
• 验证设计系统组件
• 在 PR 中审查视觉变化

快速开始

最简可用示例：

// tests/visual/homepage.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Homepage Visual Tests", () => {
  test("homepage matches baseline", async ({ page }) => {
    await page.goto("/");

    // Wait for images to load
    await page.waitForLoadState("networkidle");

    // Full page screenshot
    await expect(page).toHaveScreenshot("homepage-full.png", {
      fullPage: true,
      maxDiffPixels: 100, // Allow small differences
    });
  });

  test("responsive design - mobile", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
    await page.goto("/");

    await expect(page).toHaveScreenshot("homepage-mobile.png");
  });

  test("responsive design - tablet", async ({ page }) => {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南	内容
Playwright Visual Testing	Playwright 视觉测试
Percy Visual Testing	Percy 视觉测试
Chromatic for Storybook	Storybook 的 Chromatic
Cypress Visual Testing	Cypress 视觉测试
BackstopJS Configuration	BackstopJS 配置
Handling Dynamic Content	处理动态内容
Testing Responsive Components	测试响应式组件

最佳实践

✅ 应该做

• 隐藏或模拟动态内容（时间戳、广告）
• 在多个视口下进行测试
• 等待动画结束并确保图片加载完成
• 使用一致的视口尺寸
• 截图时禁用动画
• 测试交互状态（悬停、焦点）
• 批准前仔细审查差异
• 在版本控制中存储基准图

❌ 不应该做

• 测试内容持续变化的页面
• 忽略合理的细微差异
• 跳过响应式测试
• 设计更改后忘记更新基准图
• 测试包含随机数据的页面
• 使用过于严格的阈值（0% 差异）
• 跳过浏览器和设备差异测试
• 提交未经批准的差异