Playwright docker improvements (#33213)

* Clean up playwright-common Dockerfile

* Speed up element-web docker build

* Wire up element-desktop playwright tests via nx

* Better debug logs for Element Desktop playwright in CI

* Iterate

* Iterate

* Fix element-desktop screenshot docker

* @electron/fuses

* Partial revert

.github/workflows/build_desktop_test.yaml

@@ -97,6 +97,7 @@ jobs:
                   PW_TAG: ${{ inputs.project }}
                   ELEMENT_DESKTOP_EXECUTABLE: ${{ steps.executable.outputs.path }}
                   ARGS: ${{ inputs.args }}
+                  DEBUG: pw:browser
 
             - name: Upload blob report
               if: always() && inputs.blob_report

apps/desktop/package.json

@@ -28,7 +28,7 @@
         "mkdirs": "mkdirp packages deploys",
         "fetch": "pnpm run mkdirs && node scripts/fetch-package.ts",
         "asar-webapp": "asar p webapp webapp.asar",
-        "start": "pnpm run build:ts && pnpm run build:res && electron .",
+        "start": "nx start",
         "lint": "pnpm lint:types && pnpm lint:js",
         "lint:js": "eslint --max-warnings 0 src hak playwright scripts",
         "lint:js-fix": "eslint --fix --max-warnings 0 src hak playwright scripts && prettier --log-level=warn --write .",
@@ -39,22 +39,19 @@
         "lint:types:hak": "tsc --noEmit -p hak/tsconfig.json",
         "build:native": "pnpm run hak",
         "build:native:universal": "pnpm run hak --target x86_64-apple-darwin fetchandbuild && pnpm run hak --target aarch64-apple-darwin fetchandbuild && pnpm run hak --target x86_64-apple-darwin --target aarch64-apple-darwin copyandlink",
-        "build:32": "pnpm run build:ts && pnpm run build:res && electron-builder --ia32",
-        "build:64": "pnpm run build:ts && pnpm run build:res && electron-builder --x64",
-        "build:universal": "pnpm run build:ts && pnpm run build:res && electron-builder --universal",
-        "build": "pnpm run build:ts && pnpm run build:res && electron-builder",
-        "build:ts": "tsc",
-        "build:res": "node scripts/copy-res.ts",
+        "build:32": "nx build --ia32",
+        "build:64": "nx build --x64",
+        "build:universal": "nx build --universal",
+        "build": "nx build --",
         "docker:setup": "docker build --platform linux/amd64 -t element-desktop-dockerbuild -f dockerbuild/Dockerfile .",
         "docker:build:native": "scripts/in-docker.sh pnpm run hak",
         "docker:build": "scripts/in-docker.sh pnpm run build",
         "docker:install": "scripts/in-docker.sh pnpm install",
         "clean": "rimraf webapp.asar dist packages deploys lib",
         "hak": "node scripts/hak/index.ts",
-        "test": "playwright test",
-        "test:open": "pnpm test --ui",
-        "test:screenshots:build": "docker build playwright -t element-desktop-playwright --platform linux/amd64",
-        "test:screenshots:run": "docker run --rm --network host -v $(pwd):/work/element-desktop -v element-desktop-playwright:/work/element-desktop/node_modules -v /var/run/docker.sock:/var/run/docker.sock --platform linux/amd64 -it element-desktop-playwright",
+        "test:playwright": "nx test:playwright --",
+        "test:playwright:open": "nx test:playwright -- --ui",
+        "test:playwright:screenshots": "nx test:playwright:screenshots --",
         "sane-postinstall": "electron-builder install-app-deps"
     },
     "dependencies": {
@@ -72,6 +69,7 @@
         "@babel/preset-env": "^7.18.10",
         "@babel/preset-typescript": "^7.18.6",
         "@electron/asar": "4.1.2",
+        "@electron/fuses": "^2.1.1",
         "@playwright/test": "catalog:",
         "@stylistic/eslint-plugin": "^5.0.0",
         "@types/auto-launch": "^5.0.1",
@@ -107,5 +105,8 @@
     "hakDependencies": {
         "matrix-seshat": "4.2.0"
     },
-    "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
+    "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+    "nx": {
+        "includedScripts": []
+    }
 }

apps/desktop/playwright/Dockerfile

@@ -1,13 +1,19 @@
 FROM mcr.microsoft.com/playwright:v1.59.1-jammy@sha256:8a0360d39d1973be506dd59002904a774f6d697d4946c94063b3fd006461c8ff
 
-WORKDIR /work/element-desktop
+WORKDIR /work
 
