Migrate tests to Playwright

.github/workflows/node.js.yml

@@ -24,7 +24,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '20.x'
+        node-version: '24.x'
         cache: 'npm'
     - run: npm ci
     - run: npm run build --if-present

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Visual Regression
+
+on:
+  push:
+    branches: ["develop"]
+  pull_request:
+    branches: ["develop"]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - run: npm test
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: tests/playwright-report/
+          retention-days: 14

.github/workflows/update-snapshots.yml

@@ -0,0 +1,27 @@
+name: Update Playwright Snapshots
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref }}
+          fetch-depth: 0
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - run: npm run build && npx playwright test --update-snapshots
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "chore: update playwright snapshots"
+          file_pattern: "tests/snapshots/*.png"

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 *.css.map
-tests/backstop_data/
+tests/backstop_data/
+tests/snapshots/local/
+tests/test-results/
+tests/playwright-report/
+blob-report/
+playwright/.cache/

.nvmrc

@@ -1 +1 @@
-v20
+v24

README.md

@@ -56,12 +56,11 @@ Building and testing are relying on npm packages and scripts. To initialize your
 npm install
 ```
 
-In case you’re encountering an error with Puppeteer, make sure you’re using at least Node v.20.11.1 – it might work with an earlier version but only the latest LTS as of March 21, 2024 has been tested.
-
-Then create reference bitmaps for visual regression testing:
+Then install the Playwright browser binary and generate reference screenshots for visual regression testing:
 
 ```
-npm run test:ref
+npx playwright install chromium
+npm run test:update
 ```
 
 ### Build
@@ -78,10 +77,10 @@ To test the updated styles and catch visual regression bugs:
 npm run test
 ```
 
-To update reference bitmaps after a bugfix:
+To update reference screenshots after an intentional change:
 
 ```
-npm run test:approve
+npm run test:update
 ```
 
 ## Docs