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

阶段 2：交互测试

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

阶段 3：视觉回归

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

阶段 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 个阻塞项）

集成

可与任意浏览器 MCP 配合：

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

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

來源與署名

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

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

Unified Notifications Ops

affaan-m

設計統一的通知策略，對來自 GitHub、Linear、鉤子與聊天工具的通知進行分類、路由、去重與升級。

Productivity & Workflow275K4 天前更新

Verification Loop

affaan-m

執行六階段程式碼驗證流程，並產出 PASS/FAIL 就緒報告。

Software Development275K4 天前更新

Ui To Vue

affaan-m

將批次 UI 設計截圖轉換為使用 Vant、Element Plus 或 Ant Design Vue 的 Vue 3 元件。

Software Development275K4 天前更新

Unified Memory

affaan-m

指導代理透過本機 ECC Memory Vault 在不同執行框架之間共享持久脈絡與交接資訊。

AI & Agents275K4 天前更新

Visa Doc Translate

affaan-m

透過 OCR 將簽證文件影像翻譯成英文，並產出原圖與譯文對照的雙語 PDF。

Documents & Office275K4 天前更新

Team Builder

affaan-m

互動式挑選器：探索可用的代理角色，讓使用者最多選五個，平行執行同一任務並彙整結果。

AI & Agents275K4 天前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新