Update dependency playwright to v1.40.1 (#1242)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintrc-test.js

@@ -2,11 +2,11 @@ module.exports = {
     plugins: ["matrix-org"],
     extends: [".eslintrc.js"],
     parserOptions: {
-        project: ["test/tsconfig.json"],
+        project: ["playwright/tsconfig.json"],
     },
     overrides: [
         {
-            files: ["test/**/*.ts"],
+            files: ["playwright/**/*.ts"],
             extends: ["plugin:matrix-org/typescript"],
             rules: {
                 // Things we do that break the ideal style

.github/workflows/build_and_test.yaml

@@ -153,7 +153,7 @@ jobs:
               if: matrix.prepare_cmd
 
             # We previously disabled the `EnableNodeCliInspectArguments` fuse, but Playwright requires
-            # it to to be enabled to test Electron apps, so turn it back on.
+            # it to be enabled to test Electron apps, so turn it back on.
             - name: Set EnableNodeCliInspectArguments fuse enabled
               run: $RUN_AS npx @electron/fuses write --app ${{ matrix.executable }} EnableNodeCliInspectArguments=on
               shell: bash
@@ -165,14 +165,13 @@ jobs:
               uses: coactions/setup-xvfb@b6b4fcfb9f5a895edadc3bc76318fae0ac17c8b3 # v1
               timeout-minutes: 5
               with:
-                  run: "yarn test"
+                  run: "yarn test ${{ runner.os != 'Linux' && '--ignore-snapshots' || '' }}"
               env:
                   ELEMENT_DESKTOP_EXECUTABLE: ${{ matrix.executable }}
 
-            - name: Upload Artifacts
-              uses: actions/upload-artifact@v4
-              if: always()
+            - name: Upload HTML report
+              uses: actions/upload-artifact@v3
               with:
                   name: ${{ matrix.artifact }}-test
-                  path: test_artifacts
-                  retention-days: 1
+                  path: playwright-report
+                  retention-days: 14

.prettierignore

@@ -8,6 +8,8 @@
 /CHANGELOG.md
 /package-lock.json
 /yarn.lock
+/playwright/html-report
+/playwright/test-results
 
 **/.idea
 .vscode

package.json

@@ -27,17 +27,17 @@
         "lint": "yarn lint:types && yarn lint:js && yarn lint:workflows",
         "lint:js": "yarn lint:js:src && yarn lint:js:test && yarn lint:js:scripts && yarn lint:js:hak && prettier --check .",
         "lint:js:src": "eslint --max-warnings 0 src",
-        "lint:js:test": "eslint --max-warnings 0 --config .eslintrc-test.js test",
+        "lint:js:test": "eslint --max-warnings 0 --config .eslintrc-test.js playwright",
         "lint:js:scripts": "eslint --max-warnings 0 --config .eslintrc-scripts.js scripts",
         "lint:js:hak": "eslint --max-warnings 0 --config .eslintrc-hak.js hak",
         "lint:js-fix": "yarn lint:js-fix:src &&yarn lint:js-fix:test && yarn lint:js-fix:scripts && yarn lint:js-fix:hak && prettier --log-level=warn --write .",
         "lint:js-fix:src": "eslint --fix --max-warnings 0 src",
-        "lint:js-fix:test": "eslint --fix --max-warnings 0 --config .eslintrc-test.js test",
+        "lint:js-fix:test": "eslint --fix --max-warnings 0 --config .eslintrc-test.js playwright",
         "lint:js-fix:scripts": "eslint --fix --max-warnings 0 --config .eslintrc-scripts.js scripts",
         "lint:js-fix:hak": "eslint --fix --max-warnings 0 --config .eslintrc-hak.js hak",
         "lint:types": "yarn lint:types:src && yarn lint:types:test && yarn lint:types:scripts && yarn lint:types:hak",
         "lint:types:src": "tsc --noEmit",
-        "lint:types:test": "tsc --noEmit -p test/tsconfig.json",
+        "lint:types:test": "tsc --noEmit -p playwright/tsconfig.json",
         "lint:types:scripts": "tsc --noEmit -p scripts/tsconfig.json",
         "lint:types:hak": "tsc --noEmit -p hak/tsconfig.json",
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'",
@@ -55,7 +55,10 @@
         "docker:install": "scripts/in-docker.sh yarn install",
         "clean": "rimraf webapp.asar dist packages deploys lib",
         "hak": "ts-node scripts/hak/index.ts",
-        "test": "jest"
+        "test": "playwright test",
+        "test:open": "yarn 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 /var/run/docker.sock:/var/run/docker.sock --platform linux/amd64 -it element-desktop-playwright"
     },
     "dependencies": {
         "@sentry/electron": "^4.3.0",
@@ -78,7 +81,6 @@
         "@electron/asar": "^3.2.3",
         "@types/auto-launch": "^5.0.1",
         "@types/counterpart": "^0.18.1",
-        "@types/jest": "^29.0.0",
         "@types/minimist": "^1.2.1",
         "@types/mkdirp": "^1.0.2",
         "@types/node": "16.18.70",
@@ -89,7 +91,6 @@
         "@typescript-eslint/parser": "^6.0.0",
         "allchange": "^1.0.6",
         "app-builder-lib": "24.11.0",
-        "babel-jest": "^29.0.0",
         "chokidar": "^3.5.2",
         "detect-libc": "^2.0.0",
         "electron": "^28.0.0",
@@ -102,23 +103,20 @@
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-matrix-org": "^1.0.0",
         "eslint-plugin-unicorn": "^50.0.0",
-        "expect-playwright": "^0.8.0",
         "find-npm-prefix": "^1.0.2",
         "fs-extra": "^11.0.0",
         "glob": "^10.0.0",
-        "jest": "^29.0.0",
         "matrix-web-i18n": "^3.1.3",
         "mkdirp": "^3.0.0",
         "node-pre-gyp": "^0.17.0",
         "pacote": "^17.0.0",
-        "playwright": "1.37.1",
         "prettier": "^3.0.0",
         "rimraf": "^5.0.0",
         "tar": "^6.1.2",
-        "ts-jest": "^29.0.0",
         "ts-node": "^10.9.1",
         "typescript": "5.3.3",
-        "@electron/fuses": "^1.7.0"
+        "@electron/fuses": "^1.7.0",
+        "@playwright/test": "1.40.1"
     },
     "hakDependencies": {
         "matrix-seshat": "^3.0.1",
@@ -126,14 +124,5 @@
     },
     "resolutions": {
         "@types/node": "16.18.70"
-    },
-    "jest": {
-        "testEnvironment": "node",
-        "testMatch": [
-            "<rootDir>/test/**/*-test.[jt]s?(x)"
-        ],
-        "setupFilesAfterEnv": [
-            "expect-playwright"
-        ]
     }
 }

playwright.config.ts

@@ -0,0 +1,33 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+    use: {
+        viewport: { width: 1280, height: 720 },
+        video: "retain-on-failure",
+        trace: "on-first-retry",
+    },
+    testDir: "playwright/e2e",
+    outputDir: "playwright/test-results",
+    workers: 1,
+    retries: process.env.CI ? 2 : 0,
+    reporter: [["html", { outputFolder: "playwright/html-report" }]],
+    snapshotDir: "playwright/snapshots",
+    snapshotPathTemplate: "{snapshotDir}/{testFilePath}/{arg}-{platform}{ext}",
+    timeout: 10 * 1000,
+});

playwright/.gitignore

@@ -0,0 +1,5 @@
+/test-results/
+/html-report/
+# Only commit snapshots from Linux
+/snapshots/**/*.png
+!/snapshots/**/*-linux.png

playwright/Dockerfile

@@ -0,0 +1,10 @@
+FROM mcr.microsoft.com/playwright:v1.40.1-jammy
+
+WORKDIR /work/element-desktop
+
+RUN apt-get update && apt-get -y install xvfb
+
+USER 1000:1000
+
+COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
+ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]

