| name | stress-test-frontend |
| description | Run a frontend load testing audit. Seeds data, tests all pages via Chrome DevTools MCP, records network calls, TanStack queries, DOM sizes, and generates a timestamped report. |
| user_invocable | true |
Frontend Load Testing Audit
Testing plan: frontend/docs/load-testing-plan.md
Previous reports: frontend/docs/audits/
Agent Instructions
When the user invokes /stress-test-frontend, perform a full frontend load testing audit:
1. Setup
- Read the testing plan at
frontend/docs/load-testing-plan.md for the full methodology
- Seed data:
bun backend/scripts/seed-stress-test.ts --tier medium
- Verify nginx is responding on
localhost (not the direct Vite port)
2. Discover Routes
- Read
frontend/src/App.tsx and extract all <Route path="..."> entries
- Compare against the Known Pages table in the testing plan
- Add any new routes to the audit list; skip removed routes and note them in the report
- For parameterized routes (e.g.,
/workflows/:id), use real entities from seeded data
3. Audit Every Page
Follow the discovered route list (Known Pages + any new routes). For each page:
- Navigate via
localhost (nginx reverse proxy) — never use the direct Vite dev server port
- Wait for data to load (spinners gone, tables populated)
- Take a screenshot and save to
.context/
- Record all fetch/XHR network requests with timing
- Extract TanStack Query cache state using the snippet in the testing plan
- Measure DOM element count:
document.querySelectorAll('*').length
- Note anomalies: ghost queries, duplicate calls, missing pagination, large payloads
For Page 1 (Workflow List), also run a Chrome performance trace to get LCP, CLS, TTFB.
4. Generate Report
- Compile all per-page data into a report following the format of previous reports in
frontend/docs/audits/
- Include cross-page analysis: DOM comparison, API call counts, shared queries, pagination gaps
- Summarize findings with severity ratings (MEDIUM/LOW/INFO)
- Save the report as
frontend/docs/audits/load-audit-<YYYY-MM-DDTHH-MM>.md using the current datetime
- If a previous report exists, note any improvements or regressions compared to the most recent one
5. Important Rules
- This is an audit only — do NOT make any code changes or fixes
- All testing must go through
localhost (nginx), not the direct Vite dev server port
- Use Chrome DevTools MCP tools for all browser interaction
- Save screenshots to
.context/ directory
