用无头浏览器给自己写回归测试

CloudWing_X约 1 分钟

静态站改版最怕”改了一处、坏了三处”。截图肉眼看不可靠,所以我给站点配了一套基于 Chrome DevTools Protocol 的验证脚本,思路是把每条设计规格变成可执行的断言:

  • 几何断言优于肉眼:直接量元素的矩形,比较左右缘是否重合、两栏是否等高、有没有横向溢出(scrollWidth - clientWidth);
  • 对比度算真实合成色:渐变文字取所有停靠点里最差的那个,半透明文字先按 alpha 合成到底色再算;
  • 写新断言必须先证明”它在缺陷态下会红”——把出问题的样式注回去重跑,确认变红再删掉注入。否则就是一条恒真断言,绿灯给人假安心。

这套东西最大的收益不是省时间,是改版时心里有底:每条断言背后都是一个踩过的坑,绿灯全亮,说明那些坑没有复发。

规范地址