## 静态网站的视觉回归测试 作者使用 Astro 和 MDX 构建静态网站,并在 CSS 更改后手动检查旧笔记,以确保没有意外的副作用。为了提高重构的信心,他们使用 Playwright 实现了视觉回归测试。 Playwright 自动化浏览器操作,拍摄指定页面的截图,并将其与“黄金”快照进行比较。超出设定的阈值的偏差会标记测试失败,从而提示修复或更新快照。这提供了与代码提交一起的历史站点外观记录。 实现过程包括初始化 Playwright 项目,并创建一个测试套件,该套件遍历笔记页面列表,完全滚动每个页面以加载延迟加载的图像,然后捕获全页截图进行比较。 作者优先考虑简单的流程,在可能产生重大影响的更改后手动运行测试,而不是在 CI/CD 中自动化。这种方法仅需几个小时的设置,但通过防止视觉回归并增强对站点修改的信心,增加了显著的价值。