我给自己的网站写了 31 个测试

改版改到第十几版的时候，出现了一个规律：每修好一处，就会弄坏另一处。

导航在小屏上被挤出去、图片没了页面塌掉、浅色主题下某个字看不见——这些问题都有一个共同点：在桌面浏览器里，用鼠标，正常字号，永远看不到。

所以我开始写测试。不是单元测试，是拿一个无头浏览器把页面打开，量它。

#工具

• pytest 组织用例
• playwright 开一个独立的无头 Chromium，不碰我日常用的浏览器
• 测试自己起一个 http.server，指向 public/，不访问线上

一条命令跑完：

pytest tests/ -q

#最有用的几项

横向溢出检查。遍历页面上所有可见元素，只要有一个伸出视口右边，就失败。装饰性的巨型描边字和跑马灯轨道会故意溢出，所以它们都标了 aria-hidden，检查时跳过。

200% 文字缩放。把所有元素的计算字号翻倍，再跑一遍溢出检查。WCAG 要求页面在 200% 缩放下仍然可用，这一项抓到的都是真问题。

关掉脚本。java_script_enabled=False 打开页面，断言正文、导航、展开说明都还在。渐进增强不是口号，关掉 JS 一眼就知道有没有做到。

图片加载失败。把所有图片请求中断，看布局会不会塌。

署名拼写。扫 public/ 下所有 HTML/CSS/JS，只允许 King0fLight、king0flight、KING0FLIGHT 三种写法。这条是因为 0 和 o 长得太像，被指出过两次。

内部文件不可访问。直接请求部署说明、博客源文件、测试文件，必须 404。

#两个测量上的坑

一、量 200% 缩放时不能边读边写。

我第一版是遍历元素，读到字号就乘二写回去。结果子元素继承了父元素放大后的值，逐层翻倍，最后量到 font-size: 4352px、整页两万多像素宽，差点以为页面真的坏了。

正确做法是两段式：先把所有元素的计算字号读进数组，再统一写入。

二、别把 Cloudflare 的 308 当成内容丢失。

Pages 会把 /*.html 重定向到去掉后缀的地址。用 curl 验证线上内容时如果不加 -L，拿到的是空响应体，很容易误判成"页面内容丢了"。测试里不涉及这一点，但线上排查时踩过一次。

#它到底拦住了什么

• 页头 fixed 加固定高度，在 320px + 200% 缩放下把主题按钮挤出屏幕——改成 sticky 后解决
• 首页标题的句点跑到了"光王"前面（遍历活的 childNodes、边删边加的经典错误）——这个不是测试抓到的，是自己看截图看出来的，也说明自动检查覆盖不到所有东西
• 新增页面忘了同步 ?v= 版本号——资源版本号是测试里写死的常量，忘了就红

#最后

31 项，40 秒。覆盖率谈不上，但它给了我一件事：改完敢按发布。

对一个一直在改的个人网站来说，这比多写几个功能重要。