playwright/docker-entrypoint.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+set -e
+
+echo "Starting Xvfb"
+Xvfb :99 -ac &
+sleep 2
+
+export DISPLAY=:99
+
+npx playwright test --update-snapshots --reporter line $1

playwright/e2e/launch/launch.spec.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2022 - 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { test, expect } from "../../element-desktop-test";
+
+test.describe("App launch", () => {
+    test("should launch and render the welcome view successfully", async ({ page }) => {
+        await page.locator("#matrixchat").waitFor();
+        await page.locator(".mx_Welcome").waitFor();
+        await expect(page).toHaveURL("vector://vector/webapp/#/welcome");
+        await expect(page).toHaveScreenshot();
+    });
+});

playwright/element-desktop-test.ts

@@ -0,0 +1,57 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { _electron as electron, test as base, expect as baseExpect, type ElectronApplication } from "@playwright/test";
+import fs from "node:fs/promises";
+import path from "node:path";
+import os from "node:os";
+
+export const test = base.extend<{ app: ElectronApplication; tmpDir: string }>({
+    // eslint-disable-next-line no-empty-pattern
+    tmpDir: async ({}, use) => {
+        const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), "element-desktop-tests-"));
+        console.log("Using temp profile directory: ", tmpDir);
+        await use(tmpDir);
+        await fs.rm(tmpDir, { recursive: true });
+    },
+    app: async ({ tmpDir }, use) => {
+        const args = ["--profile-dir", tmpDir];
+
+        const executablePath = process.env["ELEMENT_DESKTOP_EXECUTABLE"];
+        if (!executablePath) {
+            // Unpackaged mode testing
+            args.unshift("./lib/electron-main.js");
+        }
+
+        const app = await electron.launch({
+            env: process.env,
+            executablePath,
+            args,
+        });
+
+        await app.firstWindow();
+        await use(app);
+    },
+    page: async ({ app }, use) => {
+        const window = await app.firstWindow();
+        await use(window);
+        await app.close().catch((e) => {
+            console.error(e);
+        });
+    },
+});
+
+export const expect = baseExpect;

