Add Docker for local visual regression testing and fix Node.js version at 24 LTS

Author: leonard84

.github/workflows/deploy.yaml

@@ -37,7 +37,7 @@ jobs:
             -   name: Set up Node
                 uses: actions/setup-node@v6
                 with:
-                    node-version: lts/*
+                    node-version: 24 # LTS
                     cache: 'npm'
                     cache-dependency-path: spock-website/package-lock.json
 

.github/workflows/update-reference-screenshots.yaml

@@ -9,6 +9,9 @@ permissions:
 jobs:
     update-screenshots:
         runs-on: ubuntu-latest
+        container:
+            image: mcr.microsoft.com/playwright:v1.57.0-noble
+            options: --user 1001
         defaults:
             run:
                 working-directory: ./spock-website
@@ -21,16 +24,13 @@ jobs:
             -   name: Set up Node
                 uses: actions/setup-node@v6
                 with:
-                    node-version: lts/*
+                    node-version: 24 # LTS
                     cache: 'npm'
                     cache-dependency-path: spock-website/package-lock.json
 
             -   name: Install dependencies
                 run: npm ci
 
-            -   name: Install Playwright Browsers
-                run: npx playwright install
-
             -   name: Run Playwright Tests updating snapshots
                 run: npx playwright test --update-snapshots
 

.github/workflows/verify.yaml

@@ -26,7 +26,7 @@ jobs:
             -   name: Set up Node
                 uses: actions/setup-node@v6
                 with:
-                    node-version: lts/*
+                    node-version: 24 # LTS
                     cache: 'npm'
                     cache-dependency-path: spock-website/package-lock.json
 
@@ -44,6 +44,9 @@ jobs:
 
     verify:
         runs-on: ubuntu-latest
+        container:
+            image: mcr.microsoft.com/playwright:v1.57.0-noble
+            options: --user 1001
         defaults:
             run:
                 working-directory: ./spock-website
@@ -63,9 +66,6 @@ jobs:
             -   name: Install dependencies
                 run: npm ci
 
-            -   name: Install Playwright Browsers
-                run: npx playwright install
-
             -   name: Run Playwright Tests
                 run: npx playwright test
 

spock-website/.dockerignore

@@ -0,0 +1,5 @@
+ dist/
+node_modules/
+playwright-report/
+test-results
+tests/

spock-website/Dockerfile

@@ -0,0 +1,17 @@
+FROM mcr.microsoft.com/playwright:v1.57.0-noble
+
+WORKDIR /app
+
+# Install latest Node.js 24 LTS and update npm
+RUN npm install -g n \
+    && n 24 \
+    && npm install -g npm \
+    && node --version \
+    && npm --version
+
+# Copy package files and install dependencies
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Copy the rest of the project files
+COPY . .

spock-website/Readme.md

@@ -0,0 +1,38 @@
+# Spock Website
+
+This folder contains the source code for the [Spock Framework](https://spockframework.org) website. It is built using [Vite](https://vitejs.dev/) and uses [Playwright](https://playwright.dev/) for visual regression testing.
+
+## Features
+
+- Modern frontend development with Vite and Tailwind CSS
+- Automated visual regression tests using Playwright
+- Easy snapshot updates via Docker
+
+## Development
+
+To start the development server:
+
+```sh
+npm ci
+npm run dev
+```
+
+## Visual Regression Testing
+
+Visual regression tests are located in the `tests/` directory and use Playwright to compare screenshots.
+
+The reference screenshots are taken on linux, so local testing requires the use of Docker.
+
+To run the tests locally:
+
+```sh
+./visual-regression-test.sh
+```
+This requires Docker to be installed and running on your machine.
+It will build a local docker image and run the tests inside a container.
+
+To update visual snapshots:
+
+```sh
+./visual-regression-test.sh --update-snapshots
+```

spock-website/package.json

@@ -7,12 +7,10 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "playwright test",
-    "update-snapshots": "playwright test --update-snapshots",
     "check-links": "linkinator"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "1.57.0",
     "@types/aos": "^3.0.7",
     "linkinator": "^7.5.1",
     "typescript": "~5.9.3",

spock-website/visual-regression-test.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+IMAGE_NAME="my-playwright-tester:latest"
+
+# Optional flag for updating screenshots
+UPDATE_FLAG=""
+if [[ "$1" == "--update-screenshots" ]]; then
+    UPDATE_FLAG="--update-snapshots"
+fi
+
+# Ensure required result/report directories exist
+mkdir -p "$(pwd)/test-results"
+mkdir -p "$(pwd)/playwright-report"
+
+# 1. Build the image
+docker build -t $IMAGE_NAME .
+
+# Check if the build was successful
+if [ $? -eq 0 ]; then
+    # 2. Run the container using the tagged image and mount the tests, test-results, and playwright-report directories
+    docker run --rm --ipc=host --init \
+        -v "$(pwd)/tests":/app/tests \
+        -v "$(pwd)/test-results":/app/test-results \
+        -v "$(pwd)/playwright-report":/app/playwright-report \
+        $IMAGE_NAME npx playwright test $UPDATE_FLAG
+else
+    echo "Docker build failed. Container not run."
+fi