Update dependency @vue/tsconfig to ^0.9.0

- Stop hook now triggers on frontend/e2e/ changes
- Stop hook runs Playwright E2E tests alongside unit tests
- README documents test:e2e command and Playwright in code quality section

.claude/hooks/run-tests.sh

@@ -14,7 +14,7 @@ fi
 
 # Check for uncommitted changes in backend/frontend source
 HAS_BACKEND=$(git status --porcelain backend/src/ 2>/dev/null | head -1)
-HAS_FRONTEND=$(git status --porcelain frontend/src/ 2>/dev/null | head -1)
+HAS_FRONTEND=$(git status --porcelain frontend/src/ frontend/e2e/ 2>/dev/null | head -1)
 
 # Nothing changed -- skip
 if [[ -z "$HAS_BACKEND" && -z "$HAS_FRONTEND" ]]; then
@@ -38,9 +38,15 @@ fi
 # Run frontend tests if TS/Vue sources changed
 if [[ -n "$HAS_FRONTEND" ]]; then
     if OUTPUT=$(cd frontend && npm run test:unit -- --run 2>&1); then
-        PASSED+="✓ Frontend tests passed. "
+        PASSED+="✓ Frontend unit tests passed. "
     else
-        ERRORS+="Frontend tests failed:\n$OUTPUT\n\n"
+        ERRORS+="Frontend unit tests failed:\n$OUTPUT\n\n"
+    fi
+
+    if OUTPUT=$(cd frontend && npm run test:e2e 2>&1); then
+        PASSED+="✓ Frontend E2E tests passed. "
+    else
+        ERRORS+="Frontend E2E tests failed:\n$OUTPUT\n\n"
     fi
 fi
 

.gitea/workflows/ci.yaml

@@ -46,8 +46,35 @@ jobs:
       - name: Production build
         run: cd frontend && npm run build
 
+  frontend-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: cd frontend && npm ci
+
+      - name: Install Playwright browsers
+        run: cd frontend && npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: cd frontend && npm run test:e2e
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30
+
   build-and-publish:
-    needs: [backend-test, frontend-test]
+    needs: [backend-test, frontend-test, frontend-e2e]
     if: startsWith(github.ref, 'refs/tags/') && contains(github.ref_name, '.')
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -9,6 +9,7 @@ Thumbs.db
 
 # Claude Code (machine-local)
 .claude/settings.local.json
+.mcp.json
 .rodney/
 .agent-tests/
 

README.md

@@ -65,8 +65,11 @@ fete/
 # Backend
 cd backend && ./mvnw test
 
-# Frontend
+# Frontend unit tests
 cd frontend && npm run test:unit
