基础教程
视觉验收
用真实浏览器检查文档站的桌面端和移动端。
检查范围
网页改动至少检查：
- 桌面端首屏布局。
- 移动端导航、目录、按钮和代码块。
- 文本是否溢出。
- 卡片和按钮是否有明显拥挤或重叠。
- 关键路由是否返回 200。
推荐命令
npx playwright screenshot --viewport-size=1440,1200 http://127.0.0.1:3000/codex/model output/playwright/desktop.png
npx playwright screenshot --viewport-size=390,1200 http://127.0.0.1:3000/codex/model output/playwright/mobile.png
建议视口
| 视口 | 用途 |
|---|---|
1440x1200 | 检查桌面端左导航、正文和右 TOC 是否同时成立 |
390x1200 | 检查移动端标题、按钮、代码块和导航抽屉 |
1280x900 dark | 检查暗色模式背景、边框和图标对比度 |
判断方式
截图不是为了留档而已。要主动看导航、目录、标题、按钮、警告块和代码块是否在目标视口下都合理。
复查流程
- 先打开目标页面，确认不是 404 或服务错误。
- 截桌面、移动端和至少一个暗色模式页面。
- 打开截图看文字是否换行合理、按钮是否被挤压、卡片是否重叠。
- 修复后重新截图，不只依赖代码推断。
- 最后跑
pnpm check:routes确认新增页面都能访问。
记录格式
页面: /gallery/ops-debug
桌面截图: output/playwright/ops-debug-desktop.png
移动截图: output/playwright/ops-debug-mobile.png
结论: 无 404；标题、卡片、表格、按钮未溢出；暗色模式可读。
继续阅读
按当前页面继续跳到相关教程、评测、路线或 Gallery 示例。