test(playwright): refactor testing framework to use projects

Author: OliverDudgeon

.github/workflows/test.yaml

@@ -74,7 +74,6 @@ jobs:
         KEYCLOAK_URL: "https://keycloak.xchem-dev.diamond.ac.uk/auth/realms/xchem"
         PW_USERNAME: "dmit-user-a"
         PW_PASSWORD: "${{ secrets.DMIT_USER_A_PASSWORD }}"
-        TEST_PORT: 3000
       run: pnpm test:ci
     - name: Upload results for bath path
       if: always()

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "iridium.npm.packageManager": "pnpm",
   "editor.tabSize": 2,
   "emmet.includeLanguages": {
     "mdx": "html"
@@ -21,4 +20,5 @@
     ".env": "shellscript",
     ".env.*": "shellscript",
   },
+  "playwright.reuseBrowser": false,
 }

package.json

@@ -22,7 +22,7 @@
     "lint": "eslint --cache --max-warnings=0",
     "format": "eslint --fix --cache --max-warnings=0",
     "format:all": "eslint --fix --cache .",
-    "test": "export $(cat .env.test.local | xargs) && playwright test",
+    "test": "playwright test",
     "test:debug": "PWDEBUG=1 pnpm t -- --headed",
     "test:ci": "playwright test",
     "analyze": "ANALYZE=true next build",
@@ -106,6 +106,7 @@
     "@next/bundle-analyzer": "13.2.4",
     "@playwright/test": "1.31.2",
     "@squonk/eslint-config": "0.5.0",
+    "dotenv": "^16.0.3",
     "eslint": "8.36.0",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",

playwright.config.ts

@@ -1,29 +1,35 @@
-import type { PlaywrightTestConfig } from "@playwright/test";
+import { defineConfig } from "@playwright/test";
+import path from "node:path";
 
-const { BASE_URL, BASE_PATH = "", TEST_PORT } = process.env;
+const { BASE_URL, BASE_PATH = "" } = process.env;
 
-if (!BASE_URL || !TEST_PORT) {
-  throw new Error("Possible missing environment variable: BASE_URL or TEST_PORT");
-}
+require("dotenv").config({ path: path.resolve(process.cwd(), ".env.test.local") });
 
-const config: PlaywrightTestConfig = {
-  globalSetup: require.resolve("./global-setup"),
-  webServer: {
-    command: `pnpm start -- -p ${TEST_PORT}`,
-    port: Number(TEST_PORT),
-    timeout: 200 * 1000,
-    env: {
-      NODE_ENV: "test",
+export default defineConfig({
+  projects: [
+    { name: "setup", testMatch: "**/*.setup.ts" },
+    {
+      name: "browser",
+      dependencies: ["setup"],
+      use: { storageState: "storageState.json" },
+      retries: 3,
+      timeout: 60000,
+      testMatch: "**/*.browser.ts",
     },
-  },
+    { name: "node", testMatch: "**/*.node.ts" },
+  ],
   use: {
     baseURL: BASE_URL + BASE_PATH,
-    storageState: "storageState.json",
     screenshot: "on",
     trace: "on-first-retry", // record traces on first retry of each test
   },
-  timeout: 60000,
-  retries: 3,
-};
-
-export default config;
+  webServer: {
+    command: `pnpm start`,
+    port: 3000,
+    timeout: 200 * 1000,
+    env: {
+      NODE_ENV: "test",
+    },
+  },
+  testDir: "tests",
+});