Add Playwright E2E tests with MSW API mocking

- Playwright + @msw/playwright + @msw/source for OpenAPI-driven mocks
- Chromium-only configuration with Vite dev server integration
- Smoke tests: home page, CTA, navigation
- US-1 tests: validation, event creation flow, localStorage, error handling
- Suppress Node 25 --localstorage-file warning from MSW cookieStore

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",
@@ -36,6 +42,7 @@
     "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',
+  },
+})