playwright/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "resolveJsonModule": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "target": "es2017",
+        "module": "es2022",
+        "lib": ["ESNext", "es2021", "dom"]
+    },
+    "include": ["**/*.ts"]
+}

test/launch-test.ts

@@ -1,66 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import * as os from "os";
-import * as fs from "fs";
-import * as path from "path";
-import "expect-playwright";
-import { _electron as electron } from "playwright";
-import { ElectronApplication, Page } from "playwright-core";
-
-describe("App launch", () => {
-    const artifactsPath = path.join(process.cwd(), "test_artifacts");
-    if (!fs.existsSync(artifactsPath)) fs.mkdirSync(artifactsPath);
-
-    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "element-desktop-tests"));
-    console.log("Using temp profile directory: ", tmpDir);
-
-    let app: ElectronApplication;
-    let window: Page;
-
-    beforeAll(async () => {
-        const args = ["--profile-dir", tmpDir];
-
-        const executablePath = process.env["ELEMENT_DESKTOP_EXECUTABLE"];
-        if (!executablePath) {
-            // Unpackaged mode testing
-            args.unshift("./lib/electron-main.js");
-        }
-
-        app = await electron.launch({
-            executablePath,
-            args,
-            recordVideo: {
-                dir: artifactsPath,
-            },
-        });
-        window = await app.firstWindow();
-    }, 60000);
-
-    afterAll(async () => {
-        await app?.close().catch((e) => {
-            console.error(e);
-        });
-        fs.rmSync(tmpDir, { recursive: true });
-    }, 60000);
-
-    it("should launch and render the welcome view successfully", async () => {
-        await window.locator("#matrixchat").waitFor();
-        await window.locator(".mx_Welcome").waitFor();
-        await expect(window).toMatchURL("vector://vector/webapp/#/welcome");
-        await window.screenshot({ path: path.join(artifactsPath, "welcome.png") });
-    }, 60000);
-});

test/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "compilerOptions": {
-        "resolveJsonModule": true,
-        "moduleResolution": "node",
-        "esModuleInterop": true,
-        "target": "es2017",
-        "module": "commonjs",
-        "sourceMap": false,
-        "strict": true,
-        "lib": ["es2020", "dom"]
-    },
-    "include": ["./**/*.ts"],
-    "ts-node": {
-        "transpileOnly": true
-    }
-}