feat: enhance Cypress browser launch options for CI

Author: fraidakis

.github/workflows/frontend-cicd.yml

@@ -79,16 +79,15 @@ jobs:
           install: false # Dependencies are already installed in a previous step
           start: npm start # Command to start the frontend application
           wait-on: ${{ env.CYPRESS_BASE_URL }} # Wait for the frontend to be available
-          browser: chrome
-          # Suppress WebGL warnings in headless CI environment
+          # Note: browser parameter is ignored when command is used
           command: npm run test:e2e -- --env apiUrl=${{ env.REACT_APP_API_URL }}
         env:
           CI: true # Indicate that tests are running in a CI environment
           CYPRESS_BASE_URL: 'http://localhost:3000' # Base URL for the frontend application
           REACT_APP_API_URL: 'http://localhost:3001' # API URL for the backend
           GENERATE_SOURCEMAP: false # Suppress source map warnings during build
-          # Chrome flags for headless mode to suppress WebGL warnings
-          ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu --enable-unsafe-swiftshader'
+          # Electron flags for headless CI mode to suppress WebGL/GPU warnings
+          ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu --enable-unsafe-swiftshader --disable-software-rasterizer --disable-gpu-compositing --use-gl=swiftshader --ignore-gpu-blocklist'
 
       # Step 8: Upload Cypress screenshots if tests fail
       - name: Upload Cypress Screenshots

cypress.config.js

@@ -96,21 +96,36 @@ module.exports = defineConfig({
 
       // Configure browser launch options
       on('before:browser:launch', (browser = {}, launchOptions) => {
-        if (browser.family === 'chromium' || browser.name === 'chrome' || browser.name === 'electron') {
-          // Fix for "Automatic fallback to software WebGL has been deprecated" in CI
-          // These flags suppress WebGL warnings in headless/CI environments
-          launchOptions.args.push('--enable-unsafe-swiftshader');
-          launchOptions.args.push('--disable-gpu');
-          launchOptions.args.push('--disable-software-rasterizer');
-          launchOptions.args.push('--disable-dev-shm-usage');
-
-          // Only log in CI to avoid noise in local development
+        // For Chrome and Chromium-based browsers (not Electron)
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          // Fix for WebGL and GPU warnings in CI headless environments
+          const gpuFlags = [
+            '--enable-unsafe-swiftshader',
+            '--disable-gpu',
+            '--disable-software-rasterizer',
+            '--disable-dev-shm-usage',
+            '--disable-gpu-compositing',
+            '--disable-gpu-rasterization',
+            '--disable-gpu-sandbox',
+            '--use-gl=swiftshader'
+          ];
+          gpuFlags.forEach(flag => launchOptions.args.push(flag));
+
+          if (process.env.CI) {
+            console.log(`Injecting Chrome flags for ${browser.name}:`, gpuFlags);
+          }
+        }
+
+        // For Electron browser - use environment variable approach
+        // Electron doesn't support args the same way, the flags are passed via ELECTRON_EXTRA_LAUNCH_ARGS env var
+        if (browser.name === 'electron') {
+          // Electron handles GPU flags through environment variables set in CI
+          // See ELECTRON_EXTRA_LAUNCH_ARGS in the workflow file
           if (process.env.CI) {
-            console.log(`Injecting Chrome flags for ${browser.name}:`, launchOptions.args.filter(arg =>
-              arg.includes('gpu') || arg.includes('swiftshader') || arg.includes('rasterizer')
-            ));
+            console.log(`Running Electron in CI - GPU flags handled via ELECTRON_EXTRA_LAUNCH_ARGS env var`);
           }
         }
+
         return launchOptions;
       });