Merge pull request #33088 from element-hq/t3chguy/monorepo-playwright-common

Absorb remainder of playwright-common from element-modules

Author: t3chguy

.github/workflows/build-and-test.yaml

@@ -163,7 +163,7 @@ jobs:
             - name: Run Playwright tests
               working-directory: apps/web
               run: |
-                  pnpm playwright test \
+                  pnpm test:playwright \
                       --shard "$SHARD" \
                       --project="${{ matrix.project }}" \
                       ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}

apps/web/package.json

@@ -30,9 +30,9 @@
         "lint:types": "nx lint:types",
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "test": "nx test:unit",
-        "test:playwright": "playwright test",
-        "test:playwright:open": "pnpm test:playwright --ui",
-        "test:playwright:screenshots": "playwright-screenshots-experimental pnpm playwright test --update-snapshots --project=Chrome --grep @screenshot",
+        "test:playwright": "nx test:playwright --",
+        "test:playwright:open": "nx test:playwright -- --ui",
+        "test:playwright:screenshots": "nx test:playwright:screenshots --",
         "coverage": "pnpm test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp"
     },
@@ -127,8 +127,7 @@
         "@babel/preset-typescript": "^7.12.7",
         "@casualbot/jest-sonar-reporter": "2.5.0",
         "@element-hq/element-call-embedded": "0.18.0",
-        "@element-hq/element-web-playwright-common": "catalog:",
-        "@element-hq/element-web-playwright-common-local": "workspace:*",
+        "@element-hq/element-web-playwright-common": "workspace:*",
         "@fetch-mock/jest": "^0.2.20",
         "@jest/globals": "^30.2.0",
         "@peculiar/webcrypto": "^1.4.3",

apps/web/project.json

@@ -44,7 +44,7 @@
                 "parallel": false,
                 "cwd": "apps/web"
             },
-            "dependsOn": ["^build"]
+            "dependsOn": ["^build", "^build:playwright"]
         },
         "test:unit": {
             "executor": "@nx/jest:jest",
@@ -53,6 +53,16 @@
                 "cwd": "apps/web"
             },
             "dependsOn": ["^build"]
+        },
+        "test:playwright": {
+            "command": "playwright test",
+            "options": { "cwd": "apps/web" },
+            "dependsOn": ["^build:playwright"]
+        },
+        "test:playwright:screenshots": {
+            "command": "playwright-screenshots nx test:playwright --update-snapshots --project=Chrome --grep @screenshot",
+            "options": { "cwd": "apps/web" },
+            "dependsOn": ["^build:playwright"]
         }
     }
 }

knip.ts

@@ -5,13 +5,9 @@ process.env.GITHUB_ACTIONS = "1";
 
 export default {
     workspaces: {
-        "packages/shared-components": {
-            ignoreDependencies: [
-                // Used for vitest browser tests
-                "@playwright/test",
-            ],
-        },
+        "packages/shared-components": {},
         "packages/playwright-common": {
+            entry: ["src/fixtures/index.ts", "src/testcontainers/index.ts"],
             ignoreDependencies: [
                 // Used in playwright-screenshots.sh
                 "wait-on",

package.json

@@ -27,7 +27,6 @@
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
-        "@element-hq/element-web-playwright-common": "catalog:",
         "@nx-tools/nx-container": "^7.2.1",
         "@nx/jest": "^22.5.0",
         "@playwright/test": "catalog:",

packages/playwright-common/.gitignore

@@ -0,0 +1 @@
+lib/

packages/playwright-common/README.md

@@ -1,10 +1,16 @@
 # @element-hq/element-web-playwright-common
 
-Set of Playwright utilities to make it easier to write tests for Element Web, Element Web Modules & Element Desktop.
+Set of Playwright & testcontainers utilities to make it easier to write tests for Element Web, Element Web Modules & Element Desktop.
 
-# This is a partial clone of https://github.com/element-hq/element-modules/tree/main/packages/element-web-playwright-common
+The main export includes a number of fixtures and custom assertions as documented in JSDoc.
 
-In the future the rest of the package will be brought into this monorepo, for now it serves as an experimental alternative to https://github.com/element-hq/element-modules/pull/188
+The `lib/testcontainers` export contains the following modules:
+
+- `SynapseContainer` - A testcontainer for running a Synapse server
+- `MatrixAuthenticationServiceContainer` - A testcontainer for running a Matrix Authentication Service
+- `MailpitContainer` - A testcontainer for running a Mailpit SMTP server
+
+There are a number of utils available in the `lib/utils` export.
 
 ## Releases
 

packages/playwright-common/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@element-hq/element-web-playwright-common-local",
+    "name": "@element-hq/element-web-playwright-common",
     "type": "module",
     "version": "3.0.0",
     "license": "SEE LICENSE IN README.md",
@@ -12,10 +12,34 @@
     "engines": {
         "node": ">=20.0.0"
     },
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
     "bin": {
-        "playwright-screenshots-experimental": "playwright-screenshots.sh"
+        "playwright-screenshots": "playwright-screenshots.sh"
+    },
+    "scripts": {
+        "prepack": "nx build:playwright",
+        "lint:types": "tsc --noEmit"
     },
     "devDependencies": {
+        "@element-hq/element-web-module-api": "*",
+        "@types/lodash-es": "^4.17.12",
+        "typescript": "^5.8.2",
         "wait-on": "^9.0.4"
+    },
+    "dependencies": {
+        "@axe-core/playwright": "^4.10.1",
+        "@testcontainers/postgresql": "^11.0.0",
+        "glob": "^13.0.5",
+        "lodash-es": "^4.17.23",
+        "mailpit-api": "^1.2.0",
+        "strip-ansi": "^7.1.0",
+        "testcontainers": "^11.0.0",
+        "yaml": "^2.7.0"
+    },
+    "peerDependencies": {
+        "@element-hq/element-web-module-api": "*",
+        "@playwright/test": "catalog:",
+        "playwright-core": "catalog:"
     }
 }

packages/playwright-common/project.json

@@ -3,6 +3,13 @@
     "projectType": "library",
     "root": "packages/playwright-common",
     "targets": {
+        "build:playwright": {
+            "cache": true,
+            "command": "tsc",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "packages/playwright-common" }
+        },
         "docker:prebuild": {
             "cache": true,
             "command": "echo PLAYWRIGHT_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}') > .env.docker:build",

packages/playwright-common/src/@types/playwright-core.d.ts

@@ -0,0 +1,12 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+declare module "playwright-core/lib/utils" {
+    // This type is not public in playwright-core utils
+    export function sanitizeForFilePath(filePath: string): string;
+}