Browser Qa

affaan-m/ECC/docs/zh-CN/skills/browser-qa

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775无许可证275K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库4天前更新

Automate visual testing and UI interaction verification using browser automation after deployment.

仅含说明Software Development

AI 生成的概览

自动化部署后的浏览器 QA：冒烟测试、UI 交互验证、视觉回归与可访问性审计。

功能: 引导智能体对已部署页面执行四个浏览器自动化 QA 阶段：冒烟测试（控制台错误、失败请求、Core Web Vitals、截图）、交互测试（导航链接、表单成功与错误态、认证流程、关键用户路径）、三个断点的视觉回归，以及使用 axe-core 或同类工具的可访问性检查。最终产出包含各环节发现与发布结论的结构化 QA 报告。
适用场景: 适用于部署到 staging 或预览环境之后、需要验证跨页面 UI 行为时、发布前确认布局、表单与交互是否可用时、审查前端改动 PR 时，以及进行可访问性与响应式测试时。
运行要求: 需要浏览器自动化 MCP（如 claude-in-chrome、通过 browserbase 使用 Playwright，或 Puppeteer），并能访问目标 URL 的网络。可访问性检查需要 axe-core 或同类工具。该技能不附带脚本，仅为说明文档。

Browser QA — 自动化视觉测试与交互验证

When to use

功能部署到 staging / preview 之后
需要验证跨页面的 UI 行为时
发布前确认布局、表单和交互是否真的可用
审查涉及前端改动的 PR 时
做可访问性审计和响应式测试时

How it works

使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer），像真实用户一样与线上页面交互。

阶段 1：冒烟测试

1. 打开目标 URL2. 检查控制台错误（过滤噪声：分析脚本、第三方库）3. 验证网络请求中没有 4xx / 5xx4. 在桌面和移动端视口截图首屏内容5. 检查 Core Web Vitals：LCP < 2.5s，CLS < 0.1，INP < 200ms

1. 打开目标 URL2. 检查控制台错误（过滤噪声：分析脚本、第三方库）3. 验证网络请求中没有 4xx / 5xx4. 在桌面和移动端视口截图首屏内容5. 检查 Core Web Vitals：LCP < 2.5s，CLS < 0.1，INP < 200ms

阶段 2：交互测试

1. 点击所有导航链接，验证没有死链2. 使用有效数据提交表单，验证成功态3. 使用无效数据提交表单，验证错误态4. 测试认证流程：登录 → 受保护页面 → 登出5. 测试关键用户路径（结账、引导、搜索）

1. 点击所有导航链接，验证没有死链2. 使用有效数据提交表单，验证成功态3. 使用无效数据提交表单，验证错误态4. 测试认证流程：登录 → 受保护页面 → 登出5. 测试关键用户路径（结账、引导、搜索）

阶段 3：视觉回归

1. 在 3 个断点（375px、768px、1440px）对关键页面截图2. 与基线截图对比（如果已保存）3. 标记 > 5px 的布局偏移、缺失元素、内容溢出4. 如适用，检查暗色模式

1. 在 3 个断点（375px、768px、1440px）对关键页面截图2. 与基线截图对比（如果已保存）3. 标记 > 5px 的布局偏移、缺失元素、内容溢出4. 如适用，检查暗色模式

阶段 4：可访问性

1. 在每个页面运行 axe-core 或等价工具2. 标记 WCAG AA 违规（对比度、标签、焦点顺序）3. 验证键盘导航可以端到端工作4. 检查屏幕阅读器地标

1. 在每个页面运行 axe-core 或等价工具2. 标记 WCAG AA 违规（对比度、标签、焦点顺序）3. 验证键盘导航可以端到端工作4. 检查屏幕阅读器地标

Examples

markdown

## QA 报告 — [URL] — [timestamp]
### 冒烟测试- 控制台错误：0 个严重错误，2 个警告（分析脚本噪声）- 网络：全部 200/304，无失败请求- Core Web Vitals：LCP 1.2s，CLS 0.02，INP 89ms
### 交互- [done] 导航链接：12/12 正常- [issue] 联系表单：无效邮箱缺少错误态- [done] 认证流程：登录 / 登出正常
### 视觉- [issue] Hero 区域在 375px 视口下溢出- [done] 暗色模式：所有页面一致
### 可访问性- 2 个 AA 级违规：Hero 图片缺少 alt 文本，页脚链接对比度过低
### 结论：修复后可发布（2 个问题，0 个阻塞项）

## QA 报告 — [URL] — [timestamp]
### 冒烟测试- 控制台错误：0 个严重错误，2 个警告（分析脚本噪声）- 网络：全部 200/304，无失败请求- Core Web Vitals：LCP 1.2s，CLS 0.02，INP 89ms
### 交互- [done] 导航链接：12/12 正常- [issue] 联系表单：无效邮箱缺少错误态- [done] 认证流程：登录 / 登出正常
### 视觉- [issue] Hero 区域在 375px 视口下溢出- [done] 暗色模式：所有页面一致
### 可访问性- 2 个 AA 级违规：Hero 图片缺少 alt 文本，页脚链接对比度过低
### 结论：修复后可发布（2 个问题，0 个阻塞项）

集成

可与任意浏览器 MCP 配合：

mChild__claude-in-chrome__* 工具（推荐，直接使用你的真实 Chrome）
通过 mcp__browserbase__* 使用 Playwright
直接运行 Puppeteer 脚本

可与 /canary-watch 搭配用于发布后的持续监控。

来源与署名

来源：affaan-m/ECC位于docs/zh-CN/skills/browser-qa提交ef648e0

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Browser Qa

Browser QA — 自动化视觉测试与交互验证

When to use

How it works

阶段 1：冒烟测试

阶段 2：交互测试

阶段 3：视觉回归

阶段 4：可访问性

Examples

集成

来源与署名

更多来自 affaan-m/ECC 的技能

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices