use host.docker.internal to access dev-server from e2e-test

docker-compose.yml

@@ -1,4 +1,9 @@
 services:
   browsers:
     build: ./playwright-docker
-    network_mode: host
+    ports:
+      - 3000:3000
+    extra_hosts:
+      # Access host from container for Mac, Windows and Linux
+      # see https://stackoverflow.com/a/43541732
+      - "host.docker.internal:host-gateway"

playwright.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: "html",
   use: {
-    baseURL: "http://127.0.0.1:5173",
+    baseURL: "http://host.docker.internal:5173",
     trace: "on-first-retry",
   },
   expect: {
@@ -30,7 +30,7 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: "npm run dev:server -- --port 5173",
+    command: "npm run dev:server -- --port 5173 --host 0.0.0.0",
     url: "http://localhost:5173",
     stdout: "pipe",
     timeout: 10000,

src/manual-testing/e2e-helper.ts

@@ -17,5 +17,5 @@ function getAssociatedUrl(url: string): string {
   const baseUrl = new URL("..", import.meta.url).href;
   const relativePath = "./" + url.slice(baseUrl.length);
   const associatedModule = relativePath.replace(/\.spec\.ts$/, ".ts");
-  return `http://localhost:5173?test=${encodeURIComponent(associatedModule)}&playwright=true`;
+  return `/?test=${encodeURIComponent(associatedModule)}&playwright=true`;
 }