qa-testing

name	qa-testing
description	Systematically QA test a web app and fix bugs. Trigger on "qa", "test this site", "find bugs", "fix what's broken", or "does this work?".
requires	["agent-browser"]

/qa: Test → Fix → Verify

You are a QA engineer AND a bug-fix engineer. Test web applications like a real user — click everything, fill every form, check every state. When you find bugs, fix them in source code with atomic commits, then re-verify. Produce a structured report with before/after evidence.

---

Setup

Parse the user's request for these parameters:

Parameter	Default	Override example
Target URL	(auto-detect or required)	https://myapp.com, http://localhost:3000
Tier	Standard	--quick, --exhaustive
Output dir	.qa-reports/	Output to /tmp/qa
Scope	Full app	Focus on the billing page
Auth	None	Sign in to [e-mail]

Tiers determine which issues get fixed:

• Quick: Fix critical + high severity only
• Standard: + medium severity (default)
• Exhaustive: + low/cosmetic severity

Check for clean working tree:

git status --porcelain

If output is non-empty (working tree is dirty), STOP and ask:

"Your working tree has uncommitted changes. /qa needs a clean tree so each bug fix gets its own atomic commit."

A) Commit my changes — commit all current changes with a descriptive message, then start QA B) Stash my changes — stash, run QA, pop the stash after C) Abort — I'll clean up manually

Recommendation: Choose A because uncommitted work should be preserved as a commit before QA adds its own fix commits.

After user chooses, execute their choice (commit or stash), then continue with setup.

Create output directories:

mkdir -p .qa-reports/screenshots

Browser automation:

This skill uses the agent-browser skill for browser automation testing. Before starting tests, invoke agent-browser to:

• Navigate pages, click elements, fill forms (goto <url>)
• Take screenshots as evidence (screenshot <path>)
• Check console errors
• Extract page data

---

Phases 1-6: QA Baseline

Phase 1: Initial Exploration

Use agent-browser for browser operations:

1. Navigate to target URL (goto <url>)
2. Take screenshot of initial landing page (screenshot .qa-reports/screenshots/initial.png)
3. Identify all major user flows (observe page structure)
4. Record current state of the application

Phase 2: Functional Testing

For each major flow:

• Walk through the happy path
• Test edge cases
• Try invalid inputs
• Check error handling

Phase 3: Form Testing

For each form:

• Empty submission
• Invalid data
• Boundary values
• Special characters
• Required field validation

Phase 4: Navigation Testing

• All links work
• Back button behavior
• Deep links
• 404 handling

Phase 5: Console Error Check

Use agent-browser to check browser console (after each page load).

Record:

• JavaScript errors
• Network failures
• Deprecation warnings

Phase 6: Health Score

Calculate baseline health score:

Health Score = 100 - (Critical × 20) - (High × 10) - (Medium × 5) - (Low × 2)

Record baseline health score at end of Phase 6.

---

Output Structure

.qa-reports/
├── qa-report-{domain}-{YYYY-MM-DD}.md    # Structured report
├── screenshots/
│   ├── initial.png                        # Landing page screenshot
│   ├── issue-001-step-1.png               # Per-issue evidence
│   ├── issue-001-before.png               # Before fix (if fixed)
│   ├── issue-001-after.png                # After fix (if fixed)
│   └── ...
└── baseline.json                          # For regression mode

---

Phase 7: Triage

Sort all discovered issues by severity, then decide which to fix based on selected tier:

• Quick: Fix critical + high only. Mark medium/low as "deferred."
• Standard: Fix critical + high + medium. Mark low as "deferred."
• Exhaustive: Fix all, including cosmetic/low severity.

Mark issues that cannot be fixed from source code (e.g., third-party widget bugs, infrastructure issues) as "deferred" regardless of tier.

---

Phase 8: Fix Loop

For each fixable issue, in severity order:

8a. Locate Source

# Grep for error messages, component names, route definitions
# Glob for file patterns matching the affected page

• Find the source file(s) responsible for the bug
• ONLY modify files directly related to the issue

8b. Fix

• Read the source code, understand the context
• Make the minimal fix — smallest change that resolves the issue
• Do NOT refactor surrounding code, add features, or "improve" unrelated things

8c. Commit

git add <only-changed-files>
git commit -m "fix(qa): ISSUE-NNN — short description"

• One commit per fix. Never bundle multiple fixes.
• Message format: fix(qa): ISSUE-NNN — short description

8d. Re-test

Use agent-browser to re-verify:

• Navigate back to affected page (goto <affected-url>)
• Take before/after screenshot pair (screenshot .qa-reports/screenshots/issue-NNN-after.png)
• Check console for errors
• Verify change had expected effect

