feat(#1369486): add playwright screenshots and video on test failures

Author: kerwan

.github/workflows/tests.yml

@@ -35,12 +35,12 @@ jobs:
     if: github.event.pull_request.draft == false
     name: Tests
     runs-on: ubuntu-24.04
-    
+
     env:
       ref: ${{ inputs.use_default_github_ref == false && inputs.version || '' }}
       composer_version: ${{ inputs.version == 'main' && 'dev-main' || (contains(inputs.version, 'x') && format('{0}-dev', inputs.version) || inputs.version) }}
       docker_compose_cmd: docker compose -f compose.yml -f compose.ci.yml ${{ inputs.search_engine != 'opensearch' && format('-f compose.{0}.yml', inputs.search_engine) || '' }}
-    
+
     steps:
       - name: Disk cleanup
         shell: bash
@@ -163,9 +163,17 @@ jobs:
         run: ${{env.docker_compose_cmd}} exec -T pwa yarn test:ci
 
       - name: e2e
+        id: e2e
         continue-on-error: true
         run: ${{env.docker_compose_cmd}} exec -T e2e yarn test:ci
 
+      - uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: playwright-report
+          path: front/e2e/playwright-report
+          retention-days: 30
+
       - name: Frontend Coverage Report
         uses: 5monkeys/cobertura-action@v12
         if: ${{ github.event_name == 'pull_request' }}

compose.ci.yml

@@ -1,9 +1,9 @@
 services:
-  
+
   certbot:
     environment:
       - SELF_SIGNED=true
-  
+
   php:
     build:
       target: gally_php_ci
@@ -37,5 +37,7 @@ services:
     extends:
       file: ./compose.e2e.yml
       service: e2e
+    volumes:
+      - ./front/e2e/playwright-report:/usr/src/app/playwright-report:rw,cached,z
     environment:
       - CI=true

front/e2e/playwright.config.ts

@@ -1,27 +1,46 @@
 import { defineConfig, devices } from '@playwright/test'
 
+const reporters: Array<[string, Record<string, unknown>]> = [
+  ['list', {printSteps: true}],
+]
+
+if (process.env.CI) {
+  reporters.push(['html', {outputFolder: 'playwright-report', open: 'never'}])
+}
+
 export default defineConfig({
   testDir: './src/tests',
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 0 : 0, // Experimental settings, update it if necessary for the CI
   workers: process.env.CI ? 1 : 1, // We put 1 worker even for dev mode to save computer resources
-  reporter: [['list', {printSteps: true}]],
+  reporter: reporters,
   timeout: process.env.CI ? 180000 : 120000, // 3min in CI per test, 2min in local
   use: {
     baseURL: process.env.SERVER_BASE_URL || 'https://gally.local',
-    trace: 'on',
+    // In CI trace is kept only on failure to avoid huge artifacts
+    trace: process.env.CI ? 'retain-on-failure' : 'on',
     headless: true,
     ignoreHTTPSErrors: true,
     permissions: ['clipboard-read', 'clipboard-write'],
+    // Capture screenshot and video on test failure in CI env for easier debugging.
+    screenshot: process.env.CI ? 'only-on-failure' : 'off',
+    // Record videos at lower size than the viewport to save space
+    video: process.env.CI
+      ? { mode: 'retain-on-failure', size: { width: 960, height: 540 } }
+      : 'off',
   },
   expect: {
     timeout: process.env.CI ? 30000 : 20000, // 30s in CI per expect, 20s in local,
   },
   projects: [
     {
       name: 'chromium',
-      use: {...devices['Desktop Chrome']},
+      use: {
+        ...devices['Desktop Chrome'],
+        // Increase viewport resolution for easier visual debugging
+        viewport: { width: 1920, height: 1080 },
+      },
     },
   ],
 })