Webapp Testing Skill

Scope

• Use when adding or fixing Playwright E2E tests in e2e/.
• Keep tests deterministic by mocking API routes instead of hitting Prisma.
• Prefer user-visible behavior checks over implementation details.

Project Conventions

• Test location: e2e/*.spec.ts
• Runner: npm run test:e2e
• Base URL: http://127.0.0.1:3001 from playwright.config.ts

Auth And Fixtures

• Use addAuthSession from e2e/fixtures/auth-session.ts for authenticated tests.
• Use mockInsightsRoutes from e2e/fixtures/insights-api.ts to stub:
  • GET /api/insights
  • GET /api/transactions
  • GET /api/settings
• When adding new authenticated tests, ensure /api/settings is stubbed to avoid Prisma errors.

Common Patterns

Auth Redirect

• Navigate to a protected route (ex: /dashboard) without auth.
• Expect URL to contain /auth/signin.

Insights Drill-Down

• Stub insights and transactions via mockInsightsRoutes.
• Use the aria label on the toggle button:
  • page.getByRole("button", { name: /show transactions for/i })

Mobile Viewport

• Set test.use({ viewport: { width: 390, height: 844 } }).
• Assert the nav is visible via data-testid="mobile-nav".
• Verify main padding bottom is at least the nav height.

Service Worker

• Avoid network interception flakiness.
• Assert registration scope exists:
  • navigator.serviceWorker.getRegistration() and check scope.

Reliability Tips

• Use page.context().route for API stubs to guarantee interception.
• Prefer getByRole and getByText with stable labels.
• Add data-testid only when no stable accessible label exists.