chainlesschain WebApp Testing Skill
Test web applications with browser automation.
Usage
/webapp-testing test <url> [--check selectors|forms|links]
/webapp-testing screenshot <url> [--full]
/webapp-testing console <url>
/webapp-testing accessibility <url>
/webapp-testing scenario <url> --steps "click .btn, fill #email test@example.com, click #submit"
/webapp-testing inspect <url>
Decision Tree
Task → Is it static HTML?
├─ Yes → Read HTML directly, identify selectors, write tests
└─ No (dynamic webapp) → Is server running?
├─ No → Start server first, then test
└─ Yes → Reconnaissance-then-action:
1. Navigate and wait for networkidle
2. Take screenshot or inspect DOM
3. Identify selectors from rendered state
4. Execute actions with discovered selectors
Actions
| Action | Description |
|---|---|
test |
Navigate to URL, wait for load, check for errors |
screenshot |
Capture full page or element screenshot |
console |
Monitor and report console logs/errors |
accessibility |
Run basic accessibility checks |
scenario |
Execute multi-step test scenario |
inspect |
Get DOM structure and interactive elements |
Reconnaissance-Then-Action Pattern
- Navigate: Go to URL and wait for
networkidle - Inspect: Take screenshot or read DOM
- Identify: Find selectors from rendered state
- Execute: Run actions with discovered selectors
Accessibility Checks
- Alt text on images
- Form labels on inputs
- Heading hierarchy (h1 → h2 → h3)
- Color contrast indicators
- ARIA roles on interactive elements
- Keyboard navigation support
Common Pitfall
- Don't inspect DOM before waiting for
networkidleon dynamic apps - Do wait for
page.wait_for_load_state('networkidle')before inspection