tests e2e with Playwright

.github/workflows/visual_tests.yml

@@ -0,0 +1,28 @@
+name: Visual Tests
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.0-noble
+      options: --user 1001
+    steps:
+    - uses: actions/checkout@v7
+    - uses: actions/setup-node@v6
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Run Playwright visual tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v7
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -29,3 +29,10 @@ coverage
 *.sw?
 
 .eslintcache
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

CONTRIBUTING.md

@@ -37,3 +37,27 @@ npm run lint
 ```sh
 npm run test
 ```
+
+
+## Run Visual tests
+
+```sh
+npm run test:visual:build
+npm run test:visual:run
+```
+
+Visual tests are executed inside a Docker container using Playwright, ensuring consistent results between local and CI environments. The Docker image only needs to be built once before running the tests, unless dependencies change.
+
+### Display html report
+
+```sh
+npm run test:visual:report
+```
+
+### Update snapshots
+
+```sh
+npm run test:visual:update
+```
+
+Visual testing via snapshots is supported by Playwright. To update or create new snapshots, run this command.