test(frontend): basic e2e testing framework

control/frontend/.gitignore

@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# test
+test-results/

control/frontend/e2e/basic.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('page loads', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('main')).toBeVisible();
+});

control/frontend/package-lock.json

@@ -22,6 +22,7 @@
 			"devDependencies": {
 				"@eslint/compat": "^1.2.5",
 				"@eslint/js": "^9.18.0",
+				"@playwright/test": "^1.57.0",
 				"@sveltejs/adapter-auto": "^6.0.0",
 				"@sveltejs/adapter-static": "^3.0.9",
 				"@sveltejs/kit": "^2.22.0",
@@ -36,7 +37,7 @@
 				"prettier-plugin-svelte": "^3.3.3",
 				"sass-embedded": "^1.93.3",
 				"svelte": "^5.0.0",
-				"svelte-check": "^4.0.0",
+				"svelte-check": "^4.3.5",
 				"svelte-dnd-action": "^0.9.65",
 				"tailwindcss": "^4.0.0",
 				"typescript": "^5.0.0",
@@ -1143,6 +1144,22 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/@playwright/test": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+			"integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright": "1.57.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -4196,6 +4213,53 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/playwright": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+			"integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.57.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+			"integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+			"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.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -5228,9 +5292,9 @@
 			}
 		},
 		"node_modules/svelte-check": {
-			"version": "4.3.3",
+			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.3.tgz",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.5.tgz",
-			"integrity": "sha512-RYP0bEwenDXzfv0P1sKAwjZSlaRyqBn0Fz1TVni58lqyEiqgwztTpmodJrGzP6ZT2aHl4MbTvWP6gbmQ3FOnBg==",
+			"integrity": "sha512-e4VWZETyXaKGhpkxOXP+B/d0Fp/zKViZoJmneZWe/05Y2aqSKj3YN2nLfYPJBQ87WEiY4BQCQ9hWGu9mPT1a1Q==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

control/frontend/package.json

@@ -11,11 +11,14 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint . && prettier --check .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"test:e2e": "playwright test",
+		"test": "deno task test:e2e"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@playwright/test": "1.56.1",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/adapter-static": "^3.0.9",
 		"@sveltejs/kit": "^2.22.0",
@@ -30,7 +33,7 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"sass-embedded": "^1.93.3",
 		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.3.5",
 		"svelte-dnd-action": "^0.9.65",
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",

control/frontend/playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	webServer: {
+		command: 'deno task build && deno task preview',
+		port: 4173
+	},
+	testDir: 'e2e'
+});

flake.lock

@@ -2,16 +2,16 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1765779637,
+        "lastModified": 1766997096,
-        "narHash": "sha256-KJ2wa/BLSrTqDjbfyNx70ov/HdgNBCBBSQP3BIzKnv4=",
+        "narHash": "sha256-uOUlyNs3URxA+r8U7jeMe+W2X9kRriP2DqvaeeGzkTQ=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "1306659b587dc277866c7b69eb97e5f07864d8c4",
+        "rev": "088e9a071796304ed9ac3d666164e1ccb9b53f66",
         "type": "github"
       },
       "original": {
         "owner": "nixos",
-        "ref": "nixos-unstable",
+        "ref": "nixos-25.11-small",
         "repo": "nixpkgs",
         "type": "github"
       }

flake.nix

@@ -1,6 +1,6 @@
 {
   inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-25.11-small";
   };
 
   outputs = {
@@ -18,7 +18,13 @@
         ffmpeg
         ghostscript
         gnome-screenshot
+
+        playwright-driver.browsers
       ];
+
+      PLAYWRIGHT_BROWSERS_PATH = pkgs.playwright-driver.browsers;
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "true";
+      PW_DISABLE_TS_ESM = "true";
     };
   };
 }