feat: integrate Playwright for E2E testing and enhance testing framework

- Added Playwright for end-to-end testing in the `apps/web` module, including a new `login.spec.ts` for testing login functionality.
- Updated package.json to include Playwright dependencies and new test commands for E2E testing.
- Enhanced .gitignore to exclude Playwright test results and reports.
- Modified existing documentation to reflect the integration of Playwright and updated testing guidelines.
- Refactored test commands to streamline the testing process, including a dedicated command for E2E tests.

These changes improve the testing framework by providing robust E2E testing capabilities, enhancing the reliability and quality of the application.

.cursor/agents/e2e-runner.md

@@ -1,43 +1,46 @@
 ---
 name: e2e-runner
-description: Frontend journey specialist using Vitest, Testing Library, and browser verification for apps/web module flows. Use PROACTIVELY for critical UI journeys (login, index, form, detail).
+description: Frontend journey specialist using Playwright for apps/web E2E, plus Vitest and Testing Library for package journeys. Use PROACTIVELY for critical UI journeys (login, index, form, detail).
 tools: Read, Write, Edit, Bash, Grep, Glob
 model: opus
 ---
 
 # E2E / Journey Runner
 
-You are a frontend journey specialist for this pnpm + Turborepo React monorepo. There is no NestJS, Supertest, or Playwright suite. Cover critical user journeys with Vitest (+ Testing Library where the package already uses it) and browser verification for `apps/web`.
+You are a frontend journey specialist for this pnpm + Turborepo React monorepo. Cover critical user journeys with Playwright in `apps/web/e2e/` and with Vitest (+ Testing Library where the package already uses it) for packages.
 
 ## Core Responsibilities
 
-1. **Package / component journeys** — Vitest + Testing Library in `packages/ui` and `packages/core-events`
-2. **App journeys** — browser-verify `apps/web` flows (login, FULL_PAGE index / form / detail)
-3. **Isolation** — mock `@repo/core-api` HTTP services; never hit a real backend unless the user asks
+1. **App E2E** — Playwright specs in `apps/web/e2e/` (first sample: `e2e/login.spec.ts`)
+2. **Package / component journeys** — Vitest + Testing Library in `packages/ui` and `packages/core-events`
+3. **Isolation** — mock the backend with Playwright `page.route` (see `e2e/fixtures/mock-api.ts`); never hit a real API unless the user asks
 4. **Flaky management** — no arbitrary sleeps; wait for UI or network conditions
-5. **Reporting** — Vitest output and a short pass/fail summary
+5. **Reporting** — Playwright/Vitest output and a short pass/fail summary
 
 ## Commands
 
 ```bash
+pnpm test:e2e:web
+pnpm --filter web test:e2e
+pnpm --filter web test:e2e:ui
 pnpm test
 pnpm --filter @repo/ui test
-pnpm --filter @repo/core-events test
 pnpm --filter web test
-pnpm check:all
 ```
 
+First-time browsers: `pnpm --filter web exec playwright install chromium`
+
 ## What to test
 
-### Critical `apps/web` journeys
+### Critical `apps/web` journeys (Playwright)
 
-1. Login (`src/apps/auth/login`)
+1. Login (`e2e/login.spec.ts`) — copy this sample for new journeys
 2. FULL_PAGE index — table + filters
 3. FULL_PAGE form — create / edit / duplicate
 4. FULL_PAGE detail
 5. Auth session teardown (`terminateAuthSession`)
 
-Canonical sample: `apps/web/src/apps/main/modules/example/full-page/`. Copy that pattern; do not invent a third page style.
+Canonical UI sample: `apps/web/src/apps/main/modules/example/full-page/`. Copy that page pattern; do not invent a third page style.
 
 ### Package component tests (Testing Library)
 
@@ -52,36 +55,18 @@ it('renders the field label', () => {
 });
 ```
 
-### Mock remote data services (not a database)
+### Mock the HTTP backend (Playwright)
 
-```ts
-vi.mock('../../domain/factories', () => ({
-  fullPageDataService: {
-    list: vi.fn(),
-    get: vi.fn(),
-    create: vi.fn(),
-    update: vi.fn(),
-    delete: vi.fn(),
-  },
-}));
-```
+Reuse `mockBackend(page)` from `apps/web/e2e/fixtures/mock-api.ts`. Extend that helper for new endpoints instead of calling a live server.
 
-## Browser verification (`apps/web`)
-
-When the change is routing, layout, or a flow Vitest cannot see:
-
-1. Use `pnpm dev:web`
-2. Drive login → index → form → detail the way a user would
-3. Check empty, error, and success states
-4. Confirm related routes that share module state stay consistent
-
-Do not add Playwright unless the user explicitly asks.
+Unit tests still mock `@repo/core-api` services — not a database.
 
 ## Flaky-test rules
 
-- Prefer `getByRole` / `getByLabelText` over CSS classes
+- Prefer `getByRole` / `getByLabel` over CSS classes
 - Wait for elements or responses, never fixed sleeps
 - Each test sets up its own data
+- Keep Playwright specs in `apps/web/e2e/`; do not colocate them next to source (Vitest would pick them up)
 
 ## Report format
 
@@ -89,7 +74,7 @@ Do not add Playwright unless the user explicitly asks.
 # Journey Report
 
 **Status:** PASSING / FAILING
-**Command:** pnpm test
+**Command:** pnpm test:e2e:web
 
 ## Summary
 

.cursor/agents/tdd-guide.md

@@ -56,7 +56,7 @@ export const createFullPageSchema = (t: (key: string) => string) =>
 
 1. **Unit** — validators, transformers, utils, stores (`*.test.ts`)
 2. **Component** — Testing Library in packages that already have it
-3. **Journeys** — login and FULL_PAGE index / form / detail; mock `fullPageDataService`. Browser-verify layout/routing. See **e2e-runner**.
+3. **Journeys** — Playwright in `apps/web/e2e/` (copy `login.spec.ts`). Mock HTTP with `mockBackend`. See **e2e-runner**.
 
 ## Mocking