Add github action to run visual regression tests on PRs

Author: lucianoratamero

.github/workflows/visual_regression_tests.yml

@@ -0,0 +1,50 @@
+# Workflows that run visual regression tests on Flare26 components
+
+name: Visual regression tests
+run-name: "Visual regression tests for ${{ github.head_ref || github.ref_name }}"
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'springfield/cms/templates/components/**'
+      - 'springfield/cms/templates/pattern-library/components/flare-26/**'
+      - 'media/css/cms/**'
+      - 'tests/playwright/specs/visual-regression/**'
+
+permissions:
+  contents: read
+
+jobs:
+  visual-regression-tests:
+    if: always() && github.repository == 'mozmeao/springfield'
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.13'
+      - uses: astral-sh/setup-uv@v5
+      - name: Install Python dependencies
+        run: uv pip install -r requirements/dev.txt
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Build frontend assets
+        run: npm ci && npm run build
+      - name: Install Playwright dependencies
+        run: cd tests/playwright && npm ci && npm run install-deps
+      - name: Run Playwright tests
+        run: cd tests/playwright && npm run local:visual-regression-tests
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: test-results-${{ github.sha }}-${{ github.run_id }}
+          path: tests/playwright/test-results/
+          if-no-files-found: ignore # this avoids a false "Warning" if there were no issues
+          retention-days: 30

tests/playwright/playwright.visual-regression.config.js

@@ -11,6 +11,17 @@ const baseConfig = require('./playwright.config');
 
 module.exports = defineConfig({
     ...baseConfig,
+    webServer: {
+        command: `uv run --active python manage.py runserver 0.0.0.0:8000`,
+        url: 'http://localhost:8000/healthz/',
+        reuseExistingServer: !process.env.CI,
+        cwd: '../../',
+        env: {
+            ...process.env,
+            DEBUG: 'true',
+            ENABLE_DJANGO_PATTERN_LIBRARY: 'true'
+        }
+    },
     fullyParallel: false,
     grepInvert: undefined,
     grep: /@visual-regression/,