QA Browser Automation
The agent drives Chrome MCP for live browser testing and uses four Python tools for deterministic health scoring, accessibility auditing, visual regression tracking, and report generation.
Clarify First
Before the QA sweep, confirm these inputs. If any is unknown or vague, ASK — do not assume:
Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.
Quick Start
# Score QA findings (0-100 weighted across 10 categories)
python scripts/qa_health_scorer.py findings.json --threshold 85 --baseline .qa-baselines/latest.json --save-baseline --json
# Audit HTML for WCAG 2.1 violations
python scripts/accessibility_auditor.py page.html --level AA --json
# Track visual regressions
python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
python scripts/visual_regression_tracker.py --register ./baselines
python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5
# Generate full QA report
python scripts/test_report_generator.py session_data.json --format markdown -o report.md
Tools Overview
| Tool |
Input |
Output |
qa_health_scorer.py |
Findings JSON |
Score 0-100, grade A-F, category breakdown, trend data |
accessibility_auditor.py |
HTML file (or stdin) |
WCAG violations by level with remediation guidance |
visual_regression_tracker.py |
Baseline + current screenshot dirs |
Pass/fail per page, change percentages |
test_report_generator.py |
Session data JSON |
Markdown or JSON report with recommendations |
All tools support --json for machine output. Health scorer and regression tracker return exit code 1 on failure (CI-friendly).
Workflow 1: Full Application QA Sweep (11 Phases)
Phase 1-2: Pre-flight and authentication.
- Verify
git status is clean. Abort if dirty.
- Create session directory:
.qa-sessions/{timestamp}/
- Authenticate via Chrome MCP if needed.
Phase 3-4: Orient and explore.
- Use
mcp__claude-in-chrome__read_page to build sitemap/page map.
- Navigate each route. Check
read_console_messages for errors, read_network_requests for 4xx/5xx.
- Test all forms with valid data, empty submissions, and boundary values.
Phase 5: State testing.
- Verify loading states (skeleton screens, not blank), empty states (guides to first action), error states, success states, partial states.
- Four shadow paths per interaction: happy path, nil input, empty input, error upstream.
Phase 6: Cross-device and security.
- Resize to 320px, 768px, 1024px, 1440px, 1920px.
- Check touch targets (44x44px min), layout shifts.
- Verify security headers (CSP, HSTS, X-Frame-Options), cookie flags.
Phase 7-8: Document and score.
- Record every finding with screenshot evidence. No finding without evidence.
- Classify by severity (P0-P4) and category (10 categories).
- Run:
python scripts/qa_health_scorer.py findings.json --baseline .qa-baselines/latest.json
Phase 9: Triage and fix loop.
- P3/P4: AUTO-FIX, commit atomically, verify.
- P0/P1/P2: ASK, present evidence, propose fix, wait for approval.
- After each fix: re-run check. If fail:
git revert.
- Hard stop at 50 fixes.
Phase 10-11: Regression check and report.
- Re-visit fixed pages. Verify no new errors.
- Generate report:
python scripts/test_report_generator.py session.json --save-baseline
Validation checkpoint: Health score >= 85. Zero P0 findings. WCAG AA >= 95%.
Workflow 2: Visual Regression Testing
# Set up baseline
python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
# Capture and register screenshots
python scripts/visual_regression_tracker.py --register ./baselines
# After changes, compare
python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5 --json
# Accept intentional changes
python scripts/visual_regression_tracker.py --update-baseline --baseline ./baselines --current ./screenshots
Pages exceeding the threshold (default 5%) are flagged as regressions. Uses SHA-256 hashing and byte-level comparison.
Workflow 3: Accessibility Audit
python scripts/accessibility_auditor.py page.html --level AA --json
curl -s https://example.com | python scripts/accessibility_auditor.py - --level AAA
What gets checked by level:
- A (Must Fix): Alt text, page language, form labels, headings, duplicate IDs, autoplay media
- AA (Should Fix): Color contrast (4.5:1 text, 3:1 large), heading hierarchy, focus visible, error identification
- AAA (Nice to Have): Enhanced contrast (7:1), extended audio, reading level
Each violation includes: WCAG criterion, severity, element selector, and remediation guidance.
Testing Tiers
| Tier |
Duration |
Scope |
| Quick |
30s |
Console errors, broken links, basic a11y, mobile resize |
| Standard |
2-5 min |
+ Top 10 routes, forms, contrast, Core Web Vitals |
| Deep |
10-20 min |
+ Full sitemap, state testing, WCAG AA, performance, visual regression, security headers |
| Exhaustive |
30+ min |
+ Every element, WCAG AAA, all pages performance, 5 breakpoints, auth edge cases, memory leaks |
Health Scoring System
10 weighted categories, score 0-100:
| Category |
Weight |
Measures |
| Functional |
18% |
Forms, CRUD, navigation flows |
| Accessibility |
13% |
WCAG compliance, keyboard nav |
| Console Errors |
12% |
JS errors, unhandled rejections |
| UX Flow |
12% |
Logical navigation, clear feedback |
| Performance |
12% |
Core Web Vitals within thresholds |
| Visual Consistency |
10% |
Layout shifts, alignment, z-index |
| Broken Links |
8% |
HTTP 4xx/5xx, dead anchors |
| Content Quality |
5% |
Spelling, placeholder text, truncation |
| Security Headers |
5% |
CSP, HSTS, cookie flags |
| Mobile Responsive |
5% |
Breakpoints, touch targets, no h-scroll |
Severity deductions: P0: -30, P1: -18, P2: -10, P3: -4, P4: -1.
Grades: A (90-100), B (80-89), C (70-79), D (60-69), F (0-59).
Safety Controls
- Clean working tree required -- abort if
git status dirty.
- Max 50 fixes per session -- hard stop.
- Risk accumulator -- component (+5), style (+2), config (+8), revert (+15). Stop at 25% of budget.
- WTF heuristic -- 3 consecutive fix verification failures = stop entirely.
- Atomic commits -- one fix = one commit:
fix(qa): [P{severity}] {description}
Troubleshooting
| Problem |
Cause |
Solution |
| Scorer exits code 1 with no errors |
Score below --threshold (default 70) |
Check score in output; raise threshold or fix findings |
Auditor reports parse-error |
Malformed HTML |
Verify file is complete; check curl is not returning redirect |
| Regression tracker 100% change on all pages |
Baseline manifest empty |
Run --init then --register before comparing |
| Findings default to P3/functional |
Missing severity or category keys |
Include both keys in each finding dict |
| Chrome MCP returns stale content after SPA nav |
DOM updated without full page load |
Wait for transition, call read_page again |
References
| Guide |
Path |
| Browser Testing Methodology |
references/browser_testing_methodology.md |
| WCAG Compliance Guide |
references/wcag_compliance_guide.md |
| Performance Benchmarks |
references/performance_benchmarks.md |
Integration Points
| Skill |
Integration |
code-reviewer |
Health score and findings in PR review context |
senior-frontend |
Visual regression baselines align with component library |
senior-devops |
Health score gates CI/CD via exit code |
senior-secops |
Security header findings escalate to security review |
incident-commander |
P0 findings trigger incident response |
Last Updated: April 2026
Version: 2.1.0
1---
2name: qa-browser-automation
3description: >
4 Browser-based QA combining Chrome MCP control with Python analysis tools. Use when
5 performing browser QA testing, visual regression tracking, WCAG accessibility auditing,
6 performance profiling, or health-scoring web applications.
7license: MIT + Commons Clause
8metadata:
9 version: 2.1.0
10 author: borghei
11 category: engineering
12 domain: quality-assurance
13 updated: 2026-04-02
14 tags: [browser-qa, wcag, visual-regression, health-scoring]
15 python-tools: qa_health_scorer.py, accessibility_auditor.py, visual_regression_tracker.py, test_report_generator.py
16 tech-stack: python, chrome-mcp, accessibility, wcag, performance
17---
18
19# QA Browser Automation
20
21The agent drives Chrome MCP for live browser testing and uses four Python tools for deterministic health scoring, accessibility auditing, visual regression tracking, and report generation.
22
23---
24
25## Clarify First
26
27Before the QA sweep, confirm these inputs. If any is unknown or vague, ASK — do not assume:
28
29- [ ] **Target URL/app + auth** — what to test and how to log in (the subject of the entire sweep)
30- [ ] **Testing tier** — Quick / Standard / Deep / Exhaustive (sets scope, breakpoints, and duration)
31- [ ] **Fix autonomy** — auto-fix P3/P4 and commit, vs report-only / ask before any code change (changes whether the working tree is modified)
32- [ ] **WCAG target level** — A / AA / AAA (sets the accessibility pass bar)
33
34Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.
35
36## Quick Start
37
38```bash
39# Score QA findings (0-100 weighted across 10 categories)
40python scripts/qa_health_scorer.py findings.json --threshold 85 --baseline .qa-baselines/latest.json --save-baseline --json
41
42# Audit HTML for WCAG 2.1 violations
43python scripts/accessibility_auditor.py page.html --level AA --json
44
45# Track visual regressions
46python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
47python scripts/visual_regression_tracker.py --register ./baselines
48python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5
49
50# Generate full QA report
51python scripts/test_report_generator.py session_data.json --format markdown -o report.md
52```
53
54## Tools Overview
55
56| Tool | Input | Output |
57|------|-------|--------|
58| `qa_health_scorer.py` | Findings JSON | Score 0-100, grade A-F, category breakdown, trend data |
59| `accessibility_auditor.py` | HTML file (or stdin) | WCAG violations by level with remediation guidance |
60| `visual_regression_tracker.py` | Baseline + current screenshot dirs | Pass/fail per page, change percentages |
61| `test_report_generator.py` | Session data JSON | Markdown or JSON report with recommendations |
62
63All tools support `--json` for machine output. Health scorer and regression tracker return exit code 1 on failure (CI-friendly).
64
65---
66
67## Workflow 1: Full Application QA Sweep (11 Phases)
68
69**Phase 1-2: Pre-flight and authentication.**
70- Verify `git status` is clean. Abort if dirty.
71- Create session directory: `.qa-sessions/{timestamp}/`
72- Authenticate via Chrome MCP if needed.
73
74**Phase 3-4: Orient and explore.**
75- Use `mcp__claude-in-chrome__read_page` to build sitemap/page map.
76- Navigate each route. Check `read_console_messages` for errors, `read_network_requests` for 4xx/5xx.
77- Test all forms with valid data, empty submissions, and boundary values.
78
79**Phase 5: State testing.**
80- Verify loading states (skeleton screens, not blank), empty states (guides to first action), error states, success states, partial states.
81- **Four shadow paths per interaction:** happy path, nil input, empty input, error upstream.
82
83**Phase 6: Cross-device and security.**
84- Resize to 320px, 768px, 1024px, 1440px, 1920px.
85- Check touch targets (44x44px min), layout shifts.
86- Verify security headers (CSP, HSTS, X-Frame-Options), cookie flags.
87
88**Phase 7-8: Document and score.**
89- Record every finding with screenshot evidence. No finding without evidence.
90- Classify by severity (P0-P4) and category (10 categories).
91- Run: `python scripts/qa_health_scorer.py findings.json --baseline .qa-baselines/latest.json`
92
93**Phase 9: Triage and fix loop.**
94- P3/P4: AUTO-FIX, commit atomically, verify.
95- P0/P1/P2: ASK, present evidence, propose fix, wait for approval.
96- After each fix: re-run check. If fail: `git revert`.
97- Hard stop at 50 fixes.
98
99**Phase 10-11: Regression check and report.**
100- Re-visit fixed pages. Verify no new errors.
101- Generate report: `python scripts/test_report_generator.py session.json --save-baseline`
102
103**Validation checkpoint:** Health score >= 85. Zero P0 findings. WCAG AA >= 95%.
104
105---
106
107## Workflow 2: Visual Regression Testing
108
109```bash
110# Set up baseline
111python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
112# Capture and register screenshots
113python scripts/visual_regression_tracker.py --register ./baselines
114# After changes, compare
115python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5 --json
116# Accept intentional changes
117python scripts/visual_regression_tracker.py --update-baseline --baseline ./baselines --current ./screenshots
118```
119
120Pages exceeding the threshold (default 5%) are flagged as regressions. Uses SHA-256 hashing and byte-level comparison.
121
122---
123
124## Workflow 3: Accessibility Audit
125
126```bash
127python scripts/accessibility_auditor.py page.html --level AA --json
128curl -s https://example.com | python scripts/accessibility_auditor.py - --level AAA
129```
130
131**What gets checked by level:**
132- **A (Must Fix):** Alt text, page language, form labels, headings, duplicate IDs, autoplay media
133- **AA (Should Fix):** Color contrast (4.5:1 text, 3:1 large), heading hierarchy, focus visible, error identification
134- **AAA (Nice to Have):** Enhanced contrast (7:1), extended audio, reading level
135
136Each violation includes: WCAG criterion, severity, element selector, and remediation guidance.
137
138---
139
140## Testing Tiers
141
142| Tier | Duration | Scope |
143|------|----------|-------|
144| **Quick** | 30s | Console errors, broken links, basic a11y, mobile resize |
145| **Standard** | 2-5 min | + Top 10 routes, forms, contrast, Core Web Vitals |
146| **Deep** | 10-20 min | + Full sitemap, state testing, WCAG AA, performance, visual regression, security headers |
147| **Exhaustive** | 30+ min | + Every element, WCAG AAA, all pages performance, 5 breakpoints, auth edge cases, memory leaks |
148
149---
150
151## Health Scoring System
152
15310 weighted categories, score 0-100:
154
155| Category | Weight | Measures |
156|----------|--------|----------|
157| Functional | 18% | Forms, CRUD, navigation flows |
158| Accessibility | 13% | WCAG compliance, keyboard nav |
159| Console Errors | 12% | JS errors, unhandled rejections |
160| UX Flow | 12% | Logical navigation, clear feedback |
161| Performance | 12% | Core Web Vitals within thresholds |
162| Visual Consistency | 10% | Layout shifts, alignment, z-index |
163| Broken Links | 8% | HTTP 4xx/5xx, dead anchors |
164| Content Quality | 5% | Spelling, placeholder text, truncation |
165| Security Headers | 5% | CSP, HSTS, cookie flags |
166| Mobile Responsive | 5% | Breakpoints, touch targets, no h-scroll |
167
168**Severity deductions:** P0: -30, P1: -18, P2: -10, P3: -4, P4: -1.
169
170**Grades:** A (90-100), B (80-89), C (70-79), D (60-69), F (0-59).
171
172---
173
174## Safety Controls
175
176- **Clean working tree required** -- abort if `git status` dirty.
177- **Max 50 fixes per session** -- hard stop.
178- **Risk accumulator** -- component (+5), style (+2), config (+8), revert (+15). Stop at 25% of budget.
179- **WTF heuristic** -- 3 consecutive fix verification failures = stop entirely.
180- **Atomic commits** -- one fix = one commit: `fix(qa): [P{severity}] {description}`
181
182---
183
184## Troubleshooting
185
186| Problem | Cause | Solution |
187|---------|-------|----------|
188| Scorer exits code 1 with no errors | Score below `--threshold` (default 70) | Check score in output; raise threshold or fix findings |
189| Auditor reports `parse-error` | Malformed HTML | Verify file is complete; check curl is not returning redirect |
190| Regression tracker 100% change on all pages | Baseline manifest empty | Run `--init` then `--register` before comparing |
191| Findings default to P3/functional | Missing `severity` or `category` keys | Include both keys in each finding dict |
192| Chrome MCP returns stale content after SPA nav | DOM updated without full page load | Wait for transition, call `read_page` again |
193
194---
195
196## References
197
198| Guide | Path |
199|-------|------|
200| Browser Testing Methodology | `references/browser_testing_methodology.md` |
201| WCAG Compliance Guide | `references/wcag_compliance_guide.md` |
202| Performance Benchmarks | `references/performance_benchmarks.md` |
203
204---
205
206## Integration Points
207
208| Skill | Integration |
209|-------|-------------|
210| `code-reviewer` | Health score and findings in PR review context |
211| `senior-frontend` | Visual regression baselines align with component library |
212| `senior-devops` | Health score gates CI/CD via exit code |
213| `senior-secops` | Security header findings escalate to security review |
214| `incident-commander` | P0 findings trigger incident response |
215
216---
217
218**Last Updated:** April 2026
219**Version:** 2.1.0