Try out using playwright for end to end tests.

.github/workflows/ci.yml

@@ -70,6 +70,9 @@ jobs:
           package_json_file: frontend/package.json
           run_install: false
         if: startsWith(matrix.noxenv, 'ui')
+      - name: Install playwright browsers
+        run: pnpm --dir frontend dlx playwright install --with-deps
+        if: matrix.noxenv == 'ui(tests)'
 
       - name: Set up uv
         uses: astral-sh/setup-uv@v5

.gitignore

@@ -6,6 +6,7 @@ _templates
 
 /frontend/node_modules
 /frontend/build
+/frontend/test-results
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

frontend/e2e/notFound.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+
+test('shows 404 page for non-existent routes', async ({ page }) => {
+  await page.goto('/#/non-existent-route');
+  await expect(page.getByText('Page not found')).toBeVisible();
+});

frontend/package.json

@@ -29,7 +29,9 @@
     "bundle-visualizer": "vite-bundle-visualizer",
     "preview": "vite preview",
     "lint": "eslint --max-warnings 0 src",
-    "test": "vitest run",
+    "test:unit": "vitest run",
+    "test:e2e": "playwright test",
+    "test": "vitest run; playwright test",
     "watch-test": "vitest watch"
   },
   "dependencies": {
@@ -49,6 +51,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
+    "@playwright/test": "^1.49.1",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.7",

frontend/playwright.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'e2e',
+})

frontend/tsconfig.json

@@ -19,5 +19,5 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
-  "include": ["src", "vite.config.ts"]
+  "include": [ "src", "e2e", "playwright.config.ts", "vite.config.ts" ]
 }

frontend/vitest.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   test: {
+    exclude: ["**/e2e/**"],
     environment: "jsdom",
   },
 });