| name | webapp-test |
| description | Automated Playwright-based web app testing. Screenshot, inspect DOM, discover selectors,
interact with elements, and run visual regression checks against a running localhost app.
Use when: "test webapp", "browser test", "screenshot app", "check UI", "visual regression",
"end-to-end test", or verifying a web app works after changes.
|
Created: 2026-02-26-00-00
Last Updated: 2026-02-26-00-00
Inspired by anthropics/skills — webapp-testing skill.
Webapp Test
Automated Playwright-based testing for web applications running on localhost. Takes screenshots,
discovers interactive elements, runs interaction tests, and performs visual regression checks.
Usage
/webapp-test
/webapp-test --recon
/webapp-test --selectors
/webapp-test --quick
Prerequisites
Bootstrap Playwright (one-time, auto-detected):
Python:
pip install playwright && playwright install chromium
Node:
npx playwright install chromium
If neither is installed, prompt the user to choose and install.
Phase 1: Reconnaissance
Gather baseline information about the running app.
- Detect running app — Check common ports (3000, 3001, 4000, 5000, 5173, 8000, 8080, 8888).
If nothing found, check for a start script (
package.json, Makefile, Procfile) and offer
to start the server. Track whether we started it (for cleanup).
- Navigate — Open the app URL, wait for
networkidle
- Screenshot — Save to
__webtest_recon.png
- DOM dump — Save rendered HTML to
__webtest_dom.html (truncate at 50KB)
- Report — Display screenshot, note page title, visible text count, form count
Phase 2: Selector Discovery
Find interactive elements from the rendered DOM.
- Query all interactive elements:
- Buttons:
button, [role="button"], input[type="submit"]
- Links:
a[href]
- Inputs:
input, textarea, select
- Custom:
[onclick], [data-testid], [aria-label]
- For each element, record:
- Best selector (prefer
data-testid > aria-label > id > CSS path)
- Element type and visible text
- Whether it's visible and enabled
- Output — Print a numbered table of discoverable elements
- Save — Write selector map to
__webtest_selectors.json
Phase 3: Interaction Testing
Click, type, and navigate — verify outcomes.
- For each key interactive element (buttons, forms, navigation links):
- Screenshot before interaction
- Perform the interaction (click, type test data, submit)
- Wait for response (networkidle or DOM change)
- Screenshot after interaction
- Verify: Did the page change? Any errors in console? HTTP failures?
- Form testing:
- Fill with valid test data, submit, verify success state
- Fill with empty/invalid data, submit, verify error state
- Navigation testing:
- Click main nav links, verify each page loads
- Check back button works
- Report — List each interaction, result (pass/fail), and screenshots
Phase 4: Visual Regression
Compare screenshots before and after code changes.
- Check for baseline screenshots in
__webtest_baseline/
- If no baseline exists:
- Save current screenshots as baseline
- Report: "Baseline created. Run again after changes to compare."
- If baseline exists:
- Take new screenshots of same pages/states
- Compare pixel-by-pixel (or perceptual hash if available)
- Flag differences above threshold (>5% pixel diff)
- Generate diff images highlighting changes
- Report — List pages with visual changes, show diff screenshots
Execution Flow
1. Detect running app (or start it)
2. Bootstrap Playwright if needed
3. Run selected phases (--recon, --selectors, --quick, or all)
4. Generate report with screenshots
5. Cleanup: delete __webtest_* artifacts (except __webtest_baseline/)
6. Stop server if we started it
Test Script Naming
All artifacts use the __webtest_ prefix:
__webtest_recon.png — Reconnaissance screenshot__webtest_dom.html — DOM dump__webtest_selectors.json — Selector map__webtest_interact_*.png — Interaction screenshots__webtest_baseline/ — Visual regression baselines__webtest_diff_*.png — Visual diff images__webtest_script.py (or .js) — Generated test script
Rules
- Localhost only — Never navigate to external URLs
- Headless only — Always run Playwright in headless mode
- Never commit artifacts — All
__webtest_* files are temporary (add to .gitignore)
- Cleanup on completion — Delete all
__webtest_* files and directories when done, except __webtest_baseline/ which persists for future visual regression comparisons
- Stop what you started — If this skill started a dev server, stop it on completion
- No production — This is for local development testing only
- Timeout — Each phase has a 60-second timeout; abort and report on timeout