+
+# Frontend E2E tests (requires Chromium: npx playwright install chromium)
+cd frontend && npm run test:e2e
 ```
 
 ### Running the backend locally
@@ -138,11 +141,12 @@ ArchUnit enforces hexagonal boundaries: domain must not depend on adapters, appl
 | TypeScript (strict) | `vue-tsc --noEmit` | Type errors     |
 | oxlint + ESLint     | `oxlint`, `eslint` | Lint violations |
 
-**When the agent finishes** (Stop hook — only if `frontend/src/` has uncommitted changes):
+**When the agent finishes** (Stop hook — only if `frontend/src/` or `frontend/e2e/` has uncommitted changes):
 
 | What                | Command                      | Fails on                              |
 |---------------------|------------------------------|---------------------------------------|
 | Vitest              | `npm run test:unit -- --run` | Test failures (fail-fast, stops at 1) |
+| Playwright          | `npm run test:e2e`           | E2E test failures                     |
 
 **Not hooked** (run manually or via editor):
 

backend/src/main/resources/openapi/api.yaml

@@ -80,18 +80,23 @@ components:
           type: string
           format: uuid
           description: Public token for the event URL
+          example: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
         organizerToken:
           type: string
           format: uuid
           description: Secret token for organizer access
+          example: "f9e8d7c6-b5a4-3210-fedc-ba9876543210"
         title:
           type: string
+          example: "Summer BBQ"
         dateTime:
           type: string
           format: date-time
+          example: "2026-03-15T20:00:00+01:00"
         expiryDate:
           type: string
           format: date
+          example: "2026-06-15"
 
     ProblemDetail:
       type: object

docs/agents/plan/2026-03-05-e2e-testing-playwright-setup.md

@@ -0,0 +1,504 @@
+---
+date: 2026-03-05T10:29:08+00:00
+git_commit: ffea279b54ad84be09bd0e82b3ed9c89a95fc606
+branch: master
+topic: "E2E Testing with Playwright — Setup & Initial Tests"
+tags: [plan, e2e, playwright, testing, frontend, msw]
+status: draft
+---
+
+# E2E Testing with Playwright — Setup & Initial Tests
+
+## Overview
+
+Set up Playwright E2E testing infrastructure for the fete Vue 3 frontend with mocked backend (via `@msw/playwright` + `@msw/source`), write initial smoke and US-1 event-creation tests, and integrate into CI.
+
+## Current State Analysis
+
+- **Vitest** is configured and already excludes `e2e/**` (`vitest.config.ts:10`)
+- **Three routes** exist: `/` (Home), `/create` (EventCreate), `/events/:token` (EventStub)
+- **No E2E framework** installed — no Playwright, no MSW
+- **OpenAPI spec** at `backend/src/main/resources/openapi/api.yaml` defines `POST /events` with `CreateEventRequest` and `CreateEventResponse` schemas
+- **`CreateEventResponse` lacks `example:` fields** — required for `@msw/source` mock generation
+- **CI pipeline** (`.gitea/workflows/ci.yaml`) has backend-test and frontend-test jobs but no E2E step
+- **`.gitignore`** does not include Playwright output directories
+
+### Key Discoveries:
+- `frontend/vitest.config.ts:10` — `e2e/**` already excluded from Vitest
+- `frontend/vite.config.ts:18-25` — Dev proxy forwards `/api` → `localhost:8080`
+- `frontend/package.json:8` — `dev` script runs `generate:api` first, then Vite
+- `frontend/src/views/EventCreateView.vue` — Full form with client-side validation, API call via `openapi-fetch`, redirect to event stub on success
+- `frontend/src/views/EventStubView.vue` — Shows "Event created!" confirmation with shareable link
+- `frontend/src/views/HomeView.vue` — Empty state with "Create Event" CTA
+
+## Desired End State
+
+After this plan is complete:
+- Playwright is installed and configured with Chromium-only
+- `@msw/playwright` + `@msw/source` provide automatic API mocking from the OpenAPI spec
+- A smoke test verifies the app loads and basic navigation works
+- A US-1 E2E test covers the full event creation flow (form fill → mocked API → redirect → stub page)
+- `npm run test:e2e` runs all E2E tests locally
+- CI runs E2E tests after unit tests, uploading the report as artifact on failure
+- OpenAPI response schemas include `example:` fields for mock generation
+
+### Verification:
+```bash
+cd frontend && npm run test:e2e    # all E2E tests pass locally
+```
+
+## What We're NOT Doing
+
+- Firefox/WebKit browser testing — Chromium only for now
+- Page Object Model pattern — premature with <5 tests
+- CI caching of Playwright browser binaries — separate concern
+- Full-stack E2E tests with real Spring Boot backend
+- E2E tests for US-2 through US-20 — only US-1 flow + smoke test
+- Service worker / PWA testing
+- `data-testid` attributes — using accessible locators (`getByRole`, `getByLabel`) where possible
+
+## Implementation Approach
+
+Install Playwright and MSW packages, configure Playwright to spawn the Vite dev server, set up MSW to auto-generate handlers from the OpenAPI spec, then write two test files: a smoke test and a US-1 event creation flow test. Finally, add an E2E step to CI.
+
+---
+
+## Phase 1: Playwright Infrastructure
+
+### Overview
+Install dependencies, create configuration, add npm scripts, update `.gitignore`.
+
+### Changes Required:
+
+#### [x] 1. Install npm packages
+**Command**: `cd frontend && npm install --save-dev @playwright/test @msw/playwright @msw/source msw`
+
+Four packages:
+- `@playwright/test` — Playwright test runner
+- `msw` — Mock Service Worker core
+- `@msw/playwright` — Playwright integration for MSW (intercepts at network level via `page.route()`)
+- `@msw/source` — Reads OpenAPI spec and generates MSW request handlers
+
+#### [x] 2. Install Chromium browser binary
+**Command**: `cd frontend && npx playwright install --with-deps chromium`
+
+Only Chromium — saves ~2 min vs installing all browsers. `--with-deps` installs OS-level libraries.
+
+#### [x] 3. Create `playwright.config.ts`
+**File**: `frontend/playwright.config.ts`
+
+```typescript
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'html',
+
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    stdout: 'pipe',
+  },
+})
+```
+
+Key decisions per research doc:
+- `testDir: './e2e'` — separate from Vitest unit tests
+- `forbidOnly: !!process.env.CI` — prevents `.only` in CI
+- `workers: 1` in CI — avoids shared-state flakiness
+- `reuseExistingServer` locally — fast iteration when `npm run dev` is already running
+
+#### [x] 4. Add npm scripts to `package.json`
+**File**: `frontend/package.json`
+
+Add to `"scripts"`:
+```json
+"test:e2e": "playwright test",
+"test:e2e:ui": "playwright test --ui",
+"test:e2e:debug": "playwright test --debug"
+```
+
+#### [x] 5. Update `.gitignore`
+**File**: `frontend/.gitignore`
+
+Append:
+```
+# Playwright
+playwright-report/
+test-results/
+```
+
+#### [x] 6. Create `e2e/` directory
+**Command**: `mkdir -p frontend/e2e`
+
+### Success Criteria:
+
+#### Automated Verification:
+- [ ] `cd frontend && npx playwright --version` outputs a version
+- [ ] `cd frontend && npx playwright test --list` runs without error (shows 0 tests initially)
+- [ ] `npm run test:e2e` script exists in package.json
+
+#### Manual Verification:
+- [ ] `playwright-report/` and `test-results/` are in `.gitignore`
+- [ ] No unintended changes to existing config files
+
+**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
+
+---
+
+## Phase 2: OpenAPI Response Examples
+
+### Overview
+Add `example:` fields to `CreateEventResponse` properties so `@msw/source` can generate realistic mock responses.
+
+### Changes Required:
+
+#### [x] 1. Add examples to `CreateEventResponse`
+**File**: `backend/src/main/resources/openapi/api.yaml`
+
+Update `CreateEventResponse` properties to include `example:` fields:
+
+```yaml
+    CreateEventResponse:
+      type: object
+      required:
+        - eventToken
+        - organizerToken
+        - title
+        - dateTime
+        - expiryDate
+      properties:
+        eventToken:
+          type: string
+          format: uuid
+          description: Public token for the event URL
+          example: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
+        organizerToken:
+          type: string
+          format: uuid
+          description: Secret token for organizer access
+          example: "f9e8d7c6-b5a4-3210-fedc-ba9876543210"
+        title:
+          type: string
+          example: "Summer BBQ"
+        dateTime:
+          type: string
+          format: date-time
+          example: "2026-03-15T20:00:00+01:00"
+        expiryDate:
+          type: string
+          format: date
+          example: "2026-06-15"
+```
+
+### Success Criteria:
+
+#### Automated Verification:
+- [ ] `cd backend && ./mvnw compile` succeeds (OpenAPI codegen still works)
+- [ ] `cd frontend && npm run generate:api` succeeds (TypeScript types regenerate)
+
+#### Manual Verification:
+- [ ] All response schema properties have `example:` fields
+
+**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
+
+---
+
+## Phase 3: MSW Integration
+
+### Overview
+Set up `@msw/source` to read the OpenAPI spec and generate MSW handlers, and configure `@msw/playwright` to intercept network requests in E2E tests.
+
+### Changes Required:
+
+#### [x] 1. Create MSW setup helper
+**File**: `frontend/e2e/msw-setup.ts`
+
+```typescript
+import { fromOpenApi } from '@msw/source'
+import { createWorkerFixture } from '@msw/playwright'
+import { test as base, expect } from '@playwright/test'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const specPath = path.resolve(__dirname, '../../backend/src/main/resources/openapi/api.yaml')
+
+// Generate MSW handlers from the OpenAPI spec.
+// These return example values defined in the spec by default.
+const handlers = await fromOpenApi(specPath)
+
+// Create a Playwright fixture that intercepts network requests via page.route()
+// and delegates them to MSW handlers.
+export const test = base.extend(createWorkerFixture(handlers))
+export { expect }
+```
+
+This module:
+- Reads the OpenAPI spec at test startup
+- Generates MSW request handlers that return `example:` values by default
+- Exports a `test` fixture with MSW network interception built in
+- Tests import `{ test, expect }` from this file instead of `@playwright/test`
+
+#### [x] 2. Verify MSW integration works
+Write a minimal test in Phase 4 that uses the fixture — if the import chain works and a test passes, MSW is correctly configured.
+
+### Success Criteria:
+
+#### Automated Verification:
+- [ ] `frontend/e2e/msw-setup.ts` type-checks (no TS errors)
+- [ ] Import path to OpenAPI spec resolves correctly
+
+#### Manual Verification:
+- [ ] MSW helper is clean and minimal
+
+**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
+
+---
+
+## Phase 4: E2E Tests
+
+### Overview
+Write two test files: a smoke test for basic app functionality and a US-1 event creation flow test.
+
+### Changes Required:
+
+#### [x] 1. Smoke test
+**File**: `frontend/e2e/smoke.spec.ts`
+
+```typescript
+import { test, expect } from './msw-setup'
+
+test.describe('Smoke', () => {
+  test('home page loads and shows branding', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByRole('heading', { name: 'fete' })).toBeVisible()
+  })
+
+  test('home page has create event CTA', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByRole('link', { name: /create event/i })).toBeVisible()
+  })
+
+  test('navigating to /create shows the creation form', async ({ page }) => {
+    await page.goto('/')
+    await page.getByRole('link', { name: /create event/i }).click()
+    await expect(page).toHaveURL('/create')
+    await expect(page.getByLabel(/title/i)).toBeVisible()
+  })
+})
+```
+
+#### [x] 2. US-1 event creation flow test
+**File**: `frontend/e2e/event-create.spec.ts`
+
+```typescript
+import { test, expect } from './msw-setup'
+
+test.describe('US-1: Create an event', () => {
+  test('shows validation errors for empty required fields', async ({ page }) => {
+    await page.goto('/create')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    await expect(page.getByText('Title is required.')).toBeVisible()
+    await expect(page.getByText('Date and time are required.')).toBeVisible()
+    await expect(page.getByText('Expiry date is required.')).toBeVisible()
+  })
+
+  test('creates an event and redirects to stub page', async ({ page }) => {
+    await page.goto('/create')
+
+    // Fill the form
+    await page.getByLabel(/title/i).fill('Summer BBQ')
+    await page.getByLabel(/description/i).fill('Bring your own drinks')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/location/i).fill('Central Park')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    // Submit — MSW returns the OpenAPI example response
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    // Should redirect to the event stub page
+    await expect(page).toHaveURL(/\/events\/.+/)
+    await expect(page.getByText('Event created!')).toBeVisible()
+  })
+
+  test('stores event data in localStorage after creation', async ({ page }) => {
+    await page.goto('/create')
+
+    await page.getByLabel(/title/i).fill('Summer BBQ')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+    await expect(page).toHaveURL(/\/events\/.+/)
+
+    // Verify localStorage was populated
+    const storage = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete_events')
+      return raw ? JSON.parse(raw) : null
+    })
+    expect(storage).not.toBeNull()
+    expect(storage).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ title: 'Summer BBQ' }),
+      ]),
+    )
+  })
+
+  test('shows server error on API failure', async ({ page, network }) => {
+    // Override the default MSW handler to return a 400 error
+    await network.use(
+      // Exact override syntax depends on @msw/playwright API —
+      // may need adjustment based on actual package API
+    )
+
+    await page.goto('/create')
+    await page.getByLabel(/title/i).fill('Test')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    // Should show error message, not redirect
+    await expect(page.getByRole('alert')).toBeVisible()
+  })
+})
+```
+
+**Note on the server error test:** The exact override syntax for `network.use()` depends on the `@msw/playwright` API. During implementation, this will need to be adapted to the actual package API. The pattern is: override the `POST /api/events` handler to return a 400/500 response.
+
+### Success Criteria:
+
+#### Automated Verification:
+- [ ] `cd frontend && npm run test:e2e` passes — all tests green
+- [ ] No TypeScript errors in test files
+
+#### Manual Verification:
+- [ ] Tests cover: home page rendering, navigation, form validation, successful creation flow, localStorage persistence
+- [ ] Test names are descriptive and map to acceptance criteria
+
+**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
+
+---
+
+## Phase 5: CI Integration
+
+### Overview
+Add a Playwright E2E test step to the Gitea Actions CI pipeline.
+
+### Changes Required:
+
+#### [x] 1. Add E2E job to CI workflow
+**File**: `.gitea/workflows/ci.yaml`
+
+Add a new job `frontend-e2e` after the existing `frontend-test` job:
+
+```yaml
+  frontend-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: cd frontend && npm ci
+
+      - name: Install Playwright browsers
+        run: cd frontend && npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: cd frontend && npm run test:e2e
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30
+```
+
+#### [x] 2. Add E2E to the `needs` array of `build-and-publish`
+**File**: `.gitea/workflows/ci.yaml`
+
+Update the `build-and-publish` job:
+```yaml
+  build-and-publish:
+    needs: [backend-test, frontend-test, frontend-e2e]
+```
+
+This ensures Docker images are only published if E2E tests also pass.
+
+### Success Criteria:
+
+#### Automated Verification:
+- [ ] CI YAML is valid (no syntax errors)
+- [ ] `frontend-e2e` job uses `chromium` only (no full browser install)
+
+#### Manual Verification:
+- [ ] E2E job runs independently from backend-test (no unnecessary dependency)
+- [ ] `build-and-publish` requires all three test jobs
+- [ ] Report artifact is uploaded even on test failure (`!cancelled()`)
+
+**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
+
+---
+
+## Testing Strategy
+
+### E2E Tests (this plan):
+- Smoke test: app loads, branding visible, navigation works
+- US-1 happy path: fill form → submit → redirect → stub page
+- US-1 validation: empty required fields show errors
+- US-1 localStorage: event data persisted after creation
+- US-1 error handling: API failure shows error message
+
+### Existing Unit/Component Tests (unchanged):
+- `useEventStorage.spec.ts` — 6 tests
+- `EventCreateView.spec.ts` — 11 tests
+- `EventStubView.spec.ts` — 8 tests
+
+### Future:
+- Each new user story adds its own E2E tests
+- Page Object Model when test suite grows beyond 5-10 tests
+- Cross-browser testing (Firefox/WebKit) as needed
+
+## Performance Considerations
+
+- Chromium-only keeps install time and test runtime low
+- `reuseExistingServer` in local dev avoids restarting Vite per test run
+- Single worker in CI prevents flakiness from parallel state issues
+- MSW intercepts at network level — no real backend needed, fast test execution
+
+## References
+
+- Research: `docs/agents/research/2026-03-05-e2e-testing-playwright-vue3.md`
+- OpenAPI spec: `backend/src/main/resources/openapi/api.yaml`
+- Existing views: `frontend/src/views/EventCreateView.vue`, `EventStubView.vue`, `HomeView.vue`
+- CI pipeline: `.gitea/workflows/ci.yaml`
+- Vitest config: `frontend/vitest.config.ts`

docs/agents/research/2026-03-05-e2e-testing-playwright-vue3.md

@@ -0,0 +1,273 @@
+---
+date: 2026-03-05T10:14:52+00:00
+git_commit: ffea279b54ad84be09bd0e82b3ed9c89a95fc606
+branch: master
+topic: "End-to-End Testing for Vue 3 with Playwright"
+tags: [research, e2e, playwright, testing, frontend]
+status: complete
+---
+
+# Research: End-to-End Testing for Vue 3 with Playwright
+
+## Research Question
+
+How to set up and structure end-to-end tests for the fete Vue 3 + Vite frontend using Playwright?
+
+## Summary
+
+Playwright is Vue 3's officially recommended E2E testing framework. It integrates with Vite projects through a `webServer` config block (no Vite plugin needed), supports Chromium/Firefox/WebKit under a single API, and is fully free including parallelism. The fete project's existing vitest.config.ts already excludes `e2e/**`, making the integration path clean.
+
+## Detailed Findings
+
+### 1. Current Frontend Test Infrastructure
+
+The project uses **Vitest 4.0.18** with jsdom for unit/component tests:
+
+- **Config:** `frontend/vitest.config.ts` — merges with vite.config, uses jsdom environment, bail on first failure
+- **Exclusion:** Already excludes `e2e/**` from Vitest's test discovery (`vitest.config.ts:10`)
+- **Existing tests:** 3 test files with ~25 tests total:
+  - `src/composables/__tests__/useEventStorage.spec.ts` (6 tests)
+  - `src/views/__tests__/EventCreateView.spec.ts` (11 tests)
+  - `src/views/__tests__/EventStubView.spec.ts` (8 tests)
+- **No E2E framework** is currently configured
+
+### 2. Why Playwright
+
+Vue's official testing guide ([vuejs.org/guide/scaling-up/testing](https://vuejs.org/guide/scaling-up/testing)) positions Playwright as the primary E2E recommendation. Key advantages over Cypress:
+
+| Dimension | Playwright | Cypress |
+|---|---|---|
+| Browser support | Chromium, Firefox, WebKit | Chrome-family, Firefox (WebKit experimental) |
+| Parallelism | Free, native | Requires paid Cypress Cloud |
+| Architecture | Out-of-process (CDP/BiDi) | In-browser (same process) |
+| Speed | 35-45% faster in parallel | Slower at scale |
+| Pricing | 100% free, Apache 2.0 | Cloud features cost money |
+| Privacy | No account, no cloud dependency | Cloud service integration |
+
+Playwright aligns with fete's privacy constraints (no cloud dependency, no account required).
+
+### 3. Playwright + Vite Integration
+
+Playwright does **not** use a Vite plugin. Integration is purely through process management:
+
+1. Playwright reads `webServer.command` and spawns the Vite dev server
+2. Polls `webServer.url` until ready
+3. Runs tests against `use.baseURL`
+4. Kills the server after all tests finish
+
+The existing Vite dev proxy (`/api` → `localhost:8080`) works transparently — E2E tests can hit the real backend or intercept via `page.route()` mocks.
+
+Note: `@playwright/experimental-ct-vue` exists for component-level testing (mounting individual Vue components without a server), but is still experimental and is a different category from E2E.
+
+### 4. Installation
+
+```bash
+cd frontend
+npm install --save-dev @playwright/test
+npx playwright install --with-deps chromium
+```
+
+Using `npm init playwright@latest` generates scaffolding automatically, but for an existing project manual setup is cleaner.
+
+### 5. Project Structure
+
+```
+frontend/
+  playwright.config.ts       # Playwright config
+  e2e/                       # E2E test directory
+    home.spec.ts
+    event-create.spec.ts
+    event-view.spec.ts
+    fixtures/                # shared test fixtures (optional)
+    helpers/                 # page object models (optional)
+  playwright-report/         # generated HTML report (gitignored)
+  test-results/              # generated artifacts (gitignored)
+```
+
+The `e2e/` directory is already excluded from Vitest via `vitest.config.ts:10`.
+
+### 6. Recommended playwright.config.ts
+
+```typescript
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'html',
+
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // Uncomment for cross-browser coverage:
+    // { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    // { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    stdout: 'pipe',
+  },
+})
+```
+
+Key decisions:
+- `testDir: './e2e'` — separates E2E from Vitest unit tests
+- `forbidOnly: !!process.env.CI` — prevents `test.only` from shipping to CI
+- `workers: process.env.CI ? 1 : undefined` — single worker in CI avoids shared-state flakiness; locally uses all cores
+- `reporter: 'github'` — GitHub Actions annotations in CI
+- `command: 'npm run dev'` — runs `generate:api` first (via the existing npm script), then starts Vite
+- `reuseExistingServer: !process.env.CI` — reuses running dev server locally for fast iteration
+
+### 7. package.json Scripts
+
+```json
+"test:e2e": "playwright test",
+"test:e2e:ui": "playwright test --ui",
+"test:e2e:debug": "playwright test --debug"
+```
+
+### 8. .gitignore Additions
+
+```
+playwright-report/
+test-results/
+```
+
+### 9. TypeScript Configuration
+
+The existing `tsconfig.app.json` excludes `src/**/__tests__/*`. Since E2E tests live in `e2e/` (outside `src/`), they are already excluded from the app build.
+
+A separate `tsconfig` for E2E tests is not strictly required — Playwright's own TypeScript support handles it. If needed, a minimal `e2e/tsconfig.json` can extend `tsconfig.node.json`.
+
+### 10. Vue-Specific Testing Patterns
+
+**Router navigation:**
+```typescript
+await page.goto('/events/abc-123')
+await page.waitForURL('/events/abc-123')  // confirms SPA router resolved
+```
+
+**Waiting for reactive content (auto-retry):**
+```typescript
+await expect(page.getByRole('heading', { name: 'My Event' })).toBeVisible()
+// Playwright auto-retries assertions for up to the configured timeout
+```
+
+**URL assertions:**
+```typescript
+await expect(page).toHaveURL(/\/events\/.+/)
+```
+
+**API mocking (for isolated E2E tests):**
+```typescript
+await page.route('/api/events/**', async (route) => {
+  await route.fulfill({
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify({ title: 'Test Event', date: '2026-04-01' }),
+  })
+})
+```
+
+**Locator strategy — prefer accessible locators:**
+```typescript
+page.getByRole('button', { name: 'RSVP' })    // best
+page.getByLabel('Event Title')                 // form fields
+page.getByTestId('event-card')                 // data-testid fallback
+page.locator('.some-class')                    // last resort
+```
+
+### 11. CI Integration
+
+**GitHub Actions workflow:**
+```yaml
+- name: Install Playwright browsers
+  run: npx playwright install --with-deps chromium
+  # --with-deps installs OS-level libraries (libglib, libnss, etc.)
+  # Specify 'chromium' to save ~2min vs installing all browsers
+
+- name: Run E2E tests
+  run: npx playwright test
+
+- uses: actions/upload-artifact@v4
+  if: ${{ !cancelled() }}
+  with:
+    name: playwright-report
+    path: frontend/playwright-report/
+    retention-days: 30
+```
+
+**Docker:** Use official images `mcr.microsoft.com/playwright:v1.x.x-noble` (Ubuntu 24.04). Alpine is unsupported (browsers need glibc). Key flag: `--ipc=host` prevents Chromium memory exhaustion. The Playwright Docker image version must match the `@playwright/test` package version exactly.
+
+For the fete project, E2E tests run as a separate CI step, not inside the app's Dockerfile.
+
+### 12. Integration with Existing Backend
+
+Two approaches for E2E tests:
+
+1. **Mocked backend** (via `page.route()`): Fast, isolated, no backend dependency. Good for frontend-only testing.
+2. **Real backend**: Start Spring Boot alongside Vite. Tests hit `/api` through the Vite proxy. More realistic but requires Java in CI. Could use Docker Compose.
+
+The Vite proxy config (`vite.config.ts:19-23`) already forwards `/api` to `localhost:8080`, so both approaches work without changes.
+
+## Code References
+
+- `frontend/vitest.config.ts:10` — E2E exclusion pattern already in place
+- `frontend/vite.config.ts:19-23` — API proxy configuration for backend integration
+- `frontend/package.json:8-9` — `dev` script runs `generate:api` before Vite
+- `frontend/src/router/index.ts` — Route definitions (Home, Create, Event views)
+- `frontend/src/api/client.ts` — openapi-fetch client using `/api` base URL
+- `frontend/tsconfig.app.json` — App TypeScript config (excludes test files)
+
+## Architecture Documentation
+
+### Test Pyramid in fete
+
+| Layer | Framework | Directory | Purpose |
+|---|---|---|---|
+| Unit | Vitest + jsdom | `src/**/__tests__/` | Composables, isolated logic |
+| Component | Vitest + @vue/test-utils | `src/**/__tests__/` | Vue component behavior |
+| E2E | Playwright (proposed) | `e2e/` | Full browser, user flows |
+| Visual | browser-interactive-testing skill | `.agent-tests/` | Agent-driven screenshots |
+
+### Decision Points for Implementation
+
+1. **Start with Chromium only** — add Firefox/WebKit later if needed
+2. **Use `npm run dev`** as webServer command (includes API type generation)
+3. **API mocking by default** — use `page.route()` for E2E isolation; full-stack tests as a separate concern
+4. **`data-testid` attributes** on key interactive elements for stable selectors
+5. **Page Object Model** recommended once the test suite grows beyond 5-10 tests
+
+## Sources
+
+- [Testing | Vue.js](https://vuejs.org/guide/scaling-up/testing) — official E2E recommendation
+- [Installation | Playwright](https://playwright.dev/docs/intro)
+- [webServer | Playwright](https://playwright.dev/docs/test-webserver) — Vite integration
+- [CI Intro | Playwright](https://playwright.dev/docs/ci-intro)
+- [Docker | Playwright](https://playwright.dev/docs/docker)
+- [Cypress vs Playwright 2026 | BugBug](https://bugbug.io/blog/test-automation-tools/cypress-vs-playwright/)
+- [Playwright vs Cypress | Katalon](https://katalon.com/resources-center/blog/playwright-vs-cypress)
+
+## Decisions (2026-03-05)
+
+- **Mocked backend only** — E2E tests use `page.route()` to mock API responses. No real Spring Boot backend in E2E.
+- **Mocking stack:** `@msw/playwright` + `@msw/source` — reads OpenAPI spec at runtime, generates MSW handlers, per-test overrides via `network.use()`.
+- **US-1 flows first** — Event creation is the only implemented user story; E2E tests cover that flow.
+- **No CI caching yet** — Playwright browser binaries are not cached; CI runner needs reconfiguration first.
+- **E2E tests are part of frontend tasks** — every frontend user story includes E2E test coverage going forward.
+- **OpenAPI examples mandatory** — all response schemas in the OpenAPI spec must include `example:` fields (required for `@msw/source` mock generation).

frontend/.gitignore

@@ -38,3 +38,7 @@ __screenshots__/
 # Vite
 *.timestamp-*-*.mjs
 .rodney/
+
+# Playwright
+playwright-report/
+test-results/

frontend/e2e/event-create.spec.ts

@@ -0,0 +1,69 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+test.describe('US-1: Create an event', () => {
+  test('shows validation errors for empty required fields', async ({ page }) => {
+    await page.goto('/create')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    await expect(page.getByText('Title is required.')).toBeVisible()
+    await expect(page.getByText('Date and time are required.')).toBeVisible()
+    await expect(page.getByText('Expiry date is required.')).toBeVisible()
+  })
+
+  test('creates an event and redirects to stub page', async ({ page }) => {
+    await page.goto('/create')
+
+    await page.getByLabel(/title/i).fill('Summer BBQ')
+    await page.getByLabel(/description/i).fill('Bring your own drinks')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/location/i).fill('Central Park')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    await expect(page).toHaveURL(/\/events\/.+/)
+    await expect(page.getByText('Event created!')).toBeVisible()
+  })
+
+  test('stores event data in localStorage after creation', async ({ page }) => {
+    await page.goto('/create')
+
+    await page.getByLabel(/title/i).fill('Summer BBQ')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+    await expect(page).toHaveURL(/\/events\/.+/)
+
+    const storage = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    expect(storage).not.toBeNull()
+    expect(storage).toHaveLength(1)
+    expect(storage[0]).toHaveProperty('eventToken')
+    expect(storage[0]).toHaveProperty('title')
+  })
+
+  test('shows server error on API failure', async ({ page, network }) => {
+    network.use(
+      http.post('*/api/events', () => {
+        return HttpResponse.json(
+          { title: 'Bad Request', status: 400, detail: 'Validation failed' },
+          { status: 400, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto('/create')
+    await page.getByLabel(/title/i).fill('Test')
+    await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
+    await page.getByLabel(/expiry/i).fill('2026-06-15')
+
+    await page.getByRole('button', { name: /create event/i }).click()
+
+    await expect(page.getByRole('alert')).toBeVisible()
+  })
+})

frontend/e2e/msw-setup.ts

@@ -0,0 +1,30 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { test as base, expect } from '@playwright/test'
+import { defineNetworkFixture, type NetworkFixture } from '@msw/playwright'
+import { fromOpenApi } from '@msw/source/open-api'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const specPath = resolve(__dirname, '../../backend/src/main/resources/openapi/api.yaml')
+const spec = readFileSync(specPath, 'utf-8')
+
+const handlers = await fromOpenApi(spec)
+
+interface Fixtures {
+  network: NetworkFixture
+}
+
+export const test = base.extend<Fixtures>({
+  network: [
+    async ({ context }, use) => {
+      const network = defineNetworkFixture({ context, handlers })
+      await network.enable()
+      await use(network)
+      await network.disable()
+    },
+    { auto: true },
+  ],
+})
+
+export { expect }

frontend/e2e/smoke.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from './msw-setup'
+
+test.describe('Smoke', () => {
+  test('home page loads and shows branding', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByRole('heading', { name: 'fete' })).toBeVisible()
+  })
+
+  test('home page has create event CTA', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByRole('link', { name: /create event/i })).toBeVisible()
+  })
+
+  test('navigating to /create shows the creation form', async ({ page }) => {
+    await page.goto('/')
+    await page.getByRole('link', { name: /create event/i }).click()
+    await expect(page).toHaveURL('/create')
+    await expect(page.getByLabel(/title/i)).toBeVisible()
+  })
+})

frontend/package.json

@@ -14,7 +14,10 @@
     "lint": "run-s lint:*",
     "lint:oxlint": "oxlint . --fix",
     "lint:eslint": "eslint . --fix --cache",
-    "format": "prettier --write --experimental-cli src/"
+    "format": "prettier --write --experimental-cli src/",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
   },
   "dependencies": {
     "openapi-fetch": "^0.17.0",
@@ -22,6 +25,9 @@
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
+    "@msw/playwright": "^0.6.5",
+    "@msw/source": "^0.6.1",
+    "@playwright/test": "^1.58.2",
     "@tsconfig/node24": "^24.0.4",
     "@types/jsdom": "^28.0.0",
     "@types/node": "^24.11.0",
@@ -29,13 +35,14 @@
     "@vitest/eslint-plugin": "^1.6.9",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
+    "@vue/tsconfig": "^0.9.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-oxlint": "~1.50.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
     "jsdom": "^28.1.0",
+    "msw": "^2.12.10",
     "npm-run-all2": "^8.0.4",
     "openapi-typescript": "^7.13.0",
     "oxlint": "~1.50.0",

frontend/playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// Suppress Node 25 warning from MSW's cookieStore accessing native localStorage
+// without --localstorage-file being set. Harmless — MSW doesn't need file-backed storage.
+const originalEmit = process.emit.bind(process)
+process.emit = function (event: string, ...args: unknown[]) {
+  if (event === 'warning' && args[0] instanceof Error && args[0].message.includes('--localstorage-file')) {
+    return false
+  }
+  return originalEmit(event, ...args)
+} as typeof process.emit
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'html',
+
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    stdout: 'pipe',
+  },
+})