feat(CI): Upload e2e error videos to GitHub

.github/actions/e2e-tests/action.yml

@@ -49,3 +49,12 @@ runs:
         SLACK_TOKEN: ${{ inputs.slack_token }}
         ENV: ${{ inputs.environment == 'production' && 'prod' || inputs.environment }}
         GITHUB_ACTION_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+    - name: Upload failed test videos
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: e2e-failed-test-videos-${{ inputs.environment }}-${{ github.run_attempt }}
+        path: frontend/reports/screen-captures/*.mp4
+        if-no-files-found: ignore
+        retention-days: 30

.github/workflows/.reusable-docker-e2e-tests.yml

@@ -83,3 +83,29 @@ jobs:
           E2E_CONCURRENCY: ${{ inputs.concurrency }}
           SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
           GITHUB_ACTION_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+      - name: Extract videos from Docker container
+        if: failure()
+        run: |
+          # Create local directory for videos
+          mkdir -p ./e2e-videos
+
+          # Get the container ID for the frontend service
+          CONTAINER_ID=$(docker compose ps -q frontend 2>/dev/null || echo "")
+
+          if [ ! -z "$CONTAINER_ID" ]; then
+            # Copy videos from container to local filesystem
+            docker cp $CONTAINER_ID:/app/reports/screen-captures/ ./e2e-videos/ 2>/dev/null || echo "No videos found in container"
+          else
+            echo "No frontend container found"
+          fi
+        working-directory: frontend
+
+      - name: Upload failed test videos
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-failed-test-videos-docker-${{ github.run_attempt }}
+          path: frontend/e2e-videos/screen-captures/*.mp4
+          if-no-files-found: ignore
+          retention-days: 30

.github/workflows/manual-e2e-tests.yml

@@ -9,7 +9,7 @@ on:
       api-url:
         description: An API URL to run the E2E tests against
         default: 'https://api.flagsmith.com/api/v1/'
-        
+
 jobs:
   run-e2e-tests:
     runs-on: depot-ubuntu-latest
@@ -31,3 +31,12 @@ jobs:
           npm ci
           npm run env
           npm run test
+
+      - name: Upload failed test videos
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-failed-test-videos-manual-${{ github.run_attempt }}
+          path: frontend/reports/screen-captures/*.mp4
+          if-no-files-found: ignore
+          retention-days: 30

frontend/.testcaferc.js

@@ -1,4 +1,7 @@
 const isDev = process.env.E2E_DEV;
+const environment = process.env.ENV || 'dev';
+const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-');
+
 module.exports = {
     "browsers": "firefox:headless",
     "port1": 8080,
@@ -13,7 +16,7 @@ module.exports = {
     "videoOptions": {
         "singleFile": true,
         "failedOnly": true,
-        "pathPattern": "./test-report-${FILE_INDEX}.mp4"
+        "pathPattern": `${environment}-${timestamp}-test-${FILE_INDEX}.mp4`
     },
     "videoEncodingOptions": {
         "r": 20,

frontend/e2e/README.md

@@ -0,0 +1,48 @@
+# E2E Test Video Recording
+
+This document explains how to access video recordings of failed E2E tests from GitHub Actions.
+
+## Overview
+
+The E2E tests are configured to automatically record videos of **failed tests only** and upload them as GitHub Actions artifacts.
+
+## How it works
+
+**TestCafe Configuration**: The `.testcaferc.js` file is configured with:
+- `failedOnly: true` - Only records videos when tests fail.
+- Videos are saved to `reports/screen-captures/`.
+- Files are named with environment, timestamp, and test index for easy identification.
+
+**GitHub Actions Artifacts**:
+- Videos are automatically uploaded as artifacts when tests fail.
+- Artifacts are retained for 30 days.
+- Different workflows use different artifact names:
+  - `e2e-failed-test-videos-{environment}-{run_attempt}` for direct e2e-tests action
+  - `e2e-failed-test-videos-docker-{run_attempt}` for Docker-based tests
+  - `e2e-failed-test-videos-manual-{run_attempt}` for manual test runs
+
+## Accessing Video Recordings
+
+1. Go to the failed GitHub Actions run.
+2. Scroll down to the "Artifacts" section at the bottom of the run page.
+3. Download the video artifact(s) to view the recordings of failed tests.
+
+## Configuration
+
+The video recording behavior is controlled by:
+- TestCafe configuration in `.testcaferc.js` - controls video quality, path, and naming
+- GitHub Actions workflow files - handle the artifact upload
+
+## Video Settings
+
+- **Format**: MP4
+- **Frame rate**: 20 FPS
+- **Aspect ratio**: 4:3
+- **Recording**: Only when tests fail
+- **GitHub Actions Retention**: 30 days
+
+## Troubleshooting
+
+- If no videos appear in artifacts, check that tests actually failed (videos are only recorded on failure).
+- For Docker-based tests, ensure the video extraction step completed successfully.
+- Check the test logs for any video-related error messages.

frontend/e2e/index.cafe.js

@@ -64,7 +64,10 @@ createTestCafe()
         if (fs.existsSync(dir) && !process.env.E2E_DEV) {
             try {
                 const files = fs.readdirSync(dir);
+                // Upload to Slack
                 await Promise.all(files.map(f => upload(path.join(dir, f))));
+                // Videos will also be uploaded to GitHub Actions artifacts by the workflow
+                console.log(`${files.length} video files processed for Slack upload and available for GitHub Actions artifacts`);
             } catch (e) { console.log('error uploading files', e); }
         } else {
             console.log('No files to upload');