Playwright E2E tests — critical user flows automated

[leocagli]

Problem

Unit tests cover protocol logic but not user flows. A broken x402 quote UI or passport panel would only be caught in production. E2E tests catch these regressions automatically.

Test suite

Flow 1: x402 quote and countdown

test('x402 quote shows countdown and expires', async ({ page }) => {
  await page.goto('/admin')
  await page.click('[data-testid=generate-quote]')
  await expect(page.locator('[data-testid=countdown]')).toBeVisible()
  // wait for expiry
  await expect(page.locator('[data-testid=quote-expired-toast]')).toBeVisible()
})

Flow 2: Agent selection and wallet link

• Click agent on canvas → agent detail updates in sidebar
• Click 'Assign Wallet' → confirmation dialog appears
• Confirm → wallet panel updates

Flow 3: Passport mint flow

• Navigate to /admin → Passport tab
• Click 'Mint Passport' → loading state
• Verify proof generated → step 2 active

Flow 4: Onboarding modal

• Clear localStorage, navigate to /
• Onboarding modal visible
• Step through all 3 steps
• Click 'Get started' → modal dismisses
• Reload → modal does NOT reappear

Flow 5: Sidebar tab persistence

• Click 'Wallet' tab → localStorage set
• Reload page → Wallet tab still active

Setup

npm install -D @playwright/test
npx playwright install chromium

CI job: npx playwright test --reporter=html uploads HTML report as artifact.

Files to create

• e2e/x402.spec.ts
• e2e/agent-select.spec.ts
• e2e/passport.spec.ts
• e2e/onboarding.spec.ts
• playwright.config.ts
• .github/workflows/e2e.yml

[brentthomas248]

I opened PR #430 with a scoped Playwright E2E setup for this issue. It adds Chromium E2E config, GitHub Actions, and coverage for onboarding, sidebar persistence, agent wallet reachability, and admin passport controls. Verified locally with npm run test:e2e -- --project=chromium --workers=1 and npm test.