Run only browser in docker for test:playwright:screenshots (#32502)

* Rename playwright-screenshots script to -experimental

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

* Run only browser in docker for test:playwright:screenshots

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

* Fix playwright config for non-remote runs

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

---------

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

.eslintrc.cjs

@@ -196,7 +196,7 @@ module.exports = {
     },
     overrides: [
         {
-            files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "playwright/**/*.ts"],
+            files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "playwright/**/*.ts", "*.ts"],
             extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
             rules: {
                 "@typescript-eslint/explicit-function-return-type": [

package.json

@@ -34,7 +34,7 @@
         "test": "nx test:unit element-web",
         "test:playwright": "playwright test",
         "test:playwright:open": "pnpm test:playwright --ui",
-        "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
+        "test:playwright:screenshots": "playwright-screenshots-experimental pnpm playwright test --update-snapshots --project=Chrome --grep @screenshot",
         "coverage": "pnpm test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "postinstall": "node scripts/pnpm-link.ts"
@@ -150,6 +150,7 @@
         "@casualbot/jest-sonar-reporter": "2.5.0",
         "@element-hq/element-call-embedded": "0.16.3",
         "@element-hq/element-web-playwright-common": "catalog:",
+        "@element-hq/element-web-playwright-common-local": "workspace:*",
         "@fetch-mock/jest": "^0.2.20",
         "@jest/globals": "^30.2.0",
         "@nx/jest": "^22.5.0",

packages/playwright-common/package.json

@@ -13,7 +13,7 @@
         "node": ">=20.0.0"
     },
     "bin": {
-        "playwright-screenshots": "playwright-screenshots.sh"
+        "playwright-screenshots-experimental": "playwright-screenshots.sh"
     },
     "devDependencies": {
         "wait-on": "^9.0.4"

packages/shared-components/package.json

@@ -40,7 +40,7 @@
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "test:unit": "vitest --project=unit",
         "test:storybook": "pnpm build:doc && vitest --project=storybook",
-        "test:storybook:update": "CI=1 pnpm playwright-screenshots pnpm vitest --run --update --project=storybook",
+        "test:storybook:update": "CI=1 playwright-screenshots-experimental pnpm vitest --run --update --project=storybook",
         "build": "vite build",
         "prepack": "pnpm run build",
         "storybook": "storybook dev -p 6007",

playwright.config.ts

@@ -6,22 +6,34 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig, devices } from "@playwright/test";
+import {
+    defineConfig,
+    devices,
+    type Project,
+    type PlaywrightTestOptions,
+    type PlaywrightWorkerOptions,
+} from "@playwright/test";
 
 import { type WorkerOptions } from "./playwright/services";
 
 const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
 
-const chromeProject = {
+const chromeProject: Project<PlaywrightTestOptions, WorkerOptions & PlaywrightWorkerOptions>["use"] = {
     ...devices["Desktop Chrome"],
     channel: "chromium",
     permissions: ["clipboard-write", "clipboard-read", "microphone"],
     launchOptions: {
         args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
     },
+    connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+        ? {
+              wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+              exposeNetwork: "<loopback>",
+          }
+        : undefined,
 };
 
-export default defineConfig<WorkerOptions>({
+export default defineConfig<{}, WorkerOptions>({
     projects: [
         {
             name: "Chrome",
@@ -91,6 +103,7 @@ export default defineConfig<WorkerOptions>({
     retries: process.env.CI ? 2 : 0,
     reporter: process.env.CI ? [["blob"], ["github"]] : [["html", { outputFolder: "playwright/html-report" }]],
     snapshotDir: "playwright/snapshots",
-    snapshotPathTemplate: "{snapshotDir}/{testFilePath}/{arg}-{platform}{ext}",
+    // When running the browser in docker, set the platform to `linux` as that is the platform where the browser is running
+    snapshotPathTemplate: `{snapshotDir}/{testFilePath}/{arg}-${process.env.PW_TEST_CONNECT_WS_ENDPOINT ? "linux" : "{platform}"}{ext}`,
     forbidOnly: !!process.env.CI,
 });

pnpm-lock.yaml

@@ -362,6 +362,9 @@ importers:
       '@element-hq/element-web-playwright-common':
         specifier: 'catalog:'
         version: 2.2.7(@element-hq/element-web-module-api@1.9.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.58.1)(playwright-core@1.58.1)
+      '@element-hq/element-web-playwright-common-local':
+        specifier: workspace:*
+        version: link:packages/playwright-common
       '@fetch-mock/jest':
         specifier: ^0.2.20
         version: 0.2.20(@jest/globals@30.2.0)(jest@30.2.0(@types/node@22.19.8)(babel-plugin-macros@3.1.0))