test: Setup playwright testing

README.md

@@ -21,9 +21,21 @@ directory. The website will be built statically in `build/`. Note that changing
 
 ## Developing
 
-Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then start the dev server with
+Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then
+start the dev server with
 
 ```bash
 npm run dev [-- --open]
 ```
 
+### Testing
+
+To run tests
+``` bash
+npx playwright test
+```
+
+All tests must have the suffix `.spec.[jt]s`. Be cautious while updating
+`playwright` since the versions in `nixpkgs` and `node` must exactly match.
+
+

flake.nix

@@ -21,6 +21,7 @@
       "x86_64-darwin"
     ];
     perSystem = { system, pkgs, ... }: let
+      nodejs = pkgs.nodejs_22;
       module = {
         lib,
           config,
@@ -61,8 +62,15 @@
         };
       };
       devShells.default = pkgs.mkShell {
+        packages = [
+          pkgs.playwright-driver.browsers
+        ];
+        PLAYWRIGHT_NODEJS_PATH = "${nodejs}/bin/node";
+        PLAYWRIGHT_BROWSERS_PATH = "${pkgs.playwright-driver.browsers}";
+        PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = 1;
+        PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS = 1;
         buildInputs = [
-          pkgs.nodejs_22
+          nodejs
         ];
       };
     };

package-lock.json

@@ -19,7 +19,7 @@
 				"tailwind-variants": "^0.2.1"
 			},
 			"devDependencies": {
-				"@playwright/test": "^1.28.1",
+				"@playwright/test": "^1.40.0",
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/adapter-static": "^3.0.5",
 				"@sveltejs/kit": "^2.0.0",
@@ -759,36 +759,20 @@
 			}
 		},
 		"node_modules/@playwright/test": {
-			"version": "1.47.0",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.0.tgz",
-			"integrity": "sha512-SgAdlSwYVpToI4e/IH19IHHWvoijAYH5hu2MWSXptRypLSnzj51PcGD+rsOXFayde4P9ZLi+loXVwArg6IUkCA==",
+			"version": "1.40.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
+			"integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
+			"deprecated": "Please update to the latest version of Playwright to test up-to-date browsers.",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
-				"playwright": "1.47.0"
+				"playwright": "1.40.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
 			},
 			"engines": {
-				"node": ">=18"
-			}
-		},
-		"node_modules/@playwright/test/node_modules/playwright": {
-			"version": "1.47.0",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.0.tgz",
-			"integrity": "sha512-jOWiRq2pdNAX/mwLiwFYnPHpEZ4rM+fRSQpRHwEwZlP2PUANvL3+aJOF/bvISMhFD30rqMxUB4RJx9aQbfh4Ww==",
-			"dev": true,
-			"dependencies": {
-				"playwright-core": "1.47.0"
-			},
-			"bin": {
-				"playwright": "cli.js"
-			},
-			"engines": {
-				"node": ">=18"
-			},
-			"optionalDependencies": {
-				"fsevents": "2.3.2"
+				"node": ">=16"
 			}
 		},
 		"node_modules/@polka/url": {
@@ -3485,16 +3469,36 @@
 				"node": ">= 6"
 			}
 		},
-		"node_modules/playwright-core": {
-			"version": "1.47.0",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.0.tgz",
-			"integrity": "sha512-1DyHT8OqkcfCkYUD9zzUTfg7EfTd+6a8MkD/NWOvjo0u/SCNd5YmY/lJwFvUZOxJbWNds+ei7ic2+R/cRz/PDg==",
+		"node_modules/playwright": {
+			"version": "1.40.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
+			"integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
 			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.40.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.40.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
+			"integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+			"dev": true,
+			"license": "Apache-2.0",
 			"bin": {
 				"playwright-core": "cli.js"
 			},
 			"engines": {
-				"node": ">=18"
+				"node": ">=16"
 			}
 		},
 		"node_modules/postcss": {

package.json

@@ -16,7 +16,7 @@
 		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
+		"@playwright/test": "^1.40.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.0.0",

src/routes/+page.svelte

@@ -65,7 +65,7 @@
 	</div>
 </div>
 
-<div id="main">
+<main>
 	<div id="bio" class="bg-background">
 		<div class="p-1">
 			<div class="flex">
@@ -86,7 +86,7 @@
 			<Content />
 		</article>
 	</div>
-</div>
+</main>
 
 <svelte:window
 	bind:scrollY={scrollPosition}
@@ -124,7 +124,7 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
-	#main {
+	main {
 		width: 100%;
 		@apply bg-background;
 		box-shadow:

tests/home.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has main and background', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('main')).toBeVisible();
+	await expect(page.locator('#background')).toBeVisible();
+});

tests/test.ts

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