chore: e2e local development (#564)

# Motivation

It's easier to develop E2E tests while being able to run those against a
local server and not in headless mode. This PR provides such a setup.

# Changes

- Add new `npm run e2e:dev` command line
- If dev mode, then use dev server and no headles in the Playwright
config

package.json

@@ -19,7 +19,8 @@
     "e2e": "npm run download:samples && playwright test",
     "e2e:ci": "npm run download:samples && playwright test --reporter=html",
     "e2e:snapshots": "npm run download:samples && npx playwright test --update-snapshots --reporter=list",
-    "e2e:report": "npx playwright show-report"
+    "e2e:report": "npx playwright show-report",
+    "e2e:dev": "NODE_ENV=development playwright test"
   },
   "sideEffects": [
     "**/*.css"

playwright.config.ts

@@ -1,11 +1,21 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
 import { devices } from "@playwright/test";
 
+const DEV = (process.env.NODE_ENV ?? "production") === "development";
+
+const webServer = DEV
+  ? {
+      command: "npm run dev",
+      reuseExistingServer: true,
+      port: 5173,
+    }
+  : {
+      command: "npm run staging && npm run preview",
+      port: 4173,
+    };
+
 const config: PlaywrightTestConfig = {
-  webServer: {
-    command: "npm run staging && npm run preview",
-    port: 4173,
-  },
+  webServer,
   testDir: "e2e",
   testMatch: ["**/*.e2e.ts"],
   use: {