test(e2e): support running in headless mode (#594)

* test(e2e): allow running in headless mode

* add required env var to env.example also

* don't need xvfb-run

* update `test:e2e` script and docs

.github/workflows/nightly-build.yaml

@@ -45,7 +45,7 @@ jobs:
         run: pnpm exec playwright install --with-deps
 
       - name: Run Playwright tests
-        run: xvfb-run pnpm test:e2e:${{ matrix.project }}
+        run: pnpm test:e2e:${{ matrix.project }}
         env:
           PLAYWRIGHT_PROJECT: ${{ matrix.project }}
           PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS: '1'

.github/workflows/tests-e2e.yml

@@ -47,7 +47,7 @@ jobs:
         run: pnpm exec playwright install --with-deps
 
       - name: Run Playwright tests
-        run: xvfb-run pnpm test:e2e:${{ matrix.project }}
+        run: pnpm test:e2e:${{ matrix.project }}
         env:
           PLAYWRIGHT_PROJECT: ${{ matrix.project }}
           PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS: '1'

docs/TESTING.md

@@ -6,7 +6,9 @@ Run `pnpm test` to run unit tests locally. These tests are run automatically on
 
 ## End-to-end Tests
 
-To run end-to-end tests with chromium, run `pnpm test:e2e` in terminal.
+To run end-to-end tests, run `pnpm test:e2e` in terminal. To run tests with Chrome only, run `pnpm test:e2e:chrome`.
+
+Make sure you run `pnpm build chrome` before running tests.
 
 **Before you begin**, you need to setup some environment variables/secrets in `tests/.env`.
 

package.json

@@ -17,9 +17,10 @@
     "format:fix": "prettier . --write --cache --cache-location='node_modules/.cache/prettiercache' --log-level=warn",
     "typecheck": "tsc --noEmit",
     "test": "jest --maxWorkers=2 --passWithNoTests",
-    "test:e2e": "pnpm test:e2e:chrome",
+    "test:e2e": "playwright test",
     "test:e2e:chrome": "playwright test --project=chrome",
     "test:e2e:msedge": "playwright test --project=msedge",
+    "test:e2e:report": "playwright show-report tests/e2e/playwright-report",
     "test:ci": "pnpm test -- --reporters=default --reporters=github-actions"
   },
   "dependencies": {

tests/e2e/.env.example

@@ -1,5 +1,6 @@
 # Used when running tests locally.
 # In CI, we pass these in via the environment variables directly.
+PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1
 
 # Can replace with a localhost instance if needed. Ensure doesn't end with /
 WALLET_URL_ORIGIN=https://rafiki.money

tests/e2e/fixtures/helpers.ts

@@ -146,9 +146,10 @@ export async function loadContext(
   let context: BrowserContext | undefined;
   if (browserName === 'chromium') {
     context = await chromium.launchPersistentContext('', {
-      headless: false, // headless isn't well supported with extensions
+      headless: true,
       channel,
       args: [
+        `--headless=true`,
         `--disable-extensions-except=${pathToExtension}`,
         `--load-extension=${pathToExtension}`,
       ],