browser-qa

浏览器 QA 技能

使用真实浏览器测试 Web 应用。找出用户会遇到的 bug。

适用场景

• 构建完前端功能后
• 为 UI 更改创建 PR 前
• 用户反馈“有些地方看起来坏了”时
• 部署后的冒烟测试

此技能的功能

1. 使用真实的 Chromium 启动 Playwright
2. 访问应用中所有可发现的页面
3. 检查控制台错误、网络故障和损坏的资源
4. 测试交互元素（表单、按钮、链接）
5. 验证移动端响应式表现
6. 生成结构化 QA 报告

QA 检查类别

1. 页面健康状况

每个页面都会进行以下检查：

• HTTP 状态码为 2xx
• 没有 JavaScript 控制台错误
• 没有失败的网络请求（4xx/5xx）
• 没有缺失的图片或资源
• 页面在 3 秒内加载完成

2. 布局与响应式表现

• 桌面端（1280px）：没有水平滚动条，没有元素重叠
• 移动端（375px）：没有水平滚动条，文本清晰可读，按钮可点击
• 没有内容意外被裁切或隐藏

3. 交互元素

• 按钮：点击 → 有相应操作（没有无响应的按钮）
• 链接：点击 → 跳转到有效页面（没有 404）
• 表单：提交空表单 → 显示验证信息。提交有效表单 → 显示成功反馈。
• 下拉菜单/模态框：打开 → 显示内容。关闭 → 隐藏内容。

4. 导航流程

• 导航栏中的每个链接都指向有效页面
• 后退按钮按预期工作
• 面包屑（如有）准确无误
• 身份验证重定向正常工作（受保护页面 → 登录 → 重定向回原页面）

5. 数据显示

• 列表显示数据（有数据时不会显示空状态）
• 分页正常工作（如有）
• 搜索/筛选会更新结果
• 获取数据期间显示加载状态
• API 失败时显示错误状态

Playwright 模式与报告模板

参阅 playwright-snippets.md，获取可直接使用的 Playwright 代码（页面测试、移动视口、表单测试、失败时截图）和 QA 报告模板。

注意事项

• 在使用 WebSocket 或轮询的应用中，networkidle 会一直等待。 如果应用有实时连接，请改用 domcontentloaded 或特定元素选择器。
• 对不可见元素调用 page.click() 也可能静默通过。 交互前务必确认元素可见。先使用 await expect(locator).toBeVisible()。
• 未模拟触摸操作的移动视口测试会漏掉真实 bug。 请在浏览器上下文中设置 hasTouch: true，而不只是调整视口尺寸。
• 控制台警告不等于控制台错误。 不要将 React hydration 警告或弃用提示报告为 bug。只有 console.error 和失败的网络请求才是 bug。
• CI 上的截图与本地截图可能不同。 macOS 和 Linux 的字体渲染、抗锯齿和 DPI 均有差异。请使用视觉比对阈值，而不是要求像素级完全匹配。

规则

• 只使用真实浏览器。 使用 Playwright + Chromium。不要只进行 HTTP 测试。
• 默认使用无头模式。 除非用户要求，否则不要打开可见窗口。
• 测试两种视口。 桌面端（1280px）和移动端（375px）。
• 控制台错误就是 bug。 务必报告。
• 单次运行模式。 启动浏览器、执行测试、关闭浏览器。不要运行守护进程。
• 对失败项截图。 出现问题时截图。
• 未经询问不要修复。 先报告，再提出修复方案。