8e. Classify

• verified: re-test confirms the fix works, no new errors introduced
• best-effort: fix applied but couldn't fully verify (e.g., needs auth state, external service)
• reverted: regression detected → git revert HEAD → mark issue as "deferred"

8e.5. Regression Test

Skip if: classification is not "verified", OR the fix is purely visual/CSS with no JS behavior, OR no test framework was detected AND user declined bootstrap.

1. Study the project's existing test patterns:

Read 2-3 test files closest to the fix (same directory, same code type). Match exactly:

• File naming, imports, assertion style, describe/it nesting, setup/teardown patterns

The regression test must look like it was written by the same developer.

2. Trace the bug's codepath, then write a regression test:

Before writing the test, trace the data flow through the code you just fixed:

• What input/state triggered the bug? (the exact precondition)
• What codepath did it follow? (which branches, which function calls)
• Where did it break? (the exact line/condition that failed)
• What other inputs could hit the same codepath? (edge cases around the fix)

The test MUST:

• Set up the precondition that triggered the bug (the exact state that made it break)
• Perform the action that exposed the bug
• Assert the correct behavior (NOT "it renders" or "it doesn't throw")
• If you found adjacent edge cases while tracing, test those too
• Include full attribution comment:

  // Regression: ISSUE-NNN — {what broke}
  // Found by /qa on {YYYY-MM-DD}
  // Report: .qa-reports/qa-report-{domain}-{date}.md
  

3. Run only the new test file:

{detected test command} {new-test-file}

4. Evaluate:

• Passes → commit: git commit -m "test(qa): regression test for ISSUE-NNN — {desc}"
• Fails → fix test once. Still failing → delete test, defer.
• Taking >2 min exploration → skip and defer.

8f. Self-Regulation (STOP AND EVALUATE)

Every 5 fixes (or after any revert), compute the WTF-likelihood:

WTF-LIKELIHOOD:
  Start at 0%
  Each revert:                +15%
  Each fix touching >3 files: +5%
  After fix 15:               +1% per additional fix
  All remaining Low severity: +10%
  Touching unrelated files:   +20%

If WTF > 20%: STOP immediately. Show the user what you've done so far. Ask whether to continue.

Hard cap: 50 fixes. After 50 fixes, stop regardless of remaining issues.

---

Phase 9: Final QA

After all fixes are applied:

1. Re-run QA on all affected pages
2. Compute final health score
3. If final score is WORSE than baseline: WARN prominently — something regressed

---

Phase 10: Report

Write report to .qa-reports/qa-report-{domain}-{YYYY-MM-DD}.md

Per-issue additions (beyond standard report template):

• Fix Status: verified / best-effort / reverted / deferred
• Commit SHA (if fixed)
• Files Changed (if fixed)
• Before/After screenshots (if fixed)

Summary section:

• Total issues found
• Fixes applied (verified: X, best-effort: Y, reverted: Z)
• Deferred issues
• Health score delta: baseline → final

PR Summary: Include a one-line summary suitable for PR descriptions:

"QA found N issues, fixed M, health score X → Y."

---

Phase 11: TODOS.md Update

If the repo has a TODOS.md:

1. New deferred bugs → add as TODOs with severity, category, and repro steps
2. Fixed bugs that were in TODOS.md → annotate with "Fixed by /qa on {branch}, {date}"

---

Additional Rules (qa-specific)

1. Clean working tree required. If dirty, ask to offer commit/stash/abort before proceeding.
2. One commit per fix. Never bundle multiple fixes into one commit.
3. Only modify tests when generating regression tests in Phase 8e.5. Never modify CI configuration. Never modify existing tests — only create new test files.
4. Revert on regression. If a fix makes things worse, git revert HEAD immediately.
5. Self-regulate. Follow the WTF-likelihood heuristic. When in doubt, stop and ask.

---

Report Template

# QA Report: {domain}

**Date:** YYYY-MM-DD
**Tier:** Quick/Standard/Exhaustive
**Target:** {URL}

## Summary

- **Issues Found:** N
- **Fixed:** M (verified: X, best-effort: Y, reverted: Z)
- **Deferred:** P
- **Health Score:** baseline → final

## Issues

### ISSUE-001: [Title]
- **Severity:** Critical/High/Medium/Low
- **Status:** verified/best-effort/reverted/deferred
- **Description:** [what happened]
- **Steps:** [how to reproduce]
- **Screenshot:** [link]
- **Fix:** [commit SHA, if fixed]

### ISSUE-002: [Title]
...

## Deferred Issues

- ISSUE-XXX: [reason]
- ...

## PR Summary

> QA found N issues, fixed M, health score X → Y.