page-health-check

页面健康检查 SOP

给一个 URL，用 Cursor 内置浏览器完成完整体检。能修的当场修，不能修的列清单。

流程

打开页面 → 截屏 → 交互探索 → 逐项审查(数据/视觉/控制台/性能) → 修复 → 再验证

最多 3 轮修复循环。每轮修复后重新截图验证。

---

Step 1: 截屏

打开目标 URL，等待渲染完成（至少 2s），先 snapshot 获取 DOM 结构，再 fullPage 截图。内部滚动容器截不全时分段滚动截图。

---

Step 2: 交互探索

点击页面内的交互元素，暴露子视图和弹窗，确保所有可达视图都被检查到。

安全分类：

级别	举例	操作
安全	Tab 切换、折叠展开、筛选、排序、分页、查看详情、搜索	放心点
只读弹窗	新增按钮、编辑按钮	打开看布局就关闭，不提交
危险	删除、禁用开关、审批、确认提交	不点

去重：同类重复元素只点一个代表（如表格每行的编辑按钮只点第一行）。

顺序：Tab/分段器 → 筛选/搜索 → 查看/编辑弹窗 → 新增弹窗 → 展开折叠。每步截图，对新视图同样执行后续审查。

不做的事：不切换导航、不提交表单、不点删除、不做破坏性测试。

---

Step 3: 逐项审查

对主页面及交互探索中暴露的每个视图，逐一检查以下维度。不打分，只找问题。

3.1 数据正确性（P0 优先级）

乱码 — 观察截图和 DOM 文本中是否有 �、锟斤拷、â€"、???、□□□、emoji 异常等。可通过 browser_snapshot 获取 DOM 文本后检测。常见原因：charset 未声明、数据库连接字符集不匹配、utf8 应升级 utf8mb4。

模拟数据 — 疑似特征：规律姓名（张三李四）、整齐数字（100/200）、不合理时间、Lorem ipsum、占位图、虚假联系方式（13800138000）、数据量太规律。同时检查网络请求是否指向 mock 服务。

异常空数据 — 空表格、全零统计、空下拉选项、全空详情页。空数据大概率是 bug，排查路径：前端是否发请求 → API 是否正常返回 → 查询参数是否正确 → 数据库是否有数据。即使确认真无数据，也要确保空状态 UI 友好。

3.2 视觉与交互

整体视觉 — 关注：色彩是否统一、排版层次是否清晰、间距是否一致、对齐是否规整、信息密度是否适中、视觉焦点是否明确。

交互反馈 — 关注：hover 是否有反馈、状态切换是否有过渡动效、数据加载是否有 loading/skeleton、空状态 UI 是否友好、长文本是否正确 ellipsis/换行。

组件一致性 — 关注：按钮主次是否分明、表格表头是否固定且列宽合理、表单标签是否对齐、卡片圆角阴影是否统一、弹窗尺寸是否适中、图标风格是否统一。

3.3 控制台

获取控制台消息。error 判断是否为业务错误（排除 Permissions-Policy 等环境噪音），忽略 [CursorBrowser] 前缀消息。

3.4 性能与响应速度

API 响应 — 从网络请求分析耗时：< 300ms 正常，300ms-1s 记录，1-3s 需优化（应有 loading），> 3s 必须优化。慢接口用 curl 测 TTFB，TTFB > 600ms 需排查后端。

前端加载 — 通过 Performance API 获取 FCP（< 1s 优秀 / > 2.5s 需优化）、Page Load（< 3s 优秀 / > 6s 需优化）。

体感 — 首屏 1s 内应可见主要内容、切换筛选 < 500ms、翻页应有 loading、弹窗应立即弹出。

---

Step 4: 修复

优先级

1. P0 — 白屏、JS 报错不可用、乱码、模拟数据残留、异常空数据
2. P0.5 — 接口 > 3s、页面加载 > 6s、操作无响应
3. P1 — 布局错乱、文字溢出、元素重叠
4. P1.5 — 接口 1-3s、缺 loading 状态
5. P2 — 缺 hover 反馈、间距不一致、色彩不统一
6. P3 — 过渡动效、微交互美化

默认行为：直接修

发现问题就修，不要只列清单。agent 做检查的价值就是修完交付，不是当 QA 提工单。