---
id: daily-browser-qa
name: "browser-qa"
url: https://skills.yangsir.net/skill/daily-browser-qa
author: affaan-m
domain: testing
tags: ["browser-automation", "visual-testing", "qa", "test-automation", "ui-testing"]
install_count: 5000
rating: 4.40 (20 reviews)
github: https://github.com/affaan-m/everything-claude-code
---

# browser-qa

> 自动化浏览器视觉测试和交互验证，确保 UI 布局、表单和交互在不同页面正常工作

**Stats**: 5,000 installs · 4.4/5 (20 reviews)

## Before / After 对比

### 回归测试

**Before**:

QA 手动测试每个页面的表单提交、按钮点击、布局响应，一个 10 页应用需要 2-3 小时，容易遗漏边缘情况

**After**:

自动化脚本遍历所有用户路径，捕获视觉差异和交互错误，15 分钟完成测试并生成带截图的失败报告

| Metric | Before | After | Change |
|---|---|---|---|
| 测试时间 | 180分钟 | 15分钟 | -92% |

## Readme

# browser-qa

# 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.

### 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, CLS < 0.1, INP < 200ms

```

### Phase 2: Interaction Test

```
1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout
5. Test critical user journeys (checkout, onboarding, search)

```

### Phase 3: Visual Regression

```
1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

```

### Phase 4: Accessibility

```
1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

```

## Output Format

```
## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

```

## Integration

Works with any browser MCP:

- `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome)

- Playwright via `mcp__browserbase__*`

- Direct Puppeteer scripts

Pair with `/canary-watch` for post-deploy monitoring.
Weekly Installs536Repository[affaan-m/everyt…ude-code](https://github.com/affaan-m/everything-claude-code)GitHub Stars144.9KFirst Seen10 days agoSecurity Audits[Gen Agent Trust HubPass](/affaan-m/everything-claude-code/browser-qa/security/agent-trust-hub)[SocketPass](/affaan-m/everything-claude-code/browser-qa/security/socket)[SnykWarn](/affaan-m/everything-claude-code/browser-qa/security/snyk)Installed oncodex501opencode479cursor474antigravity473github-copilot473gemini-cli472

---
*Source: https://skills.yangsir.net/skill/daily-browser-qa*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-browser-qa/markdown*