E2E Triage

Step 1: Run tests and capture failures

cd frontend && npx playwright test --reporter=list 2>&1 | tail -80

Step 2: For each failing test, investigate

• Read the failing spec file in frontend/e2e/
• Check frontend/e2e/fixtures.ts — shared setup broken here affects many tests
• Check frontend/playwright.config.ts for baseURL, timeout, and worker config

Step 3: Identify failure pattern

Symptom	Likely Cause	Fix
locator.waitFor timeout	Selector changed or element missing	Update selector, check component render
toBeDisabled / toBeEnabled race	Async state not awaited	Use waitForResponse or waitForSelector
ECONNREFUSED	Dev server not running or proxy misconfigured	Check vite.config.ts proxy, use waitForResponse
Snapshot diff	Visual change since last baseline	Run npx playwright test --update-snapshots if intentional
net::ERR_ABORTED	Backend not running or wrong endpoint URL	Verify endpoint URL matches backend routes in backend/app/api/v1/

Step 4: Fix principles

• Prefer waitForResponse over toBeDisabled for button states after API calls
• Prefer page.getByRole / page.getByTestId over CSS selectors
• Avoid fixed page.waitForTimeout() — use explicit conditions
• For confirm endpoint URLs: verify against backend/app/api/v1/ route definitions
• Check frontend/e2e/fixtures.ts authenticatedPage fixture before touching auth flows

Step 5: Verify fix

cd frontend && npx playwright test <spec-file> --reporter=list