chore: run tests via Docker container to produce consistent screenshots

Author: pkerschbaum

.github/workflows/ci.yml

@@ -68,10 +68,6 @@ jobs:
               run: |
                   npm ci
 
-            - name: Install Playwright Browsers
-              run: |
-                  npx playwright install --with-deps
-
             - name: Run Playwright tests
               run: |
                   npm run test:e2e

package.json

@@ -19,8 +19,8 @@
     "lint:fix:js": "eslint --max-warnings 0 . --fix",
     "fmt": "prettier --check .",
     "fmt:fix": "prettier --write .",
-    "test:e2e": "playwright test",
-    "test:e2e:update": "playwright test --update-snapshots"
+    "test:e2e": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/ playwright test",
+    "test:e2e:update": "npm run test:e2e -- --update-snapshots"
   },
   "lint-staged": {
     "**/*.{ts,tsx,jsx,js}": [

playwright.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
 	reporter: process.env.CI ? [["html"], ["github"]] : "html",
 
 	use: {
-		baseURL: "http://127.0.0.1:5173",
+		baseURL: `http://${process.env.CI ? "localhost" : "host.docker.internal"}:5173`,
 
 		// ensure consistent timezone and locale
 		timezoneId: "America/Los_Angeles",
@@ -48,9 +48,22 @@ export default defineConfig({
 		},
 	],
 
-	webServer: {
-		command: "npm run start",
-		url: "http://127.0.0.1:5173",
-		reuseExistingServer: !process.env.CI,
-	},
+	webServer: [
+		{
+			command: `docker run ${process.env.CI ? "--network host" : "--add-host=host.docker.internal:host-gateway"} -p 3000:3000 --rm --init --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.51.1-noble /bin/sh -c "npx -y [email protected] run-server --port 3000 --host 0.0.0.0"`,
+			url: "http://127.0.0.1:3000/",
+			stdout: "pipe",
+			stderr: "pipe",
+			gracefulShutdown: {
+				signal: "SIGTERM",
+				timeout: 10_000,
+			},
+			reuseExistingServer: !process.env.CI,
+		},
+		{
+			command: "npm run start",
+			url: "http://127.0.0.1:5173",
+			reuseExistingServer: !process.env.CI,
+		},
+	],
 });

vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
 		"process.env.NODE_DEBUG": JSON.stringify(process.env.NODE_DEBUG),
 	},
 	server: {
-		// accept connections on 127.0.0.1 because "localhost" is not resolved correctly by Playwright in CI
-		host: "127.0.0.1",
+		// accept connections from everywhere because Playwright browsers run from within a Docker container which has some random IP
+		host: "0.0.0.0",
 	},
 });