qa-web-test

QA Web Testing with PinchTab

Uses Skill("pinchtab") for all browser interaction — navigation, screenshots, viewport emulation, and DOM inspection. Describe what you need and let pinchtab handle the details.

Inputs

Raw arguments: $ARGUMENTS

Infer from the arguments:

• TARGET_URL: the URL to test
• OUT_DIR: output directory for QA report and screenshots, or ./qa-reports if not provided

Output Location

• Creates or updates OUT_DIR/qa-report-{timestamp}.md
• Screenshots are saved to OUT_DIR/screenshots/
• Run mkdir -p OUT_DIR/screenshots before writing to ensure directories exist.

Workflow

Follow these steps in order. Read each step file for detailed instructions.

1. Connect and navigate — Navigate to target URL (includes auth check and login if needed)
2. Determine breakpoints — Choose viewport widths to test
3. Emulate and capture — Set viewport, screenshot, inspect dimensions
4. CSS inspection — Inspect computed styles and container queries
5. Visual design inspection — Check typography, color, spacing, borders, and visibility
6. Report results — Summarize findings with pass/fail table

Reference Files

Reference	When to Read
references/breakpoints.md	Common breakpoint values, container query vs media query gotchas
references/css-inspection.md	JS snippets for overflow detection, grid/flex inspection, DOM traversal