test(e2e): playwright smoke for create→practice flow

.gitignore

@@ -6,6 +6,10 @@ build/
 .env.local
 data/*.db
 data/*.db-*
+**/data/*.db
+**/data/*.db-*
+**/test-results/
+**/playwright-report/
 coverage/
 .vite/
 *.log

e2e/smoke.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('create lesson, add card, practice once', async ({ page }) => {
+  await page.goto('/admin');
+  await page.getByPlaceholder('Nieuwe wortel-les...').fill('E2E les');
+  await page.getByRole('button', { name: 'Toevoegen' }).click();
+  await page.getByRole('link', { name: /E2E les/ }).click();
+  await page.getByPlaceholder('Nieuwe vraag').fill('q1');
+  await page.getByPlaceholder('Antwoord').fill('a1');
+  await page.getByRole('button', { name: '+' }).click();
+  await page.getByRole('link', { name: /Start oefenen/ }).click();
+  await page.getByRole('button', { name: 'Start' }).click();
+  await page.getByRole('button', { name: 'Toon antwoord' }).click();
+  await page.getByRole('button', { name: 'Goed' }).click();
+  await expect(page.getByText(/Sessie klaar!/)).toBeVisible();
+});

package-lock.json

@@ -1494,6 +1494,22 @@
         "@noble/hashes": "^1.1.5"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
@@ -4893,6 +4909,53 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -7808,6 +7871,7 @@
         "zustand": "^4.5.0"
       },
       "devDependencies": {
+        "@playwright/test": "^1.60.0",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.0",
         "@types/canvas-confetti": "^1.6.0",

package.json

@@ -10,6 +10,7 @@
     "dev:fe": "npm -w @flashcard/frontend run dev",
     "build": "npm -w @flashcard/shared run build && npm -w @flashcard/backend run build && npm -w @flashcard/frontend run build",
     "start": "node packages/backend/dist/index.js",
+    "e2e": "playwright test --config packages/frontend/playwright.config.ts",
     "test": "npm -w @flashcard/backend run test && npm -w @flashcard/frontend run test",
     "db:migrate": "npm -w @flashcard/backend run db:migrate",
     "db:seed": "npm -w @flashcard/backend run db:seed",

packages/frontend/package.json

@@ -20,6 +20,7 @@
     "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@types/canvas-confetti": "^1.6.0",

packages/frontend/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: '../../e2e',
+  webServer: [
+    {
+      command:
+        'rm -f data/e2e.db && DB_PATH=./data/e2e.db npm -w @flashcard/backend run db:migrate && DB_PATH=./data/e2e.db npm -w @flashcard/backend run dev',
+      cwd: '../..',
+      port: 3000,
+      reuseExistingServer: false,
+      timeout: 60_000,
+    },
+    {
+      command: 'npm -w @flashcard/frontend run dev',
+      cwd: '../..',
+      port: 5173,
+      reuseExistingServer: false,
+      timeout: 60_000,
+    },
+  ],
+  use: { baseURL: 'http://localhost:5173' },
+  timeout: 30_000,
+});