affaan-m/browser-qa

使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer）运行自动化的部署后 UI 验证：控制台错误和 Core Web Vitals 冒烟检查、表单和鉴权流程的交互测试、三种断点下的截图视觉回归以及 axe-core 可访问性审计，最终给出 SHIP / DO-NOT-SHIP 判定。在测试已部署到 staging 或 preview 的功能、上线前端变更之前、评审前端 PR，或检查响应式布局和可访问性时使用。

流程自动化开发 Agent Agent 技能 MCP 集成写测试调研浏览器自动化视觉回归测试 UI 交互验证无障碍审计响应式布局校验前端部署验证

26万+许可证: MIT开发者: affaan-m

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

Browser QA — Automated Visual Testing & Interaction

When to Use

After deploying a feature to staging/preview
When you need to verify UI behavior across pages
Before shipping — confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.

Safety first — blast radius (run read-only by default)

Browser QA drives real auth and real user journeys, so treat the blast radius explicitly. Default to read-only: never run a mutating journey (checkout, payment, delete, mass-update) against a production URL — require an explicit opt-in and a staging/preview URL. Use seeded test credentials, never real production logins, and redact credentials/tokens/PII before saving any screenshot.

Phase 1: Smoke Test

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, C…

以下为摘要预览，完整内容请查看 GitHub 原文。

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

适用场景

在将功能部署到 staging/preview 之后
当你需要跨页面验证 UI 行为时
上线之前 —— 确认布局、表单、交互确实可用
评审涉及前端代码的 PR 时
可访问性审计与响应式测试

工作原理

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

安全优先 —— 影响范围（默认以只读方式运行）

Browser QA 会驱动真实的鉴权和真实的用户旅程，因此必须明确对待其影响范围。默认采用只读：绝不要对生产 URL 运行 变更型 旅程（结账、支付、删除、批量更新）—— 必须获得显式确认并且只能针对 staging/preview URL 使用。使用预置的 测试凭据，绝不使用真实的生产登录信息，并在保存任何截图前脱敏凭据 / token / 个人身份信息。

阶段 1：冒烟测试

1. 导航到目标 URL
2. 检查控制台错误（过滤噪音：分析、第三方）
3. 确认网络请求中没有 4xx/5xx
4. 在桌面端 + 移动端视口下对首屏进行截图
5. 检查 Core Web Vitals：LCP < 2.5s，CLS < 0.1，INP < 200ms
   （INP 于 2024 年 3 月取代 FID；阈值依据 web.dev）

阶段 2：交互测试

1. 点击每一个导航链接 —— 确认没有死链
2. 提交有效数据的表单 —— 确认成功状态
3. 提交无效数据的表单 —— 确认错误状态
4. 测试鉴权流程：登录 → 受保护页面 → 登出（仅使用测试凭据，绝不用生产凭据）
5. 测试关键用户旅程（结账、引导、搜索）
   —— 默认只读；仅在获得显式确认并针对 staging 时才执行变更型旅程
     （参见上文“安全优先”）

阶段 3：视觉回归

1. 在 3 个断点（375px、768px、1440px）下对关键页面截图
2. 与已提交的基线截图进行比较
   —— 没有基线 ⇒ 报告 INCONCLUSIVE，绝不能静默地标记为 PASS
3. 标记 > 5px 的布局偏移、缺失的元素、溢出
4. 如适用，检查暗色模式

阶段 4：可访问性

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

注意：axe-core 自动覆盖大约 30–40% 的 WCAG。干净的扫描结果是 **必…

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 9/29/2026, 6:36:23 PMGitHub ↗

SKILL.md4.0 KB在 GitHub 查看 ↗

相关资源

按类型、任务、场景与标签加权推荐

A complete ARIX SEO Tool for Chrome

Chrome扩展 · SEO工具 · Manifest · V3 · Vercel代理 · 提示词 · SEO · API

请扮演一名专业的 Chrome 扩展开发者（Manifest V3）与后端工程师。

technical-whitepaper-writer

白皮书撰写 · 技术文档 · Prompt · 长文写作 · 工程论证

写出一份读起来像工程与技术研究的文档，而不是销售宣传册

options-strategy

编程协作 · 期权定价分析 · 期权风险指标分析 · 多腿策略回测 · 加密资产期权 · 股票期权研究 · 波动率交易

期权策略框架，支持 Black-Scholes 定价、Greeks 分析以及多腿组合回测。适用于加密货币与股票期权。

3.2万+

Floot MCP

AI应用生成 · 全栈开发 · MCP集成 · 无代码 · 自动化构建

将 Floot 与 Claude 和 ChatGPT 连接起来，这样你就可以在你常用的聊天工具中描述一个应用，并获得一个包含数据库、用户登录和实时 URL 的完整栈应用

AINA

AI智能体 · MCP · 开发工具 · 代码助手

人工智能职业教练，它通过与视频虚拟形象的对话，帮助你了解求职过程中遇到的阻碍，优化你的个人资料，并进行面试练习。与 AINA 对话，即可获得一份个性化的行动计划，助你规划职业生涯的下一步。

Clueso MCP

MCP · 模型上下文协议 · AI集成 · 开发工具 · 大模型连接

它能在几分钟内将原始屏幕录制内容转换为专业级视频和分步教程文章。无需任何剪辑或设计技能。