webapp-testing

# /supergraph:webapp-testing Test and verify local web application UI behavior using Playwright. Announce: "🌐 /supergraph:webapp-testing — testing web application..." ## When to Use - Verifying a frontend change works correctly in the browser - Debugging UI behavior or unexpected rendering - Capturing screenshots for visual verification - Checking browser console logs for errors - After `/supergraph:frontend-design` to confirm feature works end-to-end ## Steps ### 0. Announce "🌐 /supergraph:webapp-testing — testing [feature/page]..." ### 1. Understand what changed (graph context) Before writing tests, use graph context to prioritize coverage: Use `CBM_PROJECT`: call `detect_changes`, `search_graph` for changed routes/pages, then `trace_path` for inbound/outbound call and data-flow paths. Run validated `test-gaps`. Empty results are unavailable; use Serena/filesystem evidence. **Serena (optional):** For changed component symbols: ``` mcp__serena__find_referencing_symbols(symbol=<changed_component>) ``` If a Playwright test fails on a renamed component/route, `find_referencing_symbols` surfaces all import sites. Skip if Serena unavailable. ### 2. Choose approach ``` Is it static HTML? ├─ Yes → Read HTML file directly to identify selectors │ Then write Playwright script using those selectors │ └─ No (dynamic webapp) → Is server already running? ├─ No → Run: python scripts/with_server.py --help │ Then start server + write Playwright script ...