Playwright MCP 调试中的截图对比

Playwright MCP（Multi-Component Playwright）提供了一套强大的工具来调试Web应用，其中截图对比是核心功能之一。通过对比不同版本的页面截图，可以快速识别UI变化或回归问题。

调用Playwright的截图API生成基线（baseline）和实际（actual）截图：

const { chromium } = require('playwright');

async function takeScreenshot(url, path) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path });
  await browser.close();
}

GitHub Copilot生成差异检测脚本

GitHub Copilot可以辅助生成基于像素比对的差异检测脚本。以下是一个典型实现方案：

const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');
const fs = require('fs');

async function compareScreenshots(baseline, actual, diffPath) {
  const img1 = PNG.sync.read(fs.readFileSync(baseline));
  const img2 = PNG.sync.read(fs.readFileSync(actual));
  const { width, height } = img1;
  const diff = new PNG({ width, height });

  const numDiffPixels = pixelmatch(
    img1.data,
    img2.data,
    diff.data,
    width,
    height,
    { threshold: 0.1 }
  );

  fs.writeFileSync(diffPath, PNG.sync.write(diff));
  return numDiffPixels / (width * height);
}

差异可视化与阈值设置

差异检测需要合理设置视觉容忍度阈值。推荐采用以下参数组合：

• 颜色容差：RGB差值范围0-255，建议初始值50
• 像素差异比例阈值：建议0.5%-1%作为初始基准
• 抗锯齿忽略：通过边缘检测算法过滤无关变化

视觉差异报告生成示例：

function generateReport(diffPercentage) {
  const status = diffPercentage > 0.5 ? '❌ Regression' : '✅ Approved';
  console.log(`${status} | Difference: ${(diffPercentage * 100).toFixed(2)}%`);
}

CI/CD流水线集成方案

将截图对比集成到自动化流程需要处理以下关键点：

• 基线图片版本管理（建议使用Git LFS）
• 动态分辨率适配（通过Playwright的viewport参数）
• 异步加载内容处理（添加page.waitForSelector确保稳定性）

典型配置示例：

# .github/workflows/visual-test.yml
jobs:
  visual-regression:
    steps:
      - uses: actions/checkout@v3
      - run: npm install playwright pixelmatch
      - run: node scripts/visual-test.js
      - name: Upload artifacts
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: visual-diffs
          path: test-results/diffs/

动态内容处理策略

对于包含动态内容（如时间戳、随机数据）的页面，可采用以下处理方式：

// 屏蔽动态元素
await page.evaluate(() => {
  document.querySelector('.timestamp').style.visibility = 'hidden';
});

// 或者使用正则匹配替换
await page.evaluate(() => {
  document.body.innerHTML = document.body.innerHTML
    .replace(/\d{2}:\d{2}:\d{2}/g, '##:##:##');
});

性能优化技巧

大规模截图对比时需注意：

• 并行执行多个Playwright实例（通过browserType.launchServer）
• 启用截图缓存（配置sameSite: 'Lax'避免重复渲染）
• 使用JPEG格式替代PNG（质量设置为80%时文件缩小60%）

配置示例：

await page.screenshot({
  path: 'test.jpg',
  type: 'jpeg',
  quality: 80,
  fullPage: true
});