Webapp Testing
TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, and capturing screenshots.
Overview
This skill enables Claude to test local web applications using native Python Playwright scripts. It includes helper scripts for server management and follows a reconnaissance-then-action pattern for reliable automation.
Decision Tree
- Static HTML: Read HTML file directly to identify selectors, then write Playwright script
- Dynamic webapp (server not running): Use with_server.py helper to manage server lifecycle
- Dynamic webapp (server running): Navigate, wait for networkidle, inspect DOM, then execute actions
Server Management
Single Server
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
Multiple Servers
python scripts/with_server.py \
--server "cd backend && python server.py" --port 3000 \
--server "cd frontend && npm run dev" --port 5173 \
-- python your_automation.py
Reconnaissance Pattern
- Inspect rendered DOM: Take screenshots and get page content
- Identify selectors: Analyze inspection results
- Execute actions: Use discovered selectors
page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()
Key Features
- Playwright Integration: Full access to Playwright's browser automation capabilities
- Server Lifecycle Management: Automatic server start/stop with port detection
- Screenshot Capture: Visual inspection and debugging
- DOM Inspection: Programmatic element discovery
- Headless Mode: Always uses headless Chromium for reliability
Common Pitfall
Don't inspect the DOM before waiting for networkidle on dynamic apps. Always wait for JavaScript to execute before querying elements.