-RUN apt-get update && apt-get -y install xvfb dbus-x11 && apt-get purge -y --auto-remove && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && \
+    apt-get -y install xvfb dbus-x11 && \
+    apt-get purge -y --auto-remove && \
+    rm -rf /var/lib/apt/lists/* && \
+    corepack enable
 
-# Create node_modules & dist dirs so that the volumes have the correct permissions
-RUN mkdir node_modules dist && chown 1000:1000 node_modules dist
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+ENV GITHUB_ACTIONS=1
+ENV DEBUG=pw:browser
 
+# switch to node user
 USER 1000:1000
 
-COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
+COPY apps/desktop/playwright/docker-entrypoint.sh /opt/docker-entrypoint.sh
 ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]

apps/desktop/playwright/docker-entrypoint.sh

@@ -8,11 +8,5 @@ sleep 2
 
 export DISPLAY=:99
 
-pnpm install --frozen-lockfile
-pnpm build -l --dir
-
 PLAYWRIGHT_HTML_OPEN=never ELEMENT_DESKTOP_EXECUTABLE="./dist/linux-unpacked/element-desktop" \
-  npx playwright test --update-snapshots --reporter line,html "$1"
-
-# Clean up
-rm -R core qemu_* || exit 0
+  exec pnpm -C apps/desktop exec playwright test --update-snapshots --reporter line,html "$1"

apps/desktop/playwright/element-desktop-test.ts

@@ -69,7 +69,13 @@ export const test = base.extend<Fixtures>({
         const args = ["--profile-dir", tmpDir, ...extraArgs];
 
         if (process.env.GITHUB_ACTIONS) {
+            args.push("--disable-gpu");
+
             if (process.platform === "linux") {
+                if (process.getuid() === 0) {
+                    args.push("--no-sandbox");
+                }
+
                 // GitHub Actions hosted runner lacks dbus and a compatible keyring, so we need to force plaintext storage
                 args.push("--storage-mode", "force-plaintext");
             } else if (process.platform === "darwin") {

apps/desktop/project.json

@@ -19,6 +19,65 @@
                     "tags": ["type=ref,event=branch"]
                 }
             }
+        },
+        "build:ts": {
+            "cache": true,
+            "command": "tsc",
+            "inputs": ["src", "{projectRoot}/tsconfig.json"],
+            "outputs": ["{projectRoot}/lib/*.js", "{projectRoot}/lib/*.d.ts"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "build:res": {
+            "cache": true,
+            "command": "node scripts/copy-res.ts",
+            "inputs": ["{projectRoot}/i18n"],
+            "outputs": ["{projectRoot}/lib/i18n"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "build": {
+            "cache": true,
+            "command": "pnpm exec electron-builder",
+            "inputs": [
+                "src",
+                "{projectRoot}/.hak/hakModules",
+                "{projectRoot}/electron-builder.json",
+                "{projectRoot}/webapp.asar"
+            ],
+            "outputs": ["{projectRoot}/dist"],
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["build:*"]
+        },
+        "start": {
+            "command": "electron .",
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["build:*"]
+        },
+        "test:playwright": {
+            "command": "playwright test",
+            "options": { "cwd": "apps/desktop" }
+        },
+        "test:playwright:screenshots:build-app": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": [
+                    "pnpm run build -l --x64 --dir --publish=never",
+                    "pnpm exec electron-fuses write --app ./dist/linux-unpacked/element-desktop EnableNodeCliInspectArguments=on"
+                ],
+                "parallel": false,
+                "cwd": "apps/desktop"
+            },
+            "dependsOn": ["build:*"]
+        },
+        "test:playwright:screenshots:build-docker": {
+            "cache": true,
+            "command": "docker build -f playwright/Dockerfile -t element-desktop-playwright --platform linux/amd64 ../..",
+            "inputs": ["{projectRoot}/playwright/Dockerfile", "{projectRoot}/playwright/docker-entrypoint.sh"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "test:playwright:screenshots": {
+            "command": "docker run --rm --network host -v $(pwd)/../../:/work/ --platform linux/amd64 -it element-desktop-playwright",
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["test:playwright:screenshots:*"]
         }
     }
 }

apps/web/Dockerfile.dockerignore

@@ -23,6 +23,8 @@ apps/web/webpack-stats.json
 apps/web/playwright/
 apps/web/webapp/
 apps/web/debian/
+apps/desktop
+!apps/desktop/package.json
 
 packages/shared-components/__vis__/
 packages/shared-components/storybook-static/

apps/web/project.json

@@ -60,7 +60,7 @@
             "dependsOn": ["^build:playwright"]
         },
         "test:playwright:screenshots": {
-            "command": "playwright-screenshots nx test:playwright --update-snapshots --project=Chrome --grep @screenshot",
+            "command": "playwright-screenshots nx test:playwright -- --update-snapshots --project=Chrome --grep @screenshot",
             "options": { "cwd": "apps/web" },
             "dependsOn": ["^build:playwright"]
         }

packages/playwright-common/Dockerfile

@@ -6,10 +6,17 @@ ARG PLAYWRIGHT_VERSION
 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 && \
+    apt-get purge -y --auto-remove && \
+    rm -rf /var/lib/apt/lists/*
+
 # Install the matching playwright runtime, the docker image only includes browsers
 RUN npm i -g playwright@${PLAYWRIGHT_VERSION}
 
+# switch to pwuser
+USER 1001:1001
+
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 
 # We use `docker-init` as PID 1, which means that the container shuts down correctly on SIGTERM.

pnpm-lock.yaml

@@ -212,6 +212,9 @@ importers:
       '@electron/asar':
         specifier: 4.1.2
         version: 4.1.2
+      '@electron/fuses':
+        specifier: ^2.1.1
+        version: 2.1.1
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.59.1
@@ -2433,6 +2436,11 @@ packages:
     resolution: {integrity: sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==}
     hasBin: true
 
+  '@electron/fuses@2.1.1':
+    resolution: {integrity: sha512-38ho27/mtUV/LpsZ1LCDJUomKBBSUZDk/qBH4FNNtoN5fmnkmWDcIp5pm1Kv3InqhRjKZKs7Jzx+wWZNMArHrA==}
+    engines: {node: '>=22.12.0'}
+    hasBin: true
+
   '@electron/get@2.0.3':
     resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==}
     engines: {node: '>=12'}
@@ -14854,6 +14862,8 @@ snapshots:
       fs-extra: 9.1.0
       minimist: 1.2.8
 
+  '@electron/fuses@2.1.1': {}
+
   '@electron/get@2.0.3':
     dependencies:
       debug: 4.4.3