test(e2e): improve extension fixture for ci

Runs e2e tests under xvfb in CI to provide a virtual display
Improves extension fixture by centralising browser launch args to reliably load the unpacked extension in CI, including load-extension, disable-extensions-except, no-first-run, disable-default-apps, and additional flags like --disable-gpu and --disable-dev-shm-usage
Enables CI headless mode by appending headless flag when running in CI
Removes hard-coded browser channel in favour of default chromium
Waits for service worker with a 30s timeout to avoid CI hangs

Author: Vheissu

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
         run: npm run build
 
       - name: Run E2E tests
-        run: npx playwright test --config=e2e/playwright.config.ts
+        run: xvfb-run --auto-servernum --server-args='-screen 0 1920x1080x24' npx playwright test --config=e2e/playwright.config.ts
         env:
           CI: true
 

e2e/helpers/extension-fixture.ts

@@ -10,15 +10,22 @@ export const test = base.extend<ExtensionFixtures>({
   context: async ({}, use) => {
     const extensionPath = path.join(__dirname, '..', '..', 'dist');
 
+    const args = [
+      `--disable-extensions-except=${extensionPath}`,
+      `--load-extension=${extensionPath}`,
+      '--no-first-run',
+      '--disable-default-apps',
+      '--disable-gpu',
+      '--disable-dev-shm-usage',
+    ];
+
+    if (process.env.CI) {
+      args.push('--headless=new');
+    }
+
     const context = await chromium.launchPersistentContext('', {
       headless: false,
-      channel: 'chromium',
-      args: [
-        `--disable-extensions-except=${extensionPath}`,
-        `--load-extension=${extensionPath}`,
-        '--no-first-run',
-        '--disable-default-apps',
-      ],
+      args,
     });
 
     await use(context);
@@ -28,7 +35,7 @@ export const test = base.extend<ExtensionFixtures>({
   extensionId: async ({ context }, use) => {
     let serviceWorker = context.serviceWorkers()[0];
     if (!serviceWorker) {
-      serviceWorker = await context.waitForEvent('serviceworker');
+      serviceWorker = await context.waitForEvent('serviceworker', { timeout: 30000 });
     }
 
     const extensionId = serviceWorker.url().split('/')[2];