去年一个前端团队为排查按钮偏移2像素的问题，花了47小时。最后发现是Chrome更新导致的渲染差异——这种故事在视觉差分测试（VDT）领域每天都在上演。
VDT也叫视觉回归测试（VRT），核心逻辑简单粗暴：给UI截图，存下来，下次跑测试再截一张，两张图叠在一起找不同。听起来像找茬游戏，实际玩起来却像在开盲盒。
像素级对比：理想丰满，现实骨感
最常见的做法是逐像素比对。两张图叠在一起，透明度调低，差异区域会显出鬼影。或者直接用算法扫描每个像素点，记录RGB值偏差超过阈值的位置。
但CSS的渲染从来都不是确定性的。同一台机器，同一个浏览器版本，两次截图可能有0.3%的像素噪声。抗锯齿算法、子像素渲染、GPU加速的细微差异，都会让"完全一致"变成不可能任务。
于是工具厂商开始卷AI。用机器学习判断"这算不算真正的差异"，试图区分"按钮确实移位了"和"阴影渲染抖了一下"。但训练数据从哪里来？每个团队的UI风格不同，误报率依然居高不下。
一位从业8年的工程师直言：我们不是在测试视觉，是在和浏览器的渲染引擎赌博。
应用场景分裂：App团队vs网站团队
VDT的痛点还体现在需求分化上。
做应用（Application）的团队，对2像素偏移基本无感。他们更想要"冒烟测试"——确认页面没崩、核心流程能走通。比如防止某个全局样式意外把透明度设为0.6，导致整个界面变成幽灵模式。
做网站（Site）的团队则相反。营销页面对像素级还原有执念，品牌色偏了5%都可能触发返工。他们的测试覆盖整页截图，但这也意味着任何动态内容——日期、推荐算法、A/B测试桶——都会制造假阳性警报。
两种需求，同一套技术栈，工具厂商被迫做选择题。
维护成本：截图即债务
每个存下来的截图都是技术债务。设计系统迭代一次，几百张基准图集体作废。团队规模上去后，VDT的维护工时经常超过写新功能的工时。
有团队尝试过"智能忽略"策略：用DOM选择器标记动态区域，比对时跳过。但标记本身需要人工维护，新成员经常漏标，导致漏检真实bug。
更激进的方案是放弃像素比对，转向"结构比对"——提取元素的尺寸、位置、颜色值做对比。但这又绕回了CSS的复杂性：一个flex布局的微小调整，可能引发连锁位置变化，结构比对会报出一堆无关紧要的偏移。
工程师的终极困惑是：我们到底在防什么？是防视觉回归，还是防"我没意识到改了这里"？
工具生态：百花齐放，各怀鬼胎
开源工具从BackstopJS到Percy再到Playwright的内置方案，商业服务从Chromatic到Applitools，每家都在解决不同层面的问题。
BackstopJS免费但配置繁琐，Percy被BrowserStack收购后定价模糊，Chromatic绑定Storybook生态，Applitools的AI视觉网格贵到中小企业望而却步。没有银弹，只有权衡。
Playwright 1.40版本加入了实验性的"toHaveScreenshot"断言，试图用浏览器原生能力降低门槛。但社区反馈两极：有人称赞"终于不用配Docker了"，有人抱怨"截图稳定性还是不如Puppeteer时代"。
技术选型变成了一场宗教战争。选A的人嘲笑选B的人"还在用2018年的方案"，选B的人反击选A的人"被厂商锁死"。
如果视觉测试的终极形态不是截图比对，那应该是什么？组件级的设计令牌（Design Token）校验？渲染管道的确定性保证？还是干脆承认UI的视觉层本就不可测试，把资源投到人工走查流程的优化上？
热门跟贴