diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 73e5d8903d..e4aaf87fb3 100644 --- a/.eslintrc.cjs +++ b/.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": [ diff --git a/package.json b/package.json index 11a3a3367f..0bcddc981a 100644 --- a/package.json +++ b/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", diff --git a/packages/playwright-common/package.json b/packages/playwright-common/package.json index 77b33190cc..26b5447f70 100644 --- a/packages/playwright-common/package.json +++ b/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" diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json index 1b49b76a2c..bf81a5fb7c 100644 --- a/packages/shared-components/package.json +++ b/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", diff --git a/playwright.config.ts b/playwright.config.ts index ec055f5cbf..1b6807eb85 100644 --- a/playwright.config.ts +++ b/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["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: "", + } + : undefined, }; -export default defineConfig({ +export default defineConfig<{}, WorkerOptions>({ projects: [ { name: "Chrome", @@ -91,6 +103,7 @@ export default defineConfig({ 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, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad9629eb2b..43c284e2f4 100644 --- a/pnpm-lock.yaml +++ b/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))