Add Playwright for end-to-end and visual regression testing

.github/workflows/localisation.yml

@@ -1,45 +1,45 @@
 name: Localisation Workflow
 
 on:
-  push:
-    branches:
-      - localisation
-  pull_request:
-    branches:
-      - localisation
-  workflow_dispatch:
+    push:
+        branches:
+            - localisation
+    pull_request:
+        branches:
+            - localisation
+    workflow_dispatch:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/localisation' || github.event_name == 'workflow_dispatch'
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: "lts/*"
-
-      - name: Set up Java 17 (Temurin)
-        uses: actions/setup-java@v5
-        with:
-          distribution: temurin
-          java-version: "17"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Write translations
-        run: npm run write-translations
-
-      - name: Clear jdeploy cache
-        run: |
-          rm -rf ~/.jdeploy || true
-          mkdir -p ~/.jdeploy
-
-      - name: Upload translations
-        run: npm run crowdin upload
-        env:
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+    build:
+        runs-on: ubuntu-latest
+        if: github.ref == 'refs/heads/localisation' || github.event_name == 'workflow_dispatch'
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v5
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v6
+              with:
+                  node-version: "lts/*"
+
+            - name: Set up Java 17 (Temurin)
+              uses: actions/setup-java@v5
+              with:
+                  distribution: temurin
+                  java-version: "17"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Write translations
+              run: npm run write-translations
+
+            - name: Clear jdeploy cache
+              run: |
+                  rm -rf ~/.jdeploy || true
+                  mkdir -p ~/.jdeploy
+
+            - name: Upload translations
+              run: npm run crowdin upload
+              env:
+                  CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/pr-validation.yml

@@ -1,101 +1,101 @@
 name: "PR Validation"
 
 on:
-  pull_request:
-    paths:
-      - "docs/**"
-      - "package.json"
-      - "package-lock.json"
-      - ".github/workflows/pr-validation.yml"
-  workflow_dispatch:
+    pull_request:
+        paths:
+            - "docs/**"
+            - "package.json"
+            - "package-lock.json"
+            - ".github/workflows/pr-validation.yml"
+    workflow_dispatch:
 
 jobs:
-  validate:
-    name: "Content & Build Validation"
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: ["lts/*"]
-
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0
-
-      - name: "Setup Node.js"
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "npm"
-
-      - name: "Install dependencies"
-        run: npm ci
-
-      - name: "� Write translations"
-        run: npm run write-translations
-        continue-on-error: false
-
-      - name: "📥 Download translations from Crowdin"
-        run: npm run crowdin download
-        env:
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-        continue-on-error: true
-
-      - name: "�📋 Validate Frontmatter & Titles"
-        run: node scripts/validate-content.js
-        continue-on-error: false
-
-      - name: "🏗️  Build Website"
-        shell: bash
-        run: |
-          set -o pipefail
-          npm run build 2>&1 | tee build.log
-
-          WARNINGS=$(grep -Ei "^\[WARNING\]|^Warning:" build.log || true)
-
-          if [ -n "$WARNINGS" ]; then
-            WARNING_DETAILS=$(awk '
-              BEGIN {capture=0; printed=0}
-              /^\[WARNING\]|^Warning:/ {
-                capture=1
-                if (printed++) print ""
-                print
-                next
-              }
-              capture && /^\[[^]]+\]/ {
-                capture=0
-                next
-              }
-              capture {print}
-            ' build.log)
-
-            echo "## Build warnings" >> "$GITHUB_STEP_SUMMARY"
-            echo "Detected build warnings and related output:" >> "$GITHUB_STEP_SUMMARY"
-            echo '```text' >> "$GITHUB_STEP_SUMMARY"
-            echo "$WARNING_DETAILS" >> "$GITHUB_STEP_SUMMARY"
-            echo '```' >> "$GITHUB_STEP_SUMMARY"
-
-            while IFS= read -r line; do
-              echo "::warning title=Build warning::$line"
-            done <<< "$WARNINGS"
-          fi
-
-          BROKEN_REFERENCES=$(grep -Ei "Docusaurus found broken (links|anchors)" build.log || true)
-
-          if [ -n "$BROKEN_REFERENCES" ]; then
-            echo "::error title=Broken references detected::Docusaurus reported broken links or anchors during build."
-            echo "## Broken references policy" >> "$GITHUB_STEP_SUMMARY"
-            echo "Build failed because broken links or broken anchors were detected." >> "$GITHUB_STEP_SUMMARY"
-            exit 1
-          fi
-        continue-on-error: false
-
-      - name: "✅ All checks passed"
-        if: success()
-        run: |
-          echo "✨ Alle Validierungen erfolgreich!"
-          echo "- ✅ Frontmatter validiert"
-          echo "- ✅ Titel validiert"
-          echo "- ✅ Build erfolgreich"
+    validate:
+        name: "Content & Build Validation"
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: ["lts/*"]
+
+        steps:
+            - name: "Checkout code"
+              uses: actions/checkout@v5
+              with:
+                  fetch-depth: 0
+
+            - name: "Setup Node.js"
+              uses: actions/setup-node@v6
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+
+            - name: "Install dependencies"
+              run: npm ci
+
+            - name: "� Write translations"
+              run: npm run write-translations
+              continue-on-error: false
+
+            - name: "📥 Download translations from Crowdin"
+              run: npm run crowdin download
+              env:
+                  CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+              continue-on-error: true
+
+            - name: "�📋 Validate Frontmatter & Titles"
+              run: node scripts/validate-content.js
+              continue-on-error: false
+
+            - name: "🏗️  Build Website"
+              shell: bash
+              run: |
+                  set -o pipefail
+                  npm run build 2>&1 | tee build.log
+
+                  WARNINGS=$(grep -Ei "^\[WARNING\]|^Warning:" build.log || true)
+
+                  if [ -n "$WARNINGS" ]; then
+                    WARNING_DETAILS=$(awk '
+                      BEGIN {capture=0; printed=0}
+                      /^\[WARNING\]|^Warning:/ {
+                        capture=1
+                        if (printed++) print ""
+                        print
+                        next
+                      }
+                      capture && /^\[[^]]+\]/ {
+                        capture=0
+                        next
+                      }
+                      capture {print}
+                    ' build.log)
+
+                    echo "## Build warnings" >> "$GITHUB_STEP_SUMMARY"
+                    echo "Detected build warnings and related output:" >> "$GITHUB_STEP_SUMMARY"
+                    echo '```text' >> "$GITHUB_STEP_SUMMARY"
+                    echo "$WARNING_DETAILS" >> "$GITHUB_STEP_SUMMARY"
+                    echo '```' >> "$GITHUB_STEP_SUMMARY"
+
+                    while IFS= read -r line; do
+                      echo "::warning title=Build warning::$line"
+                    done <<< "$WARNINGS"
+                  fi
+
+                  BROKEN_REFERENCES=$(grep -Ei "Docusaurus found broken (links|anchors)" build.log || true)
+
+                  if [ -n "$BROKEN_REFERENCES" ]; then
+                    echo "::error title=Broken references detected::Docusaurus reported broken links or anchors during build."
+                    echo "## Broken references policy" >> "$GITHUB_STEP_SUMMARY"
+                    echo "Build failed because broken links or broken anchors were detected." >> "$GITHUB_STEP_SUMMARY"
+                    exit 1
+                  fi
+              continue-on-error: false
+
+            - name: "✅ All checks passed"
+              if: success()
+              run: |
+                  echo "✨ Alle Validierungen erfolgreich!"
+                  echo "- ✅ Frontmatter validiert"
+                  echo "- ✅ Titel validiert"
+                  echo "- ✅ Build erfolgreich"

.gitignore

@@ -21,6 +21,10 @@ yarn-debug.log*
 yarn-error.log*
 yarn.lock
 # package-lock.json
+# Playwright artifacts
+playwright-report/
+test-results/
+tests/e2e/**/*.spec.ts-snapshots/
 # config for staging
 docusaurus.config.js
 .Rproj.user

README.md

@@ -8,11 +8,11 @@ This repo is the core of the [NFDI4Chem knowledge base](https://knowledgebase.nf
 
 ## Documentation
 
-* [Getting started](./readme/getting_started.md)
-* [Localisation](./readme/localisation.md)
-* [Advanced stuff](./readme/advanced.md)
-* [Custom components](./readme/custom.md)
-* [Local testing](./readme/testing.md)
+- [Getting started](./readme/getting_started.md)
+- [Localisation](./readme/localisation.md)
+- [Advanced stuff](./readme/advanced.md)
+- [Custom components](./readme/custom.md)
+- [Local testing](./readme/testing.md)
 
 ## Acknowledgments