chore: setup playwright

Author: pkerschbaum

.github/workflows/ci.yml

@@ -48,3 +48,41 @@ jobs:
             - name: Check formatting of everything (prettier)
               run: |
                   npm run fmt
+
+    e2e-test:
+        name: E2E Tests (Playwright)
+        timeout-minutes: 60
+        # run only if triggered by push on a branch or by a PR event for a PR which is not a draft
+        if: ${{ !github.event.pull_request || github.event.pull_request.draft == false }}
+        runs-on: ubuntu-24.04
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version-file: ".nvmrc"
+                  cache: npm
+
+            - name: Install dependencies
+              run: |
+                  npm ci
+
+            - name: Install Playwright Browsers
+              run: |
+                  npx playwright install --with-deps
+
+            - name: Start the server
+              run: |
+                  npm run start &
+
+            - name: Run Playwright tests
+              run: |
+                  npm run test:e2e
+
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 30

.gitignore

@@ -58,3 +58,9 @@ next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -28,6 +28,7 @@ Open [http://localhost:5173](http://localhost:5173) with your browser to see the
 
 -   `npm run start`: Starts the development server.
 -   `npm run build`: Builds the app for production.
+-   `npm run test:e2e:update`: Runs all End-to-End tests and updates the screenshots/snapshots.
 
 ## Configuration
 

package-lock.json

@@ -18,7 +18,9 @@
     "lint:js": "eslint --max-warnings 0 .",
     "lint:fix:js": "eslint --max-warnings 0 . --fix",
     "fmt": "prettier --check .",
-    "fmt:fix": "prettier --write ."
+    "fmt:fix": "prettier --write .",
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots"
   },
   "lint-staged": {
     "**/*.{ts,tsx,jsx,js}": [
@@ -77,6 +79,7 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.1",
     "@types/eslint-scope": "^3.7.7",
     "@types/espree": "^10.0.0",
     "@types/esquery": "^1.5.4",

package.json

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./e2e-tests",
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 1 : 0,
+	reporter: process.env.CI ? [["html"], ["github"]] : "html",
+
+	use: {
+		baseURL: "http://127.0.0.1:5173",
+
+		/* Capture trace and video on first retry (retries are only done in CI) */
+		trace: "on-first-retry",
+		video: "on-first-retry",
+	},
+
+	expect: {
+		toHaveScreenshot: {
+			/* Screenshots are never exactly the same for various reasons - allow a small amount of pixel difference */
+			maxDiffPixelRatio: 0.05,
+		},
+	},
+
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
+});

playwright.config.ts

@@ -18,4 +18,8 @@ export default defineConfig({
 	define: {
 		"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",
+	},
 });