Use headed mode for Playwright

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

.github/workflows/end-to-end-tests.yaml

@@ -83,7 +83,7 @@ jobs:
         name: "Run Tests ${{ matrix.runner }}/${{ strategy.job-total }}"
         needs: build
         if: inputs.skip != true
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         permissions:
             actions: read
             issues: read
@@ -131,7 +131,12 @@ jobs:
               run: yarn playwright install --with-deps
 
             - name: Run Playwright tests
-              run: yarn playwright test --shard ${{ matrix.runner }}/${{ strategy.job-total }}
+              uses: coactions/setup-xvfb@6b00cf1889f4e1d5a48635647013c0508128ee1a
+              timeout-minutes: 30
+              with:
+                  run: "yarn playwright test --shard ${{ matrix.runner }}/${{ strategy.job-total }}"
+              env:
+                  HEADED: 1
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()

playwright.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
             args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
         },
         trace: "on-first-retry",
+        headless: !!process.env.HEADED,
     },
     webServer: {
         command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "yarn start",

playwright/Dockerfile

@@ -3,7 +3,7 @@ FROM mcr.microsoft.com/playwright:v1.49.0-jammy
 WORKDIR /work
 
 # fonts-dejavu is needed for the same RTL rendering as on CI
-RUN apt-get update && apt-get -y install docker.io fonts-dejavu
+RUN apt-get update && apt-get -y install docker.io fonts-dejavu xvfb
 
 COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
 ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]

playwright/docker-entrypoint.sh

@@ -2,4 +2,4 @@
 
 set -e
 
-npx playwright test --update-snapshots --reporter line $@
+HEADED=1 xvfb-run npx playwright test --update-snapshots --reporter line $@