1. 视觉回归测试（Visual Regression Testing）的核心原理，像素级对比 vs 感知对比（Perceptual Diff）的差异与适用场景？
问题
请说明视觉回归测试的核心原理，重点比较像素级对比（Pixel-based Diff）与感知对比（Perceptual Diff）两种方式的差异，并说明各自适用的场景？
考察点
- 像素级对比与感知对比的算法差异
- 两类对比方式的误报率与灵敏度表现
- 各自适用的场景与选型依据
答案
像素级对比（如 BackstopJS 默认策略、pixelmatch）逐像素比较两张截图的 RGB 值，量化"有多少像素发生了超过阈值的差异"，通过设置可接受的 diff 像素比例阈值来判定是否通过。它实现简单、速度快、结果直观，但极易受反锯齿、字体渲染、亚像素定位、轻微布局偏移等非功能性差异影响而产生大量误报。感知对比（Perceptual Diff，如 pdiff、Applitools 早期算法）则模拟人类视觉系统，通过高斯模糊、色彩空间转换（如 Lab 色彩空间）、亮度/对比度归一化等处理，忽略人眼难以察觉的微小差异，只对"明显可感知的变化"报错，从而显著降低误报率。适用场景上，像素级对比适合像素级精确、改动受控的静态页面（如设计稿核对、图表渲染），以及需要精确量化差异大小的地方；感知对比适合真实前端页面、字体渲染差异明显、需要减少人工筛选误报的回归场景。实践中常把两者结合：先用感知对比快速定位可感知差异，再用像素级对比定位具体坐标做精细分析。
解析
两种方式的核心分歧在于"差异的判定标准"——像素级以"数值是否变化"为准，感知级以"人眼是否察觉"为准。理解这一本质差异是做好视觉回归的前提，也是回答"如何减少误报"这一高频追问的基础。
示例代码
// BackstopJS 像素级对比：设置 diff 像素比例阈值
module.exports = {
id: 'ui_regression',
viewports: [{ name: 'desktop', width: 1280, height: 800 }],
scenarios: [
{ label: 'homepage', url: 'http://localhost:3000/', selectors: ['body'] }
],
// 允许的 diff 像素比例阈值，超过则判失败
misMatchThreshold: 0.1
};