About this skill
This skill empowers AI agents to perform comprehensive automated visual testing and UI interaction verification for web applications post-deployment. Leveraging advanced browser automation tools such as Claude-in-Chrome, Playwright, or Puppeteer, it meticulously simulates a real user's journey through live web pages. The process encompasses a critical 'Smoke Test' phase to immediately identify show-stopping issues like console errors, broken network requests, and basic functionality failures. Following this, the skill conducts in-depth verification of UI behavior, layout consistency across various pages, and functional interactions (e.g., form submissions, button clicks). Originating from the 'everything-claude-code' repository, this skill adheres to production-grade engineering patterns, providing a robust solution for quality assurance in software development.
Best use case
Ensuring the quality, consistency, and correctness of newly deployed web features across different environments (e.g., staging, preview) before release. It's ideal for validating UI integrity, functional responsiveness, and visual consistency against expected behaviors.
## When to use
A detailed report outlining the status of UI elements, visual consistency, and functional interactions of a deployed web feature. The report highlights any detected console errors, failed network requests, visual regressions, unexpected UI behaviors, or broken interactions. This enables rapid identification and remediation of issues, ensuring a high-quality release.
Practical example
Example input
```json
{
"target_url": "https://staging.yourproduct.com/new-dashboard",
"interaction_flow": [
{"action": "navigate", "url": "/login"},
{"action": "type", "selector": "#email", "value": "test@example.com"},
{"action": "type", "selector": "#password", "value": "SecurePass123!"},
{"action": "click", "selector": "#loginButton"},
{"action": "wait_for_selector", "selector": "#dashboardHeader", "timeout": 5000},
{"action": "assert_text_visible", "text": "Welcome to your Dashboard"},
{"action": "screenshot", "name": "dashboard_overview"},
{"action": "click", "selector": "a[href='/settings']"},
{"action": "assert_element_visible", "selector": "#profileSettingsForm"}
],
"visual_regression_check_areas": [
{"selector": ".header-nav"},
{"selector": ".main-content"}
],
"responsive_breakpoints": ["mobile", "tablet"]
}
```Example output
```json
{
"test_run_id": "qa-report-20231027-001",
"status": "COMPLETED_WITH_WARNINGS",
"summary": "Automated browser QA for https://staging.yourproduct.com/new-dashboard completed. Found 1 warning.",
"results": {
"smoke_test": {
"status": "PASSED",
"console_errors_detected": [],
"network_errors_detected": []
},
"interaction_flow_verification": {
"status": "PASSED_WITH_WARNINGS",
"total_steps": 7,
"failed_steps": [
{
"step": "assert_text_visible: Welcome to your Dashboard",
"reason": "Expected text 'Welcome to your Dashboard' not found. Actual text: 'Welcome, User!'",
"screenshot_path": "./reports/qa-report-20231027-001/dashboard_overview_diff.png"
}
],
"screenshots_generated": [
"./reports/qa-report-20231027-001/dashboard_overview.png"
]
},
"visual_regression_analysis": {
"status": "PASSED",
"diffs_found": []
},
"responsive_testing": {
"mobile": "PASSED",
"tablet": "PASSED"
}
},
"report_url": "https://yourci.com/qa-reports/qa-report-20231027-001.html",
"timestamp": "2023-10-27T10:30:00Z"
}
```When to use this skill
- After deploying a feature to staging/preview environments.
- When you need to verify UI behavior across multiple pages or complex user flows.
- Before shipping to production, to confirm layouts, forms, and key interactions function as expected.
- During the review of pull requests (PRs) that involve frontend code changes.
When not to use this skill
- For backend-only testing (e.g., API unit tests, database integrity checks) where no user interface is involved.
- As the primary tool for detailed performance load testing or stress testing, although it can highlight immediate performance bottlenecks.
- For highly subjective user experience (UX) evaluations that require deep human cognitive assessment beyond automated visual and functional checks.
- When browser automation tools are not compatible or practical within your deployment pipeline.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/browser-qa/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How browser-qa Compares
| Feature / Agent | browser-qa | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | medium | N/A |
Frequently Asked Questions
What does this skill do?
## When to use
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as medium. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# Browser QA — 自动化视觉测试与交互验证 ## When to use - 功能部署到 staging / preview 之后 - 需要验证跨页面的 UI 行为时 - 发布前确认布局、表单和交互是否真的可用 - 审查涉及前端改动的 PR 时 - 做可访问性审计和响应式测试时 ## How it works 使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer），像真实用户一样与线上页面交互。 ### 阶段 1：冒烟测试 ``` 1. 打开目标 URL 2. 检查控制台错误（过滤噪声：分析脚本、第三方库） 3. 验证网络请求中没有 4xx / 5xx 4. 在桌面和移动端视口截图首屏内容 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` 搭配用于发布后的持续监控。
Related Skills
workspace-surface-audit
Audit the active repo, MCP servers, plugins, connectors, env surfaces, and harness setup, then recommend the highest-value ECC-native skills, hooks, agents, and operator workflows. Use when the user wants help setting up Claude Code or understanding what capabilities are actually available in their environment.
safety-guard
Use this skill to prevent destructive operations when working on production systems or running agents autonomously.
repo-scan
Cross-stack source code asset audit — classifies every file, detects embedded third-party libraries, and delivers actionable four-level verdicts per module with interactive HTML reports.
project-flow-ops
Operate execution flow across GitHub and Linear by triaging issues and pull requests, linking active work, and keeping GitHub public-facing while Linear remains the internal execution layer. Use when the user wants backlog control, PR triage, or GitHub-to-Linear coordination.
manim-video
Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.
laravel-plugin-discovery
Discover and evaluate Laravel packages via LaraPlugins.io MCP. Use when the user wants to find plugins, check package health, or assess Laravel/PHP compatibility.
design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
click-path-audit
Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state. Use when: systematic debugging found no bugs but users report broken buttons, or after any major refactor touching shared state stores.
ck
Persistent per-project memory for Claude Code. Auto-loads project context on session start, tracks sessions with git activity, and writes to native memory. Commands run deterministic Node.js scripts — behavior is consistent across model versions.
canary-watch
Use this skill to monitor a deployed URL for regressions after deploys, merges, or dependency upgrades.
benchmark
Use this skill to measure performance baselines, detect regressions before/after PRs, and compare stack alternatives.
swiftui-patterns
SwiftUI 架构模式，使用 @Observable 进行状态管理，视图组合，导航，性能优化，以及现代 iOS/macOS UI 最佳实践。