Use cache for Playwright testcontainers images

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

.eslintrc.js

@@ -271,7 +271,6 @@ module.exports = {
             },
             rules: {
                 "react-hooks/rules-of-hooks": ["off"],
-                "@typescript-eslint/no-floating-promises": ["error"],
             },
         },
         {

.github/labels.yml

@@ -235,15 +235,6 @@
 - name: "Z-Flaky-Test"
   description: "A test is raising false alarms"
   color: "ededed"
-- name: "Z-Flaky-Test-Chrome"
-  description: "Flaky playwright test in Chrome"
-  color: "ededed"
-- name: "Z-Flaky-Test-Firefox"
-  description: "Flaky playwright test in Firefox"
-  color: "ededed"
-- name: "Z-Flaky-Test-Webkit"
-  description: "Flaky playwright test in Webkit"
-  color: "ededed"
 - name: "Z-Flaky-Jest-Test"
   description: "A Jest test is raising false alarms"
   color: "ededed"

.github/workflows/build.yml

@@ -27,17 +27,10 @@ jobs:
                     - macos-14
                 isDevelop:
                     - ${{ github.event_name == 'push' && github.ref_name == 'develop' }}
-                isPullRequest:
-                    - ${{ github.event_name == 'pull_request' }}
                 # Skip the ubuntu-24.04 build for the develop branch as the dedicated CD build_develop workflow handles that
-                # Skip the non-linux builds for pull requests as Windows is awfully slow, so run in merge queue only
                 exclude:
                     - isDevelop: true
                       image: ubuntu-24.04
-                    - isPullRequest: true
-                      image: windows-2022
-                    - isPullRequest: true
-                      image: macos-14
         runs-on: ${{ matrix.image }}
         defaults:
             run:

.github/workflows/end-to-end-tests.yaml

@@ -48,6 +48,7 @@ jobs:
         outputs:
             num-runners: ${{ env.NUM_RUNNERS }}
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
+            docker-cache-key: ${{ steps.runner-vars.outputs.docker-cache-key }}
         steps:
             - name: Checkout code
               uses: actions/checkout@v4
@@ -80,6 +81,12 @@ jobs:
               run: |
                   yarn build
 
+            # Heuristic for calculating a cache key which is based on all images we pass to testcontainers
+            - name: Calculate docker cache key
+              run: |
+                  grep -hr "Container(\"" --exclude-dir=snapshots --exclude-dir=sample-files playwright >> _docker_cache_key
+                  grep -hr -C1 "super(" playwright/testcontainers/ >> _docker_cache_key
+
             - name: Upload Artifact
               uses: actions/upload-artifact@v4
               with:
@@ -90,11 +97,14 @@ jobs:
             - name: Calculate runner variables
               id: runner-vars
               uses: actions/github-script@v7
+              env:
+                  DOCKER_CACHE_KEY: ${{ hashFiles('_docker_cache_key') }}
               with:
                   script: |
                       const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
                       const matrix = Array.from({ length: numRunners }, (_, i) => i + 1);
                       core.setOutput("matrix", JSON.stringify(matrix));
+                      core.setOutput("docker-cache-key", process.env.DOCKER_CACHE_KEY);
 
     playwright:
         name: "Run Tests [${{ matrix.project }}] ${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}"
@@ -164,24 +174,19 @@ jobs:
               if: matrix.project == 'WebKit' && steps.playwright-cache.outputs.cache-hit == 'true'
               run: yarn playwright install-deps webkit
 
+            - name: Docker image cache
+              uses: ScribeMD/docker-cache@fb28c93772363301b8d0a6072ce850224b73f74e # 0.5.0
+              with:
+                  key: ${{ needs.build.outputs.docker-cache-key }}
+
             # We skip tests tagged with @mergequeue when running on PRs, but run them in MQ and everywhere else
             - name: Run Playwright tests
-              env:
-                  PWTEST_PROFILE_DIR: profile
               run: |
                   yarn playwright test \
                       --shard "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}" \
                       --project="${{ matrix.project }}" \
                       ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}
 
-            - name: Upload profile
-              if: always()
-              uses: actions/upload-artifact@v4
-              with:
-                  name: profile-${{ matrix.project }}-${{ matrix.runner }}
-                  path: profile
-                  retention-days: 1
-
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
               uses: actions/upload-artifact@v4

.github/workflows/playwright-image-updates.yaml

@@ -17,7 +17,7 @@ jobs:
                   docker pull "$IMAGE"
                   INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
                   DIGEST=${INSPECT#*@}
-                  sed -i "s/const TAG.*/const TAG = \"develop@$DIGEST\";/" playwright/testcontainers/synapse.ts
+                  sed -i "s,`$IMAGE.*`,`$IMAGE@$DIGEST`," playwright/testcontainers/synapse.ts
               env:
                   IMAGE: ghcr.io/element-hq/synapse:develop
 

.github/workflows/static_analysis.yaml

@@ -132,3 +132,9 @@ jobs:
 
             - name: Run linter
               run: "yarn run lint:knip"
+
+            - name: Install Deps
+              run: "scripts/layered.sh"
+
+            - name: Dead Code Analysis
+              run: "yarn run analyse:unused-exports"

CHANGELOG.md

@@ -1,21 +1,3 @@
-Changes in [1.11.90](https://github.com/element-hq/element-web/releases/tag/v1.11.90) (2025-01-14)
-==================================================================================================
-## ✨ Features
-
-* Docker: run as non-root ([#28849](https://github.com/element-hq/element-web/pull/28849)). Contributed by @richvdh.
-* Docker: allow configuration of HTTP listen port via env var ([#28840](https://github.com/element-hq/element-web/pull/28840)). Contributed by @richvdh.
-* Update matrix-wysiwyg to consume WASM asset ([#28838](https://github.com/element-hq/element-web/pull/28838)). Contributed by @t3chguy.
-* OIDC settings tweaks ([#28787](https://github.com/element-hq/element-web/pull/28787)). Contributed by @t3chguy.
-* Delabs native OIDC support ([#28615](https://github.com/element-hq/element-web/pull/28615)). Contributed by @t3chguy.
-* Move room header info button to right-most position ([#28754](https://github.com/element-hq/element-web/pull/28754)). Contributed by @t3chguy.
-* Enable key backup by default ([#28691](https://github.com/element-hq/element-web/pull/28691)). Contributed by @dbkr.
-
-## 🐛 Bug Fixes
-
-* Fix building the automations mermaid diagram ([#28881](https://github.com/element-hq/element-web/pull/28881)). Contributed by @dbkr.
-* Playwright: wait for the network listener on the postgres db ([#28808](https://github.com/element-hq/element-web/pull/28808)). Contributed by @dbkr.
-
-
 Changes in [1.11.89](https://github.com/element-hq/element-web/releases/tag/v1.11.89) (2024-12-18)
 ==================================================================================================
 This is a patch release to fix a bug which could prevent loading stored crypto state from storage, and also to fix URL previews when switching back to a room.

docs/playwright.md

@@ -77,9 +77,6 @@ test.use({
 ```
 
 The appropriate homeserver will be launched by the Playwright worker and reused for all tests which match the worker configuration.
-Due to homeservers being reused between tests, please use unique names for any rooms put into the room directory as
-they may be visible from other tests, the suggested approach is to use `testInfo.testId` within the name or lodash's uniqueId.
-We remove public rooms from the room directory between tests but deleting users doesn't have a homeserver agnostic solution.
 The logs from testcontainers will be attached to any reports output from Playwright.
 
 ## Writing Tests

knip.ts

@@ -10,13 +10,13 @@ export default {
         "playwright/**",
         "test/**",
         "res/decoder-ring/**",
-        "res/jitsi_external_api.min.js",
-        "docs/**",
-        // Used by jest
-        "__mocks__/maplibre-gl.js",
     ],
     project: ["**/*.{js,ts,jsx,tsx}"],
     ignore: [
+        "docs/**",
+        "res/jitsi_external_api.min.js",
+        // Used by jest
+        "__mocks__/maplibre-gl.js",
         // Keep for now
         "src/hooks/useLocalStorageState.ts",
         "src/components/views/elements/InfoTooltip.tsx",
@@ -37,8 +37,13 @@ export default {
         // False positive
         "sw.js",
         // Used by webpack
+        "buffer",
         "process",
         "util",
+        // Used by workflows
+        "ts-prune",
+        // Required due to bug in bloom-filters https://github.com/Callidon/bloom-filters/issues/75
+        "@types/seedrandom",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.90",
+    "version": "1.11.89",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -66,6 +66,7 @@
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
         "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright --grep @screenshot --project=Chrome",
         "coverage": "yarn test --coverage",
+        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
@@ -89,7 +90,6 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^2.1.0",
         "@vector-im/compound-web": "^7.5.0",
         "@vector-im/matrix-wysiwyg": "2.38.0",
@@ -144,7 +144,6 @@
         "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
-        "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
         "sanitize-html": "2.14.0",
@@ -152,7 +151,9 @@
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
-        "what-input": "^5.2.10"
+        "what-input": "^5.2.10",
+        "@types/react-virtualized": "^9.21.30",
+        "react-virtualized": "^9.22.5"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
@@ -286,6 +287,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^10.16.0",
         "ts-node": "^10.9.1",
+        "ts-prune": "^0.10.3",
         "typescript": "5.7.2",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -123,7 +123,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.getByText("Bob joined the room")).toBeVisible();
 
         // Close the room
-        await page.goto("/#/home");
+        page.goto("/#/home");
 
         // Pressing Control+F6 will first focus the space button
         await page.keyboard.press("ControlOrMeta+F6");

playwright/e2e/app-loading/guest-registration.spec.ts

@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
 import { expect, test } from "../../element-web-test";
 
 test.use({
-    synapseConfig: {
+    synapseConfigOptions: {
         allow_guest_access: true,
     },
 });

playwright/e2e/chat-export/html-export.spec.ts

@@ -95,7 +95,7 @@ test.describe("HTML Export", () => {
         async ({ page, app, room }) => {
             // Set a fixed time rather than masking off the line with the time in it: we don't need to worry
             // about the width changing and we can actually test this line looks correct.
-            await page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+            page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
 
             // Send a bunch of messages to populate the room
             for (let i = 1; i < 10; i++) {

playwright/e2e/composer/RTE.spec.ts

@@ -165,7 +165,7 @@ test.describe("Composer", () => {
             // Type another
             await page.locator("div[contenteditable=true]").pressSequentially("my message 1");
             // Send message
-            await page.locator("div[contenteditable=true]").press("Enter");
+            page.locator("div[contenteditable=true]").press("Enter");
             // It was sent
             await expect(page.locator(".mx_EventTile_last .mx_EventTile_body").getByText("my message 1")).toBeVisible();
         });

playwright/e2e/crypto/backups-mas.spec.ts

@@ -13,25 +13,25 @@ import { TestClientServerAPI } from "../csAPI";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
 
 // These tests register an account with MAS because then we go through the "normal" registration flow
-// and crypto gets set up. Using the 'user' fixture create a user and synthesizes an existing login,
+// and crypto gets set up. Using the 'user' fixture create a a user an synthesizes an existing login,
 // which is faster but leaves us without crypto set up.
 test.use(masHomeserver);
 test.describe("Encryption state after registration", () => {
     test.skip(isDendrite, "does not yet support MAS");
 
-    test("Key backup is enabled by default", async ({ page, mailhogClient, app }, testInfo) => {
+    test("Key backup is enabled by default", async ({ page, mailhogClient, app }) => {
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");
 
         await app.settings.openUserSettings("Security & Privacy");
         await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
     });
 
-    test("user is prompted to set up recovery", async ({ page, mailhogClient, app }, testInfo) => {
+    test("user is prompted to set up recovery", async ({ page, mailhogClient, app }) => {
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");
 
         await page.getByRole("button", { name: "Add room" }).click();
         await page.getByRole("menuitem", { name: "New room" }).click();
@@ -45,13 +45,8 @@ test.describe("Encryption state after registration", () => {
 test.describe("Key backup reset from elsewhere", () => {
     test.skip(isDendrite, "does not yet support MAS");
 
-    test("Key backup is disabled when reset from elsewhere", async ({
-        page,
-        mailhogClient,
-        request,
-        homeserver,
-    }, testInfo) => {
-        const testUsername = `alice_${testInfo.testId}`;
+    test("Key backup is disabled when reset from elsewhere", async ({ page, mailhogClient, request, homeserver }) => {
+        const testUsername = "alice";
         const testPassword = "Pa$sW0rD!";
 
         // there's a delay before keys are uploaded so the error doesn't appear immediately: use a fake
@@ -67,7 +62,8 @@ test.describe("Key backup reset from elsewhere", () => {
         await page.getByRole("textbox", { name: "Name" }).fill("test room");
         await page.getByRole("button", { name: "Create room" }).click();
 
-        const accessToken = await page.evaluate(() => window.mxMatrixClientPeg.get().getAccessToken());
+        // @ts-ignore - this runs in the browser scope where mxMatrixClientPeg is a thing. Here, it is not.
+        const accessToken = await page.evaluate(() => mxMatrixClientPeg.get().getAccessToken());
 
         const csAPI = new TestClientServerAPI(request, homeserver, accessToken);
 

playwright/e2e/crypto/dehydration.spec.ts

@@ -21,7 +21,7 @@ function getMemberTileByName(page: Page, name: string): Locator {
 
 test.use({
     displayName: NAME,
-    synapseConfig: {
+    synapseConfigOptions: {
         experimental_features: {
             msc2697_enabled: false,
             msc3814_enabled: true,

playwright/e2e/crypto/device-verification.spec.ts

@@ -212,7 +212,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         /* on the bot side, wait for the verifier to exist ... */
         const verifier = await awaitVerifier(botVerificationRequest);
         // ... confirm ...
-        void botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier.verify());
+        botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier.verify());
         // ... and then check the emoji match
         await doTwoWaySasVerification(page, verifier);
 

playwright/e2e/crypto/invisible-crypto.spec.ts

@@ -11,7 +11,6 @@ import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 
 /** Tests for the "invisible crypto" behaviour -- i.e., when the "exclude insecure devices" setting is enabled */
 test.describe("Invisible cryptography", () => {
-    test.slow();
     test.use({
         displayName: "Alice",
         botCreateOpts: { displayName: "Bob" },

playwright/e2e/crypto/user-verification.spec.ts

@@ -74,7 +74,7 @@ test.describe("User verification", () => {
         /* on the bot side, wait for the verifier to exist ... */
         const botVerifier = await awaitVerifier(bobVerificationRequest);
         // ... confirm ...
-        void botVerifier.evaluate((verifier) => verifier.verify());
+        botVerifier.evaluate((verifier) => verifier.verify());
         // ... and then check the emoji match
         await doTwoWaySasVerification(page, botVerifier);
 

playwright/e2e/crypto/utils.ts

@@ -59,7 +59,7 @@ export function handleSasVerification(verifier: JSHandle<Verifier>): Promise<Emo
         return new Promise<EmojiMapping[]>((resolve) => {
             const onShowSas = (event: ShowSasCallbacks) => {
                 verifier.off("show_sas" as VerifierEvent, onShowSas);
-                void event.confirm();
+                event.confirm();
                 resolve(event.sas.emoji);
             };
 
@@ -313,7 +313,7 @@ export async function autoJoin(client: Client) {
     await client.evaluate((cli) => {
         cli.on(window.matrixcs.RoomMemberEvent.Membership, (event, member) => {
             if (member.membership === "invite" && member.userId === cli.getUserId()) {
-                void cli.joinRoom(member.roomId);
+                cli.joinRoom(member.roomId);
             }
         });
     });

playwright/e2e/csAPI.ts

@@ -9,24 +9,24 @@ import { APIRequestContext } from "playwright-core";
 import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 
 import { HomeserverInstance } from "../plugins/homeserver";
-import { ClientServerApi } from "../plugins/utils/api.ts";
 
 /**
  * A small subset of the Client-Server API used to manipulate the state of the
  * account on the homeserver independently of the client under test.
  */
-export class TestClientServerAPI extends ClientServerApi {
+export class TestClientServerAPI {
     public constructor(
-        request: APIRequestContext,
-        homeserver: HomeserverInstance,
+        private request: APIRequestContext,
+        private homeserver: HomeserverInstance,
         private accessToken: string,
-    ) {
-        super(homeserver.baseUrl);
-        this.setRequest(request);
-    }
+    ) {}
 
     public async getCurrentBackupInfo(): Promise<KeyBackupInfo | null> {
-        return this.request("GET", `/v3/room_keys/version`, this.accessToken);
+        const res = await this.request.get(`${this.homeserver.baseUrl}/_matrix/client/v3/room_keys/version`, {
+            headers: { Authorization: `Bearer ${this.accessToken}` },
+        });
+
+        return await res.json();
     }
 
     /**
@@ -34,6 +34,15 @@ export class TestClientServerAPI extends ClientServerApi {
      * @param version The version to delete
      */
     public async deleteBackupVersion(version: string): Promise<void> {
-        await this.request("DELETE", `/v3/room_keys/version/${version}`, this.accessToken);
+        const res = await this.request.delete(
+            `${this.homeserver.baseUrl}/_matrix/client/v3/room_keys/version/${version}`,
+            {
+                headers: { Authorization: `Bearer ${this.accessToken}` },
+            },
+        );
+
+        if (!res.ok) {
+            throw new Error(`Failed to delete backup version: ${res.status}`);
+        }
     }
 }

playwright/e2e/forgot-password/forgot-password.spec.ts

@@ -6,25 +6,16 @@ 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 { expect, test as base } from "../../element-web-test";
+import { expect, test } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
 import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { Credentials } from "../../plugins/homeserver";
 
+const username = "user1234";
+// this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
+const password = "oETo7MPf0o";
 const email = "user@nowhere.dummy";
 
-const test = base.extend<{ credentials: Pick<Credentials, "username" | "password"> }>({
-    // eslint-disable-next-line no-empty-pattern
-    credentials: async ({}, use, testInfo) => {
-        await use({
-            username: `user_${testInfo.testId}`,
-            // this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
-            password: "oETo7MPf0o",
-        });
-    },
-});
-
 test.use(emailHomeserver);
 test.use({
     config: {
@@ -54,35 +45,31 @@ test.describe("Forgot Password", () => {
         await expect(page.getByRole("main")).toMatchScreenshot("forgot-password.png");
     });
 
-    test(
-        "renders email verification dialog properly",
-        { tag: "@screenshot" },
-        async ({ page, homeserver, credentials }) => {
-            const user = await homeserver.registerUser(credentials.username, credentials.password);
+    test("renders email verification dialog properly", { tag: "@screenshot" }, async ({ page, homeserver }) => {
+        const user = await homeserver.registerUser(username, password);
 
-            await homeserver.setThreepid(user.userId, "email", email);
+        await homeserver.setThreepid(user.userId, "email", email);
 
-            await page.goto("/");
+        await page.goto("/");
 
-            await page.getByRole("link", { name: "Sign in" }).click();
-            await selectHomeserver(page, homeserver.baseUrl);
+        await page.getByRole("link", { name: "Sign in" }).click();
+        await selectHomeserver(page, homeserver.baseUrl);
 
-            await page.getByRole("button", { name: "Forgot password?" }).click();
+        await page.getByRole("button", { name: "Forgot password?" }).click();
 
-            await page.getByRole("textbox", { name: "Email address" }).fill(email);
+        await page.getByRole("textbox", { name: "Email address" }).fill(email);
 
-            await page.getByRole("button", { name: "Send email" }).click();
+        await page.getByRole("button", { name: "Send email" }).click();
 
-            await page.getByRole("button", { name: "Next" }).click();
+        await page.getByRole("button", { name: "Next" }).click();
 
-            await page.getByRole("textbox", { name: "New Password", exact: true }).fill(credentials.password);
-            await page.getByRole("textbox", { name: "Confirm new password", exact: true }).fill(credentials.password);
+        await page.getByRole("textbox", { name: "New Password", exact: true }).fill(password);
+        await page.getByRole("textbox", { name: "Confirm new password", exact: true }).fill(password);
 
-            await page.getByRole("button", { name: "Reset password" }).click();
+        await page.getByRole("button", { name: "Reset password" }).click();
 
-            await expect(page.getByRole("button", { name: "Resend" })).toBeInViewport();
+        await expect(page.getByRole("button", { name: "Resend" })).toBeInViewport();
 
-            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("forgot-password-verify-email.png");
-        },
-    );
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("forgot-password-verify-email.png");
+    });
 });

playwright/e2e/integration-manager/kick.spec.ts

@@ -69,13 +69,29 @@ async function sendActionFromIntegrationManager(
     await iframe.getByRole("button", { name: "Press to send action" }).click();
 }
 
+async function clickUntilGone(page: Page, selector: string, attempt = 0) {
+    if (attempt === 11) {
+        throw new Error("clickUntilGone attempt count exceeded");
+    }
+
+    await page.locator(selector).last().click();
+
+    const count = await page.locator(selector).count();
+    if (count > 0) {
+        return clickUntilGone(page, selector, ++attempt);
+    }
+}
+
 async function expectKickedMessage(page: Page, shouldExist: boolean) {
-    await expect(async () => {
-        await page.locator(".mx_GenericEventListSummary_toggle[aria-expanded=false]").last().click();
-        await expect(page.getByText(`${USER_DISPLAY_NAME} removed ${BOT_DISPLAY_NAME}: ${KICK_REASON}`)).toBeVisible({
-            visible: shouldExist,
-        });
-    }).toPass();
+    // Expand any event summaries, we can't use a click multiple here because clicking one might de-render others
+    // This is quite horrible but seems the most stable way of clicking 0-N buttons,
+    // one at a time with a full re-evaluation after each click
+    await clickUntilGone(page, ".mx_GenericEventListSummary_toggle[aria-expanded=false]");
+
+    // Check for the event message (or lack thereof)
+    await expect(page.getByText(`${USER_DISPLAY_NAME} removed ${BOT_DISPLAY_NAME}: ${KICK_REASON}`)).toBeVisible({
+        visible: shouldExist,
+    });
 }
 
 test.describe("Integration Manager: Kick", () => {

playwright/e2e/knock/manage-knocks.spec.ts

@@ -50,7 +50,7 @@ test.describe("Manage Knocks", () => {
     });
 
     test("should deny knock using bar", async ({ page, app, bot, room }) => {
-        await bot.knockRoom(room.roomId);
+        bot.knockRoom(room.roomId);
 
         const roomKnocksBar = page.locator(".mx_RoomKnocksBar");
         await expect(roomKnocksBar.getByRole("heading", { name: "Asking to join" })).toBeVisible();

playwright/e2e/login/login-consent.spec.ts

@@ -77,9 +77,6 @@ async function login(page: Page, homeserver: HomeserverInstance, credentials: Cr
     await page.getByRole("button", { name: "Sign in" }).click();
 }
 
-// This test suite uses the same userId for all tests in the suite
-// due to DEVICE_SIGNING_KEYS_BODY being specific to that userId,
-// so we restart the Synapse container to make it forget everything.
 test.use(consentHomeserver);
 test.use({
     config: {
@@ -91,11 +88,6 @@ test.use({
             },
         },
     },
-    context: async ({ context, homeserver }, use) => {
-        // Restart the homeserver to wipe its in-memory db so we can reuse the same user ID without cross-signing prompts
-        await homeserver.restart();
-        await use(context);
-    },
     credentials: async ({ context, homeserver }, use) => {
         const displayName = "Dave";
         const credentials = await homeserver.registerUser(username, password, displayName);
@@ -105,9 +97,6 @@ test.use({
             ...credentials,
             displayName,
         });
-
-        // Restart the homeserver to wipe its in-memory db so we can reuse the same user ID without cross-signing prompts
-        await homeserver.restart();
     },
 });
 

playwright/e2e/login/login-sso.spec.ts

@@ -17,13 +17,13 @@ test.use(legacyOAuthHomeserver);
 test.describe("SSO login", () => {
     test.skip(isDendrite, "does not yet support SSO");
 
-    test("logs in with SSO and lands on the home screen", async ({ page, homeserver }, testInfo) => {
+    test("logs in with SSO and lands on the home screen", async ({ page, homeserver }) => {
         // If this test fails with a screen showing "Timeout connecting to remote server", it is most likely due to
         // your firewall settings: Synapse is unable to reach the OIDC server.
         //
         // If you are using ufw, try something like:
         //    sudo ufw allow in on docker0
         //
-        await doTokenRegistration(page, homeserver, testInfo);
+        await doTokenRegistration(page, homeserver);
     });
 });

playwright/e2e/login/soft_logout_oauth.spec.ts

@@ -26,8 +26,8 @@ test.use({
 test.use(legacyOAuthHomeserver);
 test.describe("Soft logout with SSO user", () => {
     test.use({
-        user: async ({ page, homeserver }, use, testInfo) => {
-            const user = await doTokenRegistration(page, homeserver, testInfo);
+        user: async ({ page, homeserver }, use) => {
+            const user = await doTokenRegistration(page, homeserver);
 
             // Eventually, we should end up at the home screen.
             await expect(page).toHaveURL(/\/#\/home$/);

playwright/e2e/login/utils.ts

@@ -6,7 +6,7 @@ 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 { Page, expect, TestInfo } from "@playwright/test";
+import { Page, expect } from "@playwright/test";
 
 import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
 
@@ -15,7 +15,6 @@ import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
 export async function doTokenRegistration(
     page: Page,
     homeserver: HomeserverInstance,
-    testInfo: TestInfo,
 ): Promise<Credentials & { displayName: string }> {
     await page.goto("/#/login");
 
@@ -36,7 +35,7 @@ export async function doTokenRegistration(
 
     // Synapse prompts us to pick a user ID
     await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
-    await page.getByRole("textbox", { name: "Username (required)" }).fill(`alice_${testInfo.testId}`);
+    await page.getByRole("textbox", { name: "Username (required)" }).fill("alice");
 
     // wait for username validation to start, and complete
     await expect(page.locator("#field-username-output")).toHaveText("");
@@ -93,7 +92,7 @@ export async function interceptRequestsWithSoftLogout(page: Page, user: Credenti
     // do something to make the active /sync return: create a new room
     await page.evaluate(() => {
         // don't wait for this to complete: it probably won't, because of the broken sync
-        void window.mxMatrixClientPeg.get().createRoom({});
+        window.mxMatrixClientPeg.get().createRoom({});
     });
 
     await promise;

playwright/e2e/oidc/index.ts

@@ -33,7 +33,7 @@ export async function registerAccountMas(
         expect(messages.items).toHaveLength(1);
     }).toPass();
     expect(messages.items[0].to).toEqual(`${username} <${email}>`);
-    const [, code] = messages.items[0].text.match(/Your verification code to confirm this email address is: (\d{6})/);
+    const [code] = messages.items[0].text.match(/(\d{6})/);
 
     await page.getByRole("textbox", { name: "6-digit code" }).fill(code);
     await page.getByRole("button", { name: "Continue" }).click();

playwright/e2e/oidc/oidc-native.spec.ts

@@ -17,15 +17,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     test.skip(isDendrite, "does not yet support MAS");
     test.slow(); // trace recording takes a while here
 
-    test("can register the oauth2 client and an account", async ({
-        context,
-        page,
-        homeserver,
-        mailhogClient,
-        mas,
-    }, testInfo) => {
-        await page.clock.install();
-
+    test("can register the oauth2 client and an account", async ({ context, page, homeserver, mailhogClient, mas }) => {
         const tokenUri = `${mas.baseUrl}/oauth2/token`;
         const tokenApiPromise = page.waitForRequest(
             (request) => request.url() === tokenUri && request.postDataJSON()["grant_type"] === "authorization_code",
@@ -33,14 +25,11 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-
-        const userId = `alice_${testInfo.testId}`;
-        await registerAccountMas(page, mailhogClient, userId, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
-        await expect(page.getByRole("heading", { name: `Welcome ${userId}`, exact: true })).toBeVisible();
-        await page.clock.runFor(20000); // run the timer so we see the token request
+        await expect(page.getByRole("heading", { name: "Welcome alice", exact: true })).toBeVisible();
 
         const tokenApiRequest = await tokenApiPromise;
         expect(tokenApiRequest.postDataJSON()["grant_type"]).toBe("authorization_code");

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -17,8 +17,8 @@ const test = base.extend<{
 test.describe("1:1 chat room", () => {
     test.use({
         displayName: "Jeff",
-        user2: async ({ homeserver }, use, testInfo) => {
-            const credentials = await homeserver.registerUser(`user2_${testInfo.testId}`, "p4s5W0rD", "Timmy");
+        user2: async ({ homeserver }, use) => {
+            const credentials = await homeserver.registerUser("user1234", "p4s5W0rD", "Timmy");
             await use(credentials);
         },
     });

playwright/e2e/polls/pollHistory.spec.ts

@@ -134,7 +134,7 @@ test.describe("Poll history", () => {
 
         await expect(dialog.getByText(pollParams2.title)).toBeAttached();
         await expect(dialog.getByText(pollParams1.title)).toBeAttached();
-        await dialog.getByText("Active polls").click();
+        dialog.getByText("Active polls").click();
 
         // no more active polls
         await expect(page.getByText("There are no active polls in this room")).toBeAttached();

playwright/e2e/read-receipts/reactions-in-threads.spec.ts

@@ -70,7 +70,11 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 // Given a thread exists and I have marked it as read
                 await util.goTo(room1);
                 await util.assertRead(room2);
-                await util.receiveMessages(room2, ["Msg1", msg.threadedOff("Msg1", "Reply1")]);
+                await util.receiveMessages(room2, [
+                    "Msg1",
+                    msg.threadedOff("Msg1", "Reply1"),
+                    msg.reactionTo("Reply1", "🪿"),
+                ]);
                 await util.assertUnread(room2, 1);
                 await util.markAsRead(room2);
                 await util.assertRead(room2);

playwright/e2e/read-receipts/read-receipts.spec.ts

@@ -100,7 +100,12 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await page.goto(`/#/room/${selectedRoomId}`);
     });
 
-    test("With sync accumulator, considers main thread and unthreaded receipts #24629", async ({ page, app, bot }) => {
+    // Disabled due to flakiness: https://github.com/element-hq/element-web/issues/26895
+    test.skip("With sync accumulator, considers main thread and unthreaded receipts #24629", async ({
+        page,
+        app,
+        bot,
+    }) => {
         // Details are in https://github.com/vector-im/element-web/issues/24629
         // This proves we've fixed one of the "stuck unreads" issues.
 

playwright/e2e/register/email.spec.ts

@@ -32,7 +32,7 @@ test.describe("Email Registration", async () => {
     });
 
     test(
-        "registers an account and lands on the home page",
+        "registers an account and lands on the use case selection screen",
         { tag: "@screenshot" },
         async ({ page, mailhogClient, request, checkA11y }) => {
             await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
@@ -57,7 +57,7 @@ test.describe("Email Registration", async () => {
             const [emailLink] = messages.items[0].text.match(/http.+/);
             await request.get(emailLink); // "Click" the link in the email
 
-            await expect(page.getByText("Welcome alice")).toBeVisible();
+            await expect(page.locator(".mx_UseCaseSelection_skip")).toBeVisible();
         },
     );
 });

playwright/e2e/register/register.spec.ts

@@ -71,6 +71,12 @@ test.describe("Registration", () => {
             await expect(termsPolicy.getByLabel("Privacy Policy")).toBeVisible();
 
             await page.getByRole("button", { name: "Accept", exact: true }).click();
+
+            await expect(page.locator(".mx_UseCaseSelection_skip")).toBeVisible();
+            await expect(page).toMatchScreenshot("use-case-selection.png", screenshotOptions);
+            await checkA11y();
+            await page.getByRole("button", { name: "Skip", exact: true }).click();
+
             await expect(page).toHaveURL(/\/#\/home$/);
 
             /*

playwright/e2e/right-panel/memberlist.spec.ts

@@ -12,7 +12,7 @@ const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
 test.use({
-    synapseConfig: {
+    synapseConfigOptions: {
         presence: {
             enabled: false,
             include_offline_users_on_sync: false,

playwright/e2e/right-panel/right-panel.spec.ts

@@ -47,7 +47,6 @@ test.describe("RightPanel", () => {
             // Set a local room address
             const localAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Local Addresses" });
             await localAddresses.getByRole("textbox").fill(ROOM_ADDRESS_LONG);
-            await expect(page.getByText("This address is available to use")).toBeVisible();
             await localAddresses.getByRole("button", { name: "Add" }).click();
             await expect(localAddresses.getByText(`#${ROOM_ADDRESS_LONG}:localhost`)).toHaveClass(
                 "mx_EditableItem_item",

playwright/e2e/room-directory/room-directory.spec.ts

@@ -30,7 +30,6 @@ test.describe("Room Directory", () => {
             // First add a local address `gaming`
             const localAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Local Addresses" });
             await localAddresses.getByRole("textbox").fill("gaming");
-            await expect(page.getByText("This address is available to use")).toBeVisible();
             await localAddresses.getByRole("button", { name: "Add" }).click();
             await expect(localAddresses.getByText("#gaming:localhost")).toHaveClass("mx_EditableItem_item");
 

playwright/e2e/room_options/marked_unread.spec.ts

@@ -48,6 +48,6 @@ test.describe("Mark as Unread", () => {
         await roomTile.getByRole("button", { name: "Room options" }).click();
         await page.getByRole("menuitem", { name: "Mark as unread" }).click();
 
-        await expect(page.getByLabel(TEST_ROOM_NAME + " Unread messages.")).toBeVisible();
+        expect(page.getByLabel(TEST_ROOM_NAME + " Unread messages.")).toBeVisible();
     });
 });

playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -34,14 +34,14 @@ test.describe("Account user settings tab", () => {
         await expect(profile.getByRole("textbox", { name: "Display Name" })).toHaveValue(USER_NAME);
 
         // Assert that a userId is rendered
-        await expect(uut.getByLabel("Username")).toHaveText(user.userId);
+        expect(uut.getByLabel("Username")).toHaveText(user.userId);
 
         // Wait until spinners disappear
         await expect(uut.getByTestId("accountSection").locator(".mx_Spinner")).not.toBeVisible();
         await expect(uut.getByTestId("discoverySection").locator(".mx_Spinner")).not.toBeVisible();
 
         const accountSection = uut.getByTestId("accountSection");
-        await accountSection.scrollIntoViewIfNeeded();
+        accountSection.scrollIntoViewIfNeeded();
         // Assert that input areas for changing a password exists
         await expect(accountSection.getByLabel("Current password")).toBeVisible();
         await expect(accountSection.getByLabel("New Password")).toBeVisible();

playwright/e2e/settings/general-room-settings-tab.spec.ts

@@ -41,7 +41,6 @@ test.describe("General room settings tab", () => {
         // 1. Set the room-address to be a really long string
         const longString = "abcasdhjasjhdaj1jh1asdhasjdhajsdhjavhjksd".repeat(4);
         await settings.locator("#roomAliases input[label='Room address']").fill(longString);
-        await expect(page.getByText("This address is available to use")).toBeVisible();
         await settings.locator("#roomAliases").getByText("Add", { exact: true }).click();
 
         // 2. wait for the new setting to apply ...

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -24,7 +24,7 @@ test.describe("Preferences user settings tab", () => {
     });
 
     test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
-        await page.setViewportSize({ width: 1024, height: 3300 });
+        page.setViewportSize({ width: 1024, height: 3300 });
         const tab = await app.settings.openUserSettings("Preferences");
         // Assert that the top heading is rendered
         await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
@@ -61,7 +61,7 @@ test.describe("Preferences user settings tab", () => {
         // Click the button to display the dropdown menu
         await timezoneInput.getByRole("button", { name: "Set timezone" }).click();
         // Select a different value
-        await timezoneInput.getByRole("option", { name: /Africa\/Abidjan/ }).click();
+        timezoneInput.getByRole("option", { name: /Africa\/Abidjan/ }).click();
         // Check the new value
         await expect(timezoneValue.getByText("Africa/Abidjan")).toBeVisible();
     });

playwright/e2e/share-dialog/share-dialog.spec.ts

@@ -23,7 +23,7 @@ test.describe("Share dialog", () => {
 
         const dialog = page.getByRole("dialog", { name: "Share room" });
         await expect(dialog.getByText(`https://matrix.to/#/${room.roomId}`)).toBeVisible();
-        await expect(dialog).toMatchScreenshot("share-dialog-room.png", {
+        expect(dialog).toMatchScreenshot("share-dialog-room.png", {
             // QRCode and url changes at every run
             mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
         });
@@ -40,7 +40,7 @@ test.describe("Share dialog", () => {
 
         const dialog = page.getByRole("dialog", { name: "Share User" });
         await expect(dialog.getByText(`https://matrix.to/#/${user.userId}`)).toBeVisible();
-        await expect(dialog).toMatchScreenshot("share-dialog-user.png", {
+        expect(dialog).toMatchScreenshot("share-dialog-user.png", {
             // QRCode changes at every run
             mask: [page.locator(".mx_QRCode")],
         });
@@ -57,7 +57,7 @@ test.describe("Share dialog", () => {
 
         const dialog = page.getByRole("dialog", { name: "Share Room Message" });
         await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).toBeChecked();
-        await expect(dialog).toMatchScreenshot("share-dialog-event.png", {
+        expect(dialog).toMatchScreenshot("share-dialog-event.png", {
             // QRCode and url changes at every run
             mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
         });

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -108,6 +108,7 @@ test.describe("Sliding Sync", () => {
         await page.getByRole("menuitemradio", { name: "A-Z" }).dispatchEvent("click");
         await expect(page.locator(".mx_StyledRadioButton_checked").getByText("A-Z")).toBeVisible();
 
+        await page.pause();
         await checkOrder(["Apple", "Orange", "Pineapple", "Test Room"], page);
     });
 
@@ -275,7 +276,7 @@ test.describe("Sliding Sync", () => {
         // now rescind the invite
         await bot.evaluate(
             async (client, { roomRescind, clientUserId }) => {
-                await client.kick(roomRescind, clientUserId);
+                client.kick(roomRescind, clientUserId);
             },
             { roomRescind, clientUserId },
         );
@@ -294,7 +295,7 @@ test.describe("Sliding Sync", () => {
             is_direct: true,
         });
         await app.client.evaluate(async (client, roomId) => {
-            await client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
+            client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
         }, roomId);
         await expect(page.getByRole("group", { name: "Favourites" }).getByText("Favourite DM")).toBeVisible();
         await expect(page.getByRole("group", { name: "People" }).getByText("Favourite DM")).not.toBeAttached();

playwright/e2e/spotlight/spotlight.spec.ts

@@ -6,8 +6,8 @@ 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 type { AccountDataEvents, Visibility } from "matrix-js-sdk/src/matrix";
-import { test as base, expect } from "../../element-web-test";
+import type { AccountDataEvents } from "matrix-js-sdk/src/matrix";
+import { test, expect } from "../../element-web-test";
 import { Filter } from "../../pages/Spotlight";
 import { Bot } from "../../pages/bot";
 import type { Locator, Page } from "@playwright/test";
@@ -38,37 +38,41 @@ async function startDM(app: ElementAppPage, page: Page, name: string): Promise<v
     await expect(page.getByRole("group", { name: "People" }).getByText(name)).toBeAttached();
 }
 
-type RoomRef = { name: string; roomId: string };
-const test = base.extend<{
-    bot1: Bot;
-    bot2: Bot;
-    room1: RoomRef;
-    room2: RoomRef;
-    room3: RoomRef;
-}>({
-    bot1: async ({ page, homeserver }, use, testInfo) => {
-        const bot = new Bot(page, homeserver, { displayName: `BotBob_${testInfo.testId}`, autoAcceptInvites: true });
-        await use(bot);
-    },
-    bot2: async ({ page, homeserver }, use, testInfo) => {
-        const bot = new Bot(page, homeserver, { displayName: `ByteBot_${testInfo.testId}`, autoAcceptInvites: true });
-        await use(bot);
-    },
-    room1: async ({ app }, use) => {
-        const name = "247";
-        const roomId = await app.client.createRoom({ name, visibility: "public" as Visibility });
-        await use({ name, roomId });
-    },
-    room2: async ({ bot2 }, use) => {
-        const name = "Lounge";
-        const roomId = await bot2.createRoom({ name, visibility: "public" as Visibility });
-        await use({ name, roomId });
-    },
-    room3: async ({ bot2 }, use) => {
-        const name = "Public";
-        const roomId = await bot2.createRoom({
-            name,
-            visibility: "public" as Visibility,
+test.describe("Spotlight", () => {
+    const bot1Name = "BotBob";
+    let bot1: Bot;
+
+    const bot2Name = "ByteBot";
+    let bot2: Bot;
+
+    const room1Name = "247";
+    let room1Id: string;
+
+    const room2Name = "Lounge";
+    let room2Id: string;
+
+    const room3Name = "Public";
+    let room3Id: string;
+
+    test.use({
+        displayName: "Jim",
+    });
+
+    test.beforeEach(async ({ page, homeserver, app, user }) => {
+        bot1 = new Bot(page, homeserver, { displayName: bot1Name, autoAcceptInvites: true });
+        bot2 = new Bot(page, homeserver, { displayName: bot2Name, autoAcceptInvites: true });
+        const Visibility = await page.evaluate(() => (window as any).matrixcs.Visibility);
+
+        room1Id = await app.client.createRoom({ name: room1Name, visibility: Visibility.Public });
+
+        await bot1.joinRoom(room1Id);
+        const bot1UserId = await bot1.evaluate((client) => client.getUserId());
+        room2Id = await bot2.createRoom({ name: room2Name, visibility: Visibility.Public });
+        await bot2.inviteUser(room2Id, bot1UserId);
+
+        room3Id = await bot2.createRoom({
+            name: room3Name,
+            visibility: Visibility.Public,
             initial_state: [
                 {
                     type: "m.room.history_visibility",
@@ -79,26 +83,9 @@ const test = base.extend<{
                 },
             ],
         });
-        await use({ name, roomId });
-    },
-    context: async ({ context, homeserver }, use) => {
-        // Restart the homeserver to wipe its in-memory db so we can reuse the same user ID without cross-signing prompts
-        await homeserver.restart();
-        await use(context);
-    },
-});
+        await bot2.inviteUser(room3Id, bot1UserId);
 
-test.describe("Spotlight", () => {
-    test.use({
-        displayName: "Jim",
-    });
-
-    test.beforeEach(async ({ page, user, bot1, bot2, room1, room2, room3 }) => {
-        await bot1.joinRoom(room1.roomId);
-        await bot2.inviteUser(room2.roomId, bot1.credentials.userId);
-        await bot2.inviteUser(room3.roomId, bot1.credentials.userId);
-
-        await page.goto(`/#/room/${room1.roomId}`);
+        await page.goto("/#/room/" + room1Id);
         await expect(page.locator(".mx_RoomSublist_skeletonUI")).not.toBeAttached();
     });
 
@@ -130,69 +117,69 @@ test.describe("Spotlight", () => {
         await expect(spotlight.dialog.locator(".mx_SpotlightDialog_filter")).not.toBeAttached();
     });
 
-    test("should find joined rooms", async ({ page, app, room1 }) => {
+    test("should find joined rooms", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
-        await spotlight.search(room1.name);
+        await spotlight.search(room1Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(room1.name);
+        await expect(resultLocator.first()).toContainText(room1Name);
         await resultLocator.first().click();
-        await expect(page).toHaveURL(new RegExp(`#/room/${room1.roomId}`));
-        await expect(roomHeaderName(page)).toContainText(room1.name);
+        await expect(page).toHaveURL(new RegExp(`#/room/${room1Id}`));
+        await expect(roomHeaderName(page)).toContainText(room1Name);
     });
 
-    test("should find known public rooms", async ({ page, app, room1 }) => {
+    test("should find known public rooms", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.PublicRooms);
-        await spotlight.search(room1.name);
+        await spotlight.search(room1Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(room1.name);
+        await expect(resultLocator.first()).toContainText(room1Name);
         await expect(resultLocator.first()).toContainText("View");
         await resultLocator.first().click();
-        await expect(page).toHaveURL(new RegExp(`#/room/${room1.roomId}`));
-        await expect(roomHeaderName(page)).toContainText(room1.name);
+        await expect(page).toHaveURL(new RegExp(`#/room/${room1Id}`));
+        await expect(roomHeaderName(page)).toContainText(room1Name);
     });
 
-    test("should find unknown public rooms", async ({ page, app, room2 }) => {
+    test("should find unknown public rooms", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.PublicRooms);
-        await spotlight.search(room2.name);
+        await spotlight.search(room2Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(room2.name);
+        await expect(resultLocator.first()).toContainText(room2Name);
         await expect(resultLocator.first()).toContainText("Join");
         await resultLocator.first().click();
-        await expect(page).toHaveURL(new RegExp(`#/room/${room2.roomId}`));
+        await expect(page).toHaveURL(new RegExp(`#/room/${room2Id}`));
         await expect(page.locator(".mx_RoomView_MessageList")).toHaveCount(1);
-        await expect(roomHeaderName(page)).toContainText(room2.name);
+        await expect(roomHeaderName(page)).toContainText(room2Name);
     });
 
-    test("should find unknown public world readable rooms", async ({ page, app, room3 }) => {
+    test("should find unknown public world readable rooms", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.PublicRooms);
-        await spotlight.search(room3.name);
+        await spotlight.search(room3Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(room3.name);
+        await expect(resultLocator.first()).toContainText(room3Name);
         await expect(resultLocator.first()).toContainText("View");
         await resultLocator.first().click();
-        await expect(page).toHaveURL(new RegExp(`#/room/${room3.roomId}`));
+        await expect(page).toHaveURL(new RegExp(`#/room/${room3Id}`));
         await page.getByRole("button", { name: "Join the discussion" }).click();
-        await expect(roomHeaderName(page)).toHaveText(room3.name);
+        await expect(roomHeaderName(page)).toHaveText(room3Name);
     });
 
     // TODO: We currently can’t test finding rooms on other homeservers/other protocols
     // We obviously don’t have federation or bridges in local e2e tests
-    test.skip("should find unknown public rooms on other homeservers", async ({ page, app, room3 }) => {
+    test.skip("should find unknown public rooms on other homeservers", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.PublicRooms);
-        await spotlight.search(room3.name);
+        await spotlight.search(room3Name);
         await page.locator("[aria-haspopup=true][role=button]").click();
 
         await page
@@ -207,20 +194,20 @@ test.describe("Spotlight", () => {
 
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(room3.name);
-        await expect(resultLocator.first()).toContainText(room3.roomId);
+        await expect(resultLocator.first()).toContainText(room3Name);
+        await expect(resultLocator.first()).toContainText(room3Id);
     });
 
-    test("should find known people", async ({ page, app, bot1 }) => {
+    test("should find known people", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.displayName);
+        await spotlight.search(bot1Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot1.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot1Name);
         await resultLocator.first().click();
-        await expect(roomHeaderName(page)).toHaveText(bot1.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot1Name);
     });
 
     /**
@@ -230,41 +217,42 @@ test.describe("Spotlight", () => {
      *
      * https://github.com/matrix-org/synapse/issues/16472
      */
-    test("should find unknown people", async ({ page, app, bot2 }) => {
+    test("should find unknown people", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2Name);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2Name);
         await resultLocator.first().click();
-        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot2Name);
     });
 
-    test("should find group DMs by usernames or user ids", async ({ page, app, bot1, bot2, room1 }) => {
+    test("should find group DMs by usernames or user ids", async ({ page, app }) => {
         // First we want to share a room with both bots to ensure we’ve got their usernames cached
-        await app.client.inviteUser(room1.roomId, bot2.credentials.userId);
+        const bot2UserId = await bot2.evaluate((client) => client.getUserId());
+        await app.client.inviteUser(room1Id, bot2UserId);
 
         // Starting a DM with ByteBot (will be turned into a group dm later)
         let spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2Name);
         let resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2Name);
         await resultLocator.first().click();
 
         // Send first message to actually start DM
-        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot2Name);
         const locator = page.getByRole("textbox", { name: "Send a message…" });
         await locator.fill("Hey!");
         await locator.press("Enter");
 
         // Assert DM exists by checking for the first message and the room being in the room list
         await expect(page.locator(".mx_EventTile_body").filter({ hasText: "Hey!" })).toBeAttached({ timeout: 3000 });
-        await expect(page.getByRole("group", { name: "People" })).toContainText(bot2.credentials.displayName);
+        await expect(page.getByRole("group", { name: "People" })).toContainText(bot2Name);
 
         // Invite BotBob into existing DM with ByteBot
         const dmRooms = await app.client.evaluate((client, userId) => {
@@ -272,17 +260,18 @@ test.describe("Spotlight", () => {
                 .getAccountData("m.direct" as keyof AccountDataEvents)
                 ?.getContent<Record<string, string[]>>();
             return map[userId] ?? [];
-        }, bot2.credentials.userId);
+        }, bot2UserId);
         expect(dmRooms).toHaveLength(1);
         const groupDmName = await app.client.evaluate((client, id) => client.getRoom(id).name, dmRooms[0]);
-        await app.client.inviteUser(dmRooms[0], bot1.credentials.userId);
+        const bot1UserId = await bot1.evaluate((client) => client.getUserId());
+        await app.client.inviteUser(dmRooms[0], bot1UserId);
         await expect(roomHeaderName(page).first()).toContainText(groupDmName);
         await expect(page.getByRole("group", { name: "People" }).first()).toContainText(groupDmName);
 
         // Search for BotBob by id, should return group DM and user
         spotlight = await app.openSpotlight();
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.userId);
+        await spotlight.search(bot1UserId);
         await page.waitForTimeout(1000); // wait for the dialog to settle
         resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(2);
@@ -295,7 +284,7 @@ test.describe("Spotlight", () => {
         // Search for ByteBot by id, should return group DM and user
         spotlight = await app.openSpotlight();
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.userId);
+        await spotlight.search(bot2UserId);
         await page.waitForTimeout(1000); // wait for the dialog to settle
         resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(2);
@@ -308,10 +297,11 @@ test.describe("Spotlight", () => {
     });
 
     // Test against https://github.com/vector-im/element-web/issues/22851
-    test("should show each person result only once", async ({ page, app, bot1 }) => {
+    test("should show each person result only once", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
+        const bot1UserId = await bot1.evaluate((client) => client.getUserId());
 
         // 2 rounds of search to simulate the bug conditions. Specifically, the first search
         // should have 1 result (not 2) and the second search should also have 1 result (instead
@@ -320,24 +310,24 @@ test.describe("Spotlight", () => {
         // We search for user ID to trigger the profile lookup within the dialog.
         for (let i = 0; i < 2; i++) {
             console.log("Iteration: " + i);
-            await spotlight.search(bot1.credentials.userId);
+            await spotlight.search(bot1UserId);
             await page.waitForTimeout(1000); // wait for the dialog to settle
             const resultLocator = spotlight.results;
             await expect(resultLocator).toHaveCount(1);
-            await expect(resultLocator.first()).toContainText(bot1.credentials.userId);
+            await expect(resultLocator.first()).toContainText(bot1UserId);
         }
     });
 
-    test("should allow opening group chat dialog", async ({ page, app, bot2 }) => {
+    test("should allow opening group chat dialog", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2Name);
         await page.waitForTimeout(3000); // wait for the dialog to settle
 
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2Name);
 
         await expect(spotlight.dialog.locator(".mx_SpotlightDialog_startGroupChat")).toContainText(
             "Start a group chat",
@@ -346,18 +336,18 @@ test.describe("Spotlight", () => {
         await expect(page.getByRole("dialog")).toContainText("Direct Messages");
     });
 
-    test("should close spotlight after starting a DM", async ({ page, app, bot1 }) => {
-        await startDM(app, page, bot1.credentials.displayName);
+    test("should close spotlight after starting a DM", async ({ page, app }) => {
+        await startDM(app, page, bot1Name);
         await expect(page.locator(".mx_SpotlightDialog")).toHaveCount(0);
     });
 
-    test("should show the same user only once", async ({ page, app, bot1 }) => {
-        await startDM(app, page, bot1.credentials.displayName);
+    test("should show the same user only once", async ({ page, app }) => {
+        await startDM(app, page, bot1Name);
         await page.goto("/#/home");
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.displayName);
+        await spotlight.search(bot1Name);
         await page.waitForTimeout(3000); // wait for the dialog to settle
         await expect(spotlight.dialog.locator(".mx_Spinner")).not.toBeAttached();
         const resultLocator = spotlight.results;

playwright/e2e/threads/threads.spec.ts

@@ -24,7 +24,8 @@ test.describe("Threads", () => {
         });
     });
 
-    test("should be usable for a conversation", { tag: "@screenshot" }, async ({ page, app, bot }) => {
+    // Flaky: https://github.com/vector-im/element-web/issues/26452
+    test.skip("should be usable for a conversation", { tag: "@screenshot" }, async ({ page, app, bot }) => {
         const roomId = await app.client.createRoom({});
         await app.client.inviteUser(roomId, bot.credentials.userId);
         await bot.joinRoom(roomId);
@@ -75,7 +76,7 @@ test.describe("Threads", () => {
             mask: mask,
         });
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
-        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toHaveCount(2);
+        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toBeVisible();
 
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_bubble_layout.png", {
             mask: mask,
@@ -135,8 +136,8 @@ test.describe("Threads", () => {
         await page.getByRole("gridcell", { name: "👋" }).click();
 
         locator = page.locator(".mx_ThreadView");
-        // Make sure the CSS style for spacing is applied to mx_EventTile_footer on group/modern layout
-        await expect(locator.locator(".mx_EventTile[data-layout=group] .mx_EventTile_footer")).toHaveCSS(
+        // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout
+        await expect(locator.locator(".mx_EventTile[data-layout=group] .mx_ReactionsRow")).toHaveCSS(
             "margin-inline-start",
             ThreadViewGroupSpacingStart,
         );
@@ -163,7 +164,7 @@ test.describe("Threads", () => {
         locator = page.locator(
             ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last",
         );
-        await expect(locator.locator(".mx_EventTile_line .mx_EventTile_content"))
+        expect(locator.locator(".mx_EventTile_line .mx_EventTile_content"))
             // 76px: ThreadViewGroupSpacingStart + 14px + 6px
             // 14px: avatar width
             // See: _EventTile.pcss
@@ -201,14 +202,12 @@ test.describe("Threads", () => {
         await locator.click();
 
         // Wait until the response is redacted
-        // XXX: one would expect this redaction to be shown in the thread the message was in, but due to redactions
-        // stripping the thread_id, it is instead shown in the main timeline
-        await expect(page.locator(".mx_MainSplit_timeline").locator(".mx_EventTile_last")).toContainText(
-            "Message deleted",
-        );
+        await expect(
+            page.locator(".mx_ThreadView").locator(".mx_EventTile_last .mx_EventTile_receiptSent"),
+        ).toBeVisible();
 
         // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
-        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='group']")).toHaveCount(2);
+        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='group']")).toBeVisible();
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_group_layout.png",
             {
@@ -216,7 +215,7 @@ test.describe("Threads", () => {
             },
         );
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
-        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toHaveCount(2);
+        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toBeVisible();
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_bubble_layout.png",
             {
@@ -234,8 +233,8 @@ test.describe("Threads", () => {
 
         // User closes right panel after clicking back to thread list
         locator = page.locator(".mx_ThreadPanel");
-        await locator.getByRole("button", { name: "Threads" }).click();
-        await locator.getByRole("button", { name: "Close" }).click();
+        locator.getByRole("button", { name: "Threads" }).click();
+        locator.getByRole("button", { name: "Close" }).click();
 
         // Bot responds to thread
         await bot.sendMessage(roomId, "How are things?", threadId);
@@ -244,8 +243,9 @@ test.describe("Threads", () => {
         await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
         await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
 
-        locator = page.getByRole("banner").getByRole("button", { name: "Threads" });
-        await expect(locator).toHaveAttribute("data-indicator", "success"); // User asserts thread list unread indicator
+        locator = page.getByRole("button", { name: "Threads" });
+        await expect(locator).toHaveAttribute("data-indicator", "default"); // User asserts thread list unread indicator
+        // await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/);
         await locator.click(); // User opens thread list
 
         // User asserts thread with correct root & latest events & unread dot
@@ -273,18 +273,20 @@ test.describe("Threads", () => {
         await expect(locator.getByText("Great!")).toBeAttached();
         await locator.locator(".mx_EventTile_line").hover();
         await locator.locator(".mx_EventTile_line").getByRole("button", { name: "Edit" }).click();
-        await locator.getByRole("textbox").pressSequentially(" How about yourself?"); // fill would overwrite the original text
+        await locator.getByRole("textbox").fill(" How about yourself?{enter}");
         await locator.getByRole("textbox").press("Enter");
 
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
         await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content")).toHaveText("Great! How about yourself?");
+        await expect(
+            locator.locator(".mx_ThreadSummary_content").getByText("Great! How about yourself?"),
+        ).toBeAttached();
 
         // User closes right panel
         await page.locator(".mx_ThreadPanel").getByRole("button", { name: "Close" }).click();
 
         // Bot responds to thread and saves the id of their message to @eventId
-        const { event_id: eventId } = await bot.sendMessage(roomId, "I'm very good thanks", threadId);
+        const { event_id: eventId } = await bot.sendMessage(roomId, threadId, "I'm very good thanks");
 
         // User asserts
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
@@ -342,7 +344,7 @@ test.describe("Threads", () => {
 
             await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);
 
-            await (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Voice Message" }).click();
+            (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Voice Message" }).click();
             await page.waitForTimeout(3000);
             await app.getComposer(true).getByRole("button", { name: "Send voice message" }).click();
             await expect(page.locator(".mx_ThreadView .mx_MVoiceMessageBody")).toHaveCount(1);

playwright/e2e/timeline/timeline.spec.ts

@@ -590,6 +590,10 @@ test.describe("Timeline", () => {
             "should set inline start padding to a hidden event line",
             { tag: "@screenshot" },
             async ({ page, app, room }) => {
+                test.skip(
+                    true,
+                    "Disabled due to screenshot test being flaky - https://github.com/element-hq/element-web/issues/26890",
+                );
                 await sendEvent(app.client, room.roomId);
                 await page.goto(`/#/room/${room.roomId}`);
                 await app.settings.setValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
@@ -603,12 +607,7 @@ test.describe("Timeline", () => {
                 await messageEdit(page);
 
                 // Click timestamp to highlight hidden event line
-                const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a", {
-                    has: page.locator(".mx_MessageTimestamp"),
-                });
-                // wait for the remote echo otherwise we get an error modal due to a 404 on the /event/ API
-                await expect(timestamp).not.toHaveAttribute("href", /~!/);
-                await timestamp.locator(".mx_MessageTimestamp").click();
+                await page.locator(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
 
                 // should not add inline start padding to a hidden event line on IRC layout
                 await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);

playwright/e2e/user-onboarding/user-onboarding-new.spec.ts

@@ -0,0 +1,79 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("User Onboarding (new user)", () => {
+    test.use({
+        displayName: "Jane Doe",
+    });
+
+    // This first beforeEach happens before the `user` fixture runs
+    test.beforeEach(async ({ page }) => {
+        await page.addInitScript(() => {
+            window.localStorage.setItem("mx_registration_time", "1656633601");
+        });
+    });
+
+    test.beforeEach(async ({ page, user }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).toBeVisible();
+        await expect(page.getByRole("button", { name: "Welcome" })).toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingList")).toBeVisible();
+    });
+
+    test("page is shown and preference exists", { tag: "@screenshot" }, async ({ page, app }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).toMatchScreenshot(
+            "User-Onboarding-new-user-page-is-shown-and-preference-exists-1.png",
+        );
+        await app.settings.openUserSettings("Preferences");
+        await expect(page.getByText("Show shortcut to welcome checklist above the room list")).toBeVisible();
+    });
+
+    test("app download dialog", { tag: "@screenshot" }, async ({ page }) => {
+        await page.getByRole("button", { name: "Download apps" }).click();
+        await expect(
+            page.getByRole("dialog").getByRole("heading", { level: 1, name: "Download Element" }),
+        ).toBeVisible();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot(
+            "User-Onboarding-new-user-app-download-dialog-1.png",
+            {
+                // Set a constant bg behind the modal to ensure screenshot stability
+                css: `
+                    .mx_AppDownloadDialog_wrapper {
+                        background: black;
+                    }
+                `,
+            },
+        );
+    });
+
+    test("using find friends action should increase progress", async ({ page, homeserver }) => {
+        const bot = await homeserver.registerUser("botbob", "password", "BotBob");
+
+        const oldProgress = parseFloat(await page.getByRole("progressbar").getAttribute("value"));
+        await page.getByRole("button", { name: "Find friends" }).click();
+        await page.locator(".mx_InviteDialog_editor").getByRole("textbox").fill(bot.userId);
+        await page.getByRole("button", { name: "Go" }).click();
+        await expect(page.locator(".mx_InviteDialog_buttonAndSpinner")).not.toBeVisible();
+
+        const message = "Hi!";
+        const composer = page.getByRole("textbox", { name: "Send a message…" });
+        await composer.fill(`${message}`);
+        await composer.press("Enter");
+        await expect(page.locator(".mx_MTextBody.mx_EventTile_content", { hasText: message })).toBeVisible();
+
+        await page.goto("/#/home");
+        await expect(page.locator(".mx_UserOnboardingPage")).toBeVisible();
+        await expect(page.getByRole("button", { name: "Welcome" })).toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingList")).toBeVisible();
+
+        await page.waitForTimeout(500); // await progress bar animation
+        const progress = parseFloat(await page.getByRole("progressbar").getAttribute("value"));
+        expect(progress).toBeGreaterThan(oldProgress);
+    });
+});

playwright/e2e/user-onboarding/user-onboarding-old.spec.ts

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("User Onboarding (old user)", () => {
+    test.use({
+        displayName: "Jane Doe",
+    });
+
+    test.beforeEach(async ({ page }) => {
+        await page.addInitScript(() => {
+            window.localStorage.setItem("mx_registration_time", "2");
+        });
+    });
+
+    test("page and preference are hidden", async ({ page, user, app }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).not.toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingButton")).not.toBeVisible();
+        await app.settings.openUserSettings("Preferences");
+        await expect(page.getByText("Show shortcut to welcome checklist above the room list")).not.toBeVisible();
+    });
+});

playwright/e2e/widgets/stickers.spec.ts

@@ -150,7 +150,7 @@ test.describe("Stickers", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
         const widgetHtml = getWidgetHtml(contentUri, "image/png");
         stickerPickerUrl = webserver.start(widgetHtml);
-        await setWidgetAccountData(app, user, stickerPickerUrl);
+        setWidgetAccountData(app, user, stickerPickerUrl);
 
         await app.viewRoomByName(ROOM_NAME_1);
         await expect(page).toHaveURL(`/#/room/${room.roomId}`);
@@ -177,7 +177,7 @@ test.describe("Stickers", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
         const widgetHtml = getWidgetHtml(contentUri, "image/png");
         stickerPickerUrl = webserver.start(widgetHtml);
-        await setWidgetAccountData(app, user, stickerPickerUrl, false);
+        setWidgetAccountData(app, user, stickerPickerUrl, false);
 
         await app.viewRoomByName(ROOM_NAME_1);
         await expect(page).toHaveURL(`/#/room/${room.roomId}`);
@@ -192,7 +192,7 @@ test.describe("Stickers", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         });
         const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
         stickerPickerUrl = webserver.start(widgetHtml);
-        await setWidgetAccountData(app, user, stickerPickerUrl);
+        setWidgetAccountData(app, user, stickerPickerUrl);
 
         await app.viewRoomByName(ROOM_NAME_1);
         await expect(page).toHaveURL(`/#/room/${room.roomId}`);

playwright/element-web-test.ts

@@ -6,15 +6,7 @@ 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 {
-    expect as baseExpect,
-    Locator,
-    Page,
-    ExpectMatcherState,
-    ElementHandle,
-    PlaywrightTestArgs,
-    Fixtures as _Fixtures,
-} from "@playwright/test";
+import { expect as baseExpect, Locator, Page, ExpectMatcherState, ElementHandle } from "@playwright/test";
 import { sanitizeForFilePath } from "playwright-core/lib/utils";
 import AxeBuilder from "@axe-core/playwright";
 import _ from "lodash";
@@ -27,7 +19,7 @@ import { Crypto } from "./pages/crypto";
 import { Toasts } from "./pages/toasts";
 import { Bot, CreateBotOpts } from "./pages/bot";
 import { Webserver } from "./plugins/webserver";
-import { Options, Services, test as base } from "./services.ts";
+import { test as base } from "./services.ts";
 
 // Enable experimental service worker support
 // See https://playwright.dev/docs/service-workers-experimental#how-to-enable
@@ -49,11 +41,11 @@ const CONFIG_JSON: Partial<IConfigOptions> = {
     },
 };
 
-export interface CredentialsWithDisplayName extends Credentials {
+interface CredentialsWithDisplayName extends Credentials {
     displayName: string;
 }
 
-export interface TestFixtures {
+export interface Fixtures {
     axe: AxeBuilder;
     checkA11y: () => Promise<void>;
 
@@ -110,9 +102,7 @@ export interface TestFixtures {
     disablePresence: boolean;
 }
 
-type CombinedTestFixtures = PlaywrightTestArgs & TestFixtures;
-export type Fixtures = _Fixtures<CombinedTestFixtures, Services & Options, CombinedTestFixtures>;
-export const test = base.extend<TestFixtures>({
+export const test = base.extend<Fixtures>({
     context: async ({ context }, use, testInfo) => {
         // We skip tests instead of using grep-invert to still surface the counts in the html report
         test.skip(
@@ -160,7 +150,7 @@ export const test = base.extend<TestFixtures>({
         const displayName = testDisplayName ?? _.sample(names)!;
 
         const credentials = await homeserver.registerUser(`user_${testInfo.testId}`, password, displayName);
-        console.log(`Registered test user ${credentials.userId} with displayname ${displayName}`);
+        console.log(`Registered test user @user:localhost with displayname ${displayName}`);
 
         await use({
             ...credentials,

playwright/flaky-reporter.ts

@@ -25,15 +25,12 @@ type PaginationLinks = {
 };
 
 class FlakyReporter implements Reporter {
-    private flakes = new Map<string, TestCase[]>();
+    private flakes = new Set<string>();
 
     public onTestEnd(test: TestCase): void {
         const title = `${test.location.file.split("playwright/e2e/")[1]}: ${test.title}`;
         if (test.outcome() === "flaky") {
-            if (!this.flakes.has(title)) {
-                this.flakes.set(title, []);
-            }
-            this.flakes.get(title).push(test);
+            this.flakes.add(title);
         }
     }
 
@@ -100,14 +97,12 @@ class FlakyReporter implements Reporter {
         if (!GITHUB_TOKEN) return;
 
         const issues = await this.getAllIssues();
-        for (const [flake, results] of this.flakes) {
+        for (const flake of this.flakes) {
             const title = ISSUE_TITLE_PREFIX + "`" + flake + "`";
             const existingIssue = issues.find((issue) => issue.title === title);
             const headers = { Authorization: `Bearer ${GITHUB_TOKEN}` };
             const body = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;
 
-            const labels = [LABEL, ...results.map((test) => `${LABEL}-${test.parent.project()?.name}`)];
-
             if (existingIssue) {
                 console.log(`Found issue ${existingIssue.number} for ${flake}, adding comment...`);
                 // Ensure that the test is open
@@ -116,11 +111,6 @@ class FlakyReporter implements Reporter {
                     headers,
                     body: JSON.stringify({ state: "open" }),
                 });
-                await fetch(`${existingIssue.url}/labels`, {
-                    method: "POST",
-                    headers,
-                    body: JSON.stringify({ labels }),
-                });
                 await fetch(`${existingIssue.url}/comments`, {
                     method: "POST",
                     headers,
@@ -134,7 +124,7 @@ class FlakyReporter implements Reporter {
                     body: JSON.stringify({
                         title,
                         body,
-                        labels: [...labels],
+                        labels: [LABEL],
                     }),
                 });
             }

playwright/logger.ts

@@ -1,63 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { BrowserContext, Page, TestInfo } from "@playwright/test";
-import { Readable } from "stream";
-import stripAnsi from "strip-ansi";
-
-export class Logger {
-    private pages: Page[] = [];
-    private logs: Record<string, string> = {};
-
-    public getConsumer(container: string) {
-        this.logs[container] = "";
-        return (stream: Readable) => {
-            stream.on("data", (chunk) => {
-                this.logs[container] += chunk.toString();
-            });
-            stream.on("err", (chunk) => {
-                this.logs[container] += "ERR " + chunk.toString();
-            });
-        };
-    }
-
-    public async onTestStarted(context: BrowserContext) {
-        this.pages = [];
-        for (const id in this.logs) {
-            if (id.startsWith("page-")) {
-                delete this.logs[id];
-            } else {
-                this.logs[id] = "";
-            }
-        }
-
-        context.on("console", (msg) => {
-            const page = msg.page();
-            let pageIdx = this.pages.indexOf(page);
-            if (pageIdx === -1) {
-                this.pages.push(page);
-                pageIdx = this.pages.length - 1;
-                this.logs[`page-${pageIdx}`] = `Console logs for page with URL: ${page.url()}\n\n`;
-            }
-            const type = msg.type();
-            const text = msg.text();
-            this.logs[`page-${pageIdx}`] += `${type}: ${text}\n`;
-        });
-    }
-
-    public async onTestFinished(testInfo: TestInfo) {
-        if (testInfo.status !== "passed") {
-            for (const id in this.logs) {
-                if (!this.logs[id]) continue;
-                await testInfo.attach(id, {
-                    body: stripAnsi(this.logs[id]),
-                    contentType: "text/plain",
-                });
-            }
-        }
-    }
-}

playwright/pages/bot.ts

@@ -121,7 +121,7 @@ export class Bot extends Client {
                     return logger as unknown as Logger;
                 }
 
-                const logger = getLogger(`bot ${credentials.userId}`);
+                const logger = getLogger(`cypress bot ${credentials.userId}`);
 
                 const keys = {};
 
@@ -171,7 +171,7 @@ export class Bot extends Client {
                 if (opts.autoAcceptInvites) {
                     cli.on(window.matrixcs.RoomMemberEvent.Membership, (event, member) => {
                         if (member.membership === "invite" && member.userId === cli.getUserId()) {
-                            void cli.joinRoom(member.roomId);
+                            cli.joinRoom(member.roomId);
                         }
                     });
                 }

playwright/pages/client.ts

@@ -179,17 +179,18 @@ export class Client {
     public async createRoom(options: ICreateRoomOpts): Promise<string> {
         const client = await this.prepareClient();
         return await client.evaluate(async (cli, options) => {
+            const roomPromise = new Promise<void>((resolve) => {
+                const onRoom = (room: Room) => {
+                    if (room.roomId === roomId) {
+                        cli.off(window.matrixcs.ClientEvent.Room, onRoom);
+                        resolve();
+                    }
+                };
+                cli.on(window.matrixcs.ClientEvent.Room, onRoom);
+            });
             const { room_id: roomId } = await cli.createRoom(options);
             if (!cli.getRoom(roomId)) {
-                await new Promise<void>((resolve) => {
-                    const onRoom = (room: Room) => {
-                        if (room.roomId === roomId) {
-                            cli.off(window.matrixcs.ClientEvent.Room, onRoom);
-                            resolve();
-                        }
-                    };
-                    cli.on(window.matrixcs.ClientEvent.Room, onRoom);
-                });
+                await roomPromise;
             }
             return roomId;
         }, options);

playwright/plugins/homeserver/dendrite/index.ts

@@ -6,10 +6,12 @@ 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 { DendriteContainer, PineconeContainer } from "../../../testcontainers/dendrite.ts";
-import { Fixtures } from "../../../element-web-test.ts";
+import { Fixtures } from "@playwright/test";
 
-export const dendriteHomeserver: Fixtures = {
+import { DendriteContainer, PineconeContainer } from "../../../testcontainers/dendrite.ts";
+import { Services } from "../../../services.ts";
+
+export const dendriteHomeserver: Fixtures<{}, Services> = {
     _homeserver: [
         // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {

playwright/plugins/homeserver/index.ts

@@ -6,11 +6,8 @@ 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 { ClientServerApi } from "../utils/api.ts";
-
 export interface HomeserverInstance {
     readonly baseUrl: string;
-    readonly csApi: ClientServerApi;
 
     /**
      * Register a user on the given Homeserver using the shared registration secret.

playwright/plugins/homeserver/synapse/consentHomeserver.ts

@@ -6,9 +6,11 @@ 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 { Fixtures } from "../../../element-web-test.ts";
+import { Fixtures } from "@playwright/test";
 
-export const consentHomeserver: Fixtures = {
+import { Services } from "../../../services.ts";
+
+export const consentHomeserver: Fixtures<{}, Services> = {
     _homeserver: [
         async ({ _homeserver: container, mailhog }, use) => {
             container

playwright/plugins/homeserver/synapse/emailHomeserver.ts

@@ -6,9 +6,11 @@ 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 { Fixtures } from "../../../element-web-test.ts";
+import { Fixtures } from "@playwright/test";
 
-export const emailHomeserver: Fixtures = {
+import { Services } from "../../../services.ts";
+
+export const emailHomeserver: Fixtures<{}, Services> = {
     _homeserver: [
         async ({ _homeserver: container, mailhog }, use) => {
             container.withConfig({

playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts

@@ -6,30 +6,20 @@ 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 { Fixtures } from "@playwright/test";
 import { TestContainers } from "testcontainers";
 
+import { Services } from "../../../services.ts";
 import { OAuthServer } from "../../oauth_server";
-import { Fixtures } from "../../../element-web-test.ts";
 
-export const legacyOAuthHomeserver: Fixtures = {
-    oAuthServer: [
-        // eslint-disable-next-line no-empty-pattern
-        async ({}, use) => {
-            const server = new OAuthServer();
-            await use(server);
-            server.stop();
-        },
-        { scope: "worker" },
-    ],
-    context: async ({ context, oAuthServer }, use, testInfo) => {
-        oAuthServer.onTestStarted(testInfo);
-        await use(context);
-    },
+export const legacyOAuthHomeserver: Fixtures<{}, Services> = {
     _homeserver: [
-        async ({ oAuthServer, _homeserver: homeserver }, use) => {
-            const port = oAuthServer.start();
+        async ({ _homeserver: container }, use) => {
+            const server = new OAuthServer();
+            const port = server.start();
+
             await TestContainers.exposeHostPorts(port);
-            homeserver.withConfig({
+            container.withConfig({
                 oidc_providers: [
                     {
                         idp_id: "test",
@@ -53,8 +43,8 @@ export const legacyOAuthHomeserver: Fixtures = {
                     },
                 ],
             });
-
-            await use(homeserver);
+            await use(container);
+            server.stop();
         },
         { scope: "worker" },
     ],

playwright/plugins/homeserver/synapse/masHomeserver.ts

@@ -6,10 +6,14 @@ 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 { MatrixAuthenticationServiceContainer } from "../../../testcontainers/mas.ts";
-import { Fixtures } from "../../../element-web-test.ts";
+import { Fixtures, PlaywrightTestArgs } from "@playwright/test";
 
-export const masHomeserver: Fixtures = {
+import { Services } from "../../../services.ts";
+import { Fixtures as BaseFixtures } from "../../../element-web-test.ts";
+import { MatrixAuthenticationServiceContainer } from "../../../testcontainers/mas.ts";
+
+type Fixture = PlaywrightTestArgs & BaseFixtures;
+export const masHomeserver: Fixtures<Fixture, Services, Fixture> = {
     mas: [
         async ({ _homeserver: homeserver, logger, network, postgres, mailhog }, use) => {
             const config = {

playwright/plugins/homeserver/synapse/uiaLongSessionTimeoutHomeserver.ts

@@ -5,13 +5,15 @@ 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 { Fixtures } from "../../../element-web-test.ts";
+import { Fixtures } from "@playwright/test";
 
-export const uiaLongSessionTimeoutHomeserver: Fixtures = {
-    synapseConfig: [
-        async ({ synapseConfig }, use) => {
+import { Services } from "../../../services.ts";
+
+export const uiaLongSessionTimeoutHomeserver: Fixtures<{}, Services> = {
+    synapseConfigOptions: [
+        async ({ synapseConfigOptions }, use) => {
             await use({
-                ...synapseConfig,
+                ...synapseConfigOptions,
                 ui_auth: {
                     session_timeout: "300s",
                 },

playwright/plugins/oauth_server/index.ts

@@ -9,21 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import http from "http";
 import express from "express";
 import { AddressInfo } from "net";
-import { TestInfo } from "@playwright/test";
-
-import { randB64Bytes } from "../utils/rand.ts";
 
 export class OAuthServer {
     private server?: http.Server;
-    private sub?: string;
-
-    public onTestStarted(testInfo: TestInfo): void {
-        this.sub = testInfo.testId;
-    }
 
     public start(): number {
         if (this.server) this.stop();
-        const token = randB64Bytes(16);
 
         const app = express();
 
@@ -37,7 +28,7 @@ export class OAuthServer {
             const code = req.body.code;
             if (code === "valid_auth_code") {
                 res.send({
-                    access_token: token,
+                    access_token: "oauth_access_token",
                     token_type: "Bearer",
                     expires_in: "3600",
                 });
@@ -52,7 +43,7 @@ export class OAuthServer {
 
             // return an OAuth2 user info object
             res.send({
-                sub: this.sub,
+                sub: "alice",
                 name: "Alice",
             });
         });

playwright/plugins/utils/api.ts

@@ -1,76 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { APIRequestContext } from "@playwright/test";
-
-import { Credentials } from "../homeserver";
-
-export type Verb = "GET" | "POST" | "PUT" | "DELETE";
-
-export class Api {
-    private _request?: APIRequestContext;
-
-    constructor(private readonly baseUrl: string) {}
-
-    public setRequest(request: APIRequestContext): void {
-        this._request = request;
-    }
-
-    public async request<R extends {}>(verb: "GET", path: string, token?: string, data?: never): Promise<R>;
-    public async request<R extends {}>(verb: Verb, path: string, token?: string, data?: object): Promise<R>;
-    public async request<R extends {}>(verb: Verb, path: string, token?: string, data?: object): Promise<R> {
-        const url = `${this.baseUrl}${path}`;
-        const res = await this._request.fetch(url, {
-            data,
-            method: verb,
-            headers: token
-                ? {
-                      Authorization: `Bearer ${token}`,
-                  }
-                : undefined,
-        });
-
-        if (!res.ok()) {
-            throw new Error(
-                `Request to ${url} failed with status ${res.status()}: ${JSON.stringify(await res.json())}`,
-            );
-        }
-
-        return res.json();
-    }
-}
-
-export class ClientServerApi extends Api {
-    constructor(baseUrl: string) {
-        super(`${baseUrl}/_matrix/client`);
-    }
-
-    public async loginUser(userId: string, password: string): Promise<Credentials> {
-        const json = await this.request<{
-            access_token: string;
-            user_id: string;
-            device_id: string;
-            home_server: string;
-        }>("POST", "/v3/login", undefined, {
-            type: "m.login.password",
-            identifier: {
-                type: "m.id.user",
-                user: userId,
-            },
-            password: password,
-        });
-
-        return {
-            password,
-            accessToken: json.access_token,
-            userId: json.user_id,
-            deviceId: json.device_id,
-            homeServer: json.home_server || json.user_id.split(":").slice(1).join(":"),
-            username: userId.slice(1).split(":")[0],
-        };
-    }
-}

playwright/services.ts

@@ -7,43 +7,34 @@ Please see LICENSE files in the repository root for full details.
 
 import { test as base } from "@playwright/test";
 import mailhog from "mailhog";
-import { Network, StartedNetwork } from "testcontainers";
+import { GenericContainer, Network, StartedNetwork, StartedTestContainer, Wait } from "testcontainers";
 import { PostgreSqlContainer, StartedPostgreSqlContainer } from "@testcontainers/postgresql";
 
-import { SynapseConfig, SynapseContainer } from "./testcontainers/synapse.ts";
-import { Logger } from "./logger.ts";
+import { SynapseConfigOptions, SynapseContainer } from "./testcontainers/synapse.ts";
+import { ContainerLogger } from "./testcontainers/utils.ts";
 import { StartedMatrixAuthenticationServiceContainer } from "./testcontainers/mas.ts";
 import { HomeserverContainer, StartedHomeserverContainer } from "./testcontainers/HomeserverContainer.ts";
-import { MailhogContainer, StartedMailhogContainer } from "./testcontainers/mailhog.ts";
-import { OAuthServer } from "./plugins/oauth_server";
-
-export interface TestFixtures {
-    mailhogClient: mailhog.API;
-}
 
 export interface Services {
-    logger: Logger;
+    logger: ContainerLogger;
 
     network: StartedNetwork;
     postgres: StartedPostgreSqlContainer;
-    mailhog: StartedMailhogContainer;
 
-    synapseConfig: SynapseConfig;
+    mailhog: StartedTestContainer;
+    mailhogClient: mailhog.API;
+
+    synapseConfigOptions: SynapseConfigOptions;
     _homeserver: HomeserverContainer<any>;
     homeserver: StartedHomeserverContainer;
-    // Set in masHomeserver only
     mas?: StartedMatrixAuthenticationServiceContainer;
-    // Set in legacyOAuthHomeserver only
-    oAuthServer?: OAuthServer;
 }
 
-export interface Options {}
-
-export const test = base.extend<TestFixtures, Services & Options>({
+export const test = base.extend<{}, Services>({
     logger: [
         // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
-            const logger = new Logger();
+            const logger = new ContainerLogger();
             await use(logger);
         },
         { scope: "worker" },
@@ -59,7 +50,7 @@ export const test = base.extend<TestFixtures, Services & Options>({
     ],
     postgres: [
         async ({ logger, network }, use) => {
-            const container = await new PostgreSqlContainer()
+            const container = await new PostgreSqlContainer("postgres:13.3-alpine")
                 .withNetwork(network)
                 .withNetworkAliases("postgres")
                 .withLogConsumer(logger.getConsumer("postgres"))
@@ -88,22 +79,26 @@ export const test = base.extend<TestFixtures, Services & Options>({
 
     mailhog: [
         async ({ logger, network }, use) => {
-            const container = await new MailhogContainer()
+            const container = await new GenericContainer("mailhog/mailhog:latest")
                 .withNetwork(network)
                 .withNetworkAliases("mailhog")
+                .withExposedPorts(8025)
                 .withLogConsumer(logger.getConsumer("mailhog"))
+                .withWaitStrategy(Wait.forListeningPorts())
                 .start();
             await use(container);
             await container.stop();
         },
         { scope: "worker" },
     ],
-    mailhogClient: async ({ mailhog: container }, use) => {
-        await container.client.deleteAll();
-        await use(container.client);
-    },
+    mailhogClient: [
+        async ({ mailhog: container }, use) => {
+            await use(mailhog({ host: container.getHost(), port: container.getMappedPort(8025) }));
+        },
+        { scope: "worker" },
+    ],
 
-    synapseConfig: [{}, { scope: "worker" }],
+    synapseConfigOptions: [{}, { option: true, scope: "worker" }],
     _homeserver: [
         // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
@@ -113,13 +108,12 @@ export const test = base.extend<TestFixtures, Services & Options>({
         { scope: "worker" },
     ],
     homeserver: [
-        async ({ logger, network, _homeserver: homeserver, synapseConfig, mas }, use) => {
+        async ({ logger, network, _homeserver: homeserver, synapseConfigOptions, mas }, use) => {
             const container = await homeserver
                 .withNetwork(network)
                 .withNetworkAliases("homeserver")
                 .withLogConsumer(logger.getConsumer("synapse"))
-                .withConfig(synapseConfig)
-                .withMatrixAuthenticationService(mas)
+                .withConfig(synapseConfigOptions)
                 .start();
 
             await use(container);
@@ -137,11 +131,10 @@ export const test = base.extend<TestFixtures, Services & Options>({
         { scope: "worker" },
     ],
 
-    context: async ({ logger, context, request, homeserver, mailhogClient }, use, testInfo) => {
+    context: async ({ logger, context, request, homeserver }, use, testInfo) => {
         homeserver.setRequest(request);
-        await logger.onTestStarted(context);
+        await logger.testStarted(testInfo);
         await use(context);
-        await logger.onTestFinished(testInfo);
-        await homeserver.onTestFinished(testInfo);
+        await logger.testFinished(testInfo);
     },
 });

playwright/stale-screenshot-reporter.ts

@@ -20,13 +20,10 @@ const snapshotRoot = path.join(__dirname, "snapshots");
 
 class StaleScreenshotReporter implements Reporter {
     private screenshots = new Set<string>();
-    private failing = false;
     private success = true;
 
     public onTestEnd(test: TestCase): void {
-        if (!test.ok()) {
-            this.failing = true;
-        }
+        if (!test.ok()) return;
         for (const annotation of test.annotations) {
             if (annotation.type === "_screenshot") {
                 this.screenshots.add(annotation.description);
@@ -43,7 +40,6 @@ class StaleScreenshotReporter implements Reporter {
     }
 
     public async onExit(): Promise<void> {
-        if (this.failing) return;
         const screenshotFiles = new Set(await glob(`**/*.png`, { cwd: snapshotRoot }));
         for (const screenshot of screenshotFiles) {
             if (screenshot.split("-").at(-1) !== "linux.png") {

playwright/testcontainers/HomeserverContainer.ts

@@ -6,19 +6,17 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { AbstractStartedContainer, GenericContainer } from "testcontainers";
-import { APIRequestContext, TestInfo } from "@playwright/test";
+import { APIRequestContext } from "@playwright/test";
 
+import { StartedSynapseContainer } from "./synapse.ts";
 import { HomeserverInstance } from "../plugins/homeserver";
-import { StartedMatrixAuthenticationServiceContainer } from "./mas.ts";
 
 export interface HomeserverContainer<Config> extends GenericContainer {
     withConfigField(key: string, value: any): this;
     withConfig(config: Partial<Config>): this;
-    withMatrixAuthenticationService(mas?: StartedMatrixAuthenticationServiceContainer): this;
-    start(): Promise<StartedHomeserverContainer>;
+    start(): Promise<StartedSynapseContainer>;
 }
 
 export interface StartedHomeserverContainer extends AbstractStartedContainer, HomeserverInstance {
     setRequest(request: APIRequestContext): void;
-    onTestFinished(testInfo: TestInfo): Promise<void>;
 }

playwright/testcontainers/dendrite.ts

@@ -13,7 +13,6 @@ import { randB64Bytes } from "../plugins/utils/rand.ts";
 import { StartedSynapseContainer } from "./synapse.ts";
 import { deepCopy } from "../plugins/utils/object.ts";
 import { HomeserverContainer } from "./HomeserverContainer.ts";
-import { StartedMatrixAuthenticationServiceContainer } from "./mas.ts";
 
 const DEFAULT_CONFIG = {
     version: 2,
@@ -236,11 +235,7 @@ export class DendriteContainer extends GenericContainer implements HomeserverCon
         return this;
     }
 
-    public withMatrixAuthenticationService(mas?: StartedMatrixAuthenticationServiceContainer): this {
-        throw new Error("Dendrite does not support MAS.");
-    }
-
-    public override async start(): Promise<StartedDendriteContainer> {
+    public override async start(): Promise<StartedSynapseContainer> {
         this.withCopyContentToContainer([
             {
                 target: "/etc/dendrite/dendrite.yaml",
@@ -249,7 +244,8 @@ export class DendriteContainer extends GenericContainer implements HomeserverCon
         ]);
 
         const container = await super.start();
-        return new StartedDendriteContainer(
+        // Surprisingly, Dendrite implements the same register user Admin API Synapse, so we can just extend it
+        return new StartedSynapseContainer(
             container,
             `http://${container.getHost()}:${container.getMappedPort(8008)}`,
             this.config.client_api.registration_shared_secret,
@@ -262,6 +258,3 @@ export class PineconeContainer extends DendriteContainer {
         super("matrixdotorg/dendrite-demo-pinecone:main", "/usr/bin/dendrite-demo-pinecone");
     }
 }
-
-// Surprisingly, Dendrite implements the same register user Synapse Admin API, so we can just extend it
-export class StartedDendriteContainer extends StartedSynapseContainer {}

playwright/testcontainers/mailhog.ts

@@ -1,30 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { AbstractStartedContainer, GenericContainer, StartedTestContainer, Wait } from "testcontainers";
-import mailhog from "mailhog";
-
-export class MailhogContainer extends GenericContainer {
-    constructor() {
-        super("mailhog/mailhog:latest");
-
-        this.withExposedPorts(8025).withWaitStrategy(Wait.forListeningPorts());
-    }
-
-    public override async start(): Promise<StartedMailhogContainer> {
-        return new StartedMailhogContainer(await super.start());
-    }
-}
-
-export class StartedMailhogContainer extends AbstractStartedContainer {
-    public readonly client: mailhog.API;
-
-    constructor(container: StartedTestContainer) {
-        super(container);
-        this.client = mailhog({ host: container.getHost(), port: container.getMappedPort(8025) });
-    }
-}

playwright/testcontainers/mas.ts

@@ -5,13 +5,12 @@ 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 { AbstractStartedContainer, GenericContainer, StartedTestContainer, Wait, ExecResult } from "testcontainers";
+import { AbstractStartedContainer, GenericContainer, StartedTestContainer, Wait } from "testcontainers";
 import { StartedPostgreSqlContainer } from "@testcontainers/postgresql";
 import * as YAML from "yaml";
 
 import { getFreePort } from "../plugins/utils/port.ts";
 import { deepCopy } from "../plugins/utils/object.ts";
-import { Credentials } from "../plugins/homeserver";
 
 const DEFAULT_CONFIG = {
     http: {
@@ -19,10 +18,18 @@ const DEFAULT_CONFIG = {
             {
                 name: "web",
                 resources: [
-                    { name: "discovery" },
-                    { name: "human" },
-                    { name: "oauth" },
-                    { name: "compat" },
+                    {
+                        name: "discovery",
+                    },
+                    {
+                        name: "human",
+                    },
+                    {
+                        name: "oauth",
+                    },
+                    {
+                        name: "compat",
+                    },
                     {
                         name: "graphql",
                         playground: true,
@@ -161,26 +168,13 @@ const DEFAULT_CONFIG = {
         access_token_ttl: 300,
         compat_token_ttl: 300,
     },
-    rate_limiting: {
-        login: {
-            burst: 10,
-            per_second: 1,
-        },
-        registration: {
-            burst: 10,
-            per_second: 1,
-        },
-    },
 };
 
 export class MatrixAuthenticationServiceContainer extends GenericContainer {
     private config: typeof DEFAULT_CONFIG;
-    private readonly args = ["-c", "/config/config.yaml"];
 
     constructor(db: StartedPostgreSqlContainer) {
-        // We rely on `mas-cli manage add-email` which isn't in a release yet
-        // https://github.com/element-hq/matrix-authentication-service/pull/3235
-        super("ghcr.io/element-hq/matrix-authentication-service:sha-0b90c33");
+        super("ghcr.io/element-hq/matrix-authentication-service:0.12.0");
 
         this.config = deepCopy(DEFAULT_CONFIG);
         this.config.database.username = db.getUsername();
@@ -188,7 +182,7 @@ export class MatrixAuthenticationServiceContainer extends GenericContainer {
 
         this.withExposedPorts(8080, 8081)
             .withWaitStrategy(Wait.forHttp("/health", 8081))
-            .withCommand(["server", ...this.args]);
+            .withCommand(["server", "--config", "/config/config.yaml"]);
     }
 
     public withConfig(config: object): this {
@@ -216,125 +210,15 @@ export class MatrixAuthenticationServiceContainer extends GenericContainer {
             },
         ]);
 
-        return new StartedMatrixAuthenticationServiceContainer(
-            await super.start(),
-            `http://localhost:${port}`,
-            this.args,
-        );
+        return new StartedMatrixAuthenticationServiceContainer(await super.start(), `http://localhost:${port}`);
     }
 }
 
 export class StartedMatrixAuthenticationServiceContainer extends AbstractStartedContainer {
-    private adminTokenPromise?: Promise<string>;
-
     constructor(
         container: StartedTestContainer,
         public readonly baseUrl: string,
-        private readonly args: string[],
     ) {
         super(container);
     }
-
-    public async getAdminToken(): Promise<string> {
-        if (this.adminTokenPromise === undefined) {
-            this.adminTokenPromise = this.registerUserInternal(
-                "admin",
-                "totalyinsecureadminpassword",
-                undefined,
-                true,
-            ).then((res) => res.accessToken);
-        }
-        return this.adminTokenPromise;
-    }
-
-    private async manage(cmd: string, ...args: string[]): Promise<ExecResult> {
-        const result = await this.exec(["mas-cli", "manage", cmd, ...this.args, ...args]);
-        if (result.exitCode !== 0) {
-            throw new Error(`Failed mas-cli manage ${cmd}: ${result.output}`);
-        }
-        return result;
-    }
-
-    private async manageRegisterUser(
-        username: string,
-        password: string,
-        displayName?: string,
-        admin = false,
-    ): Promise<string> {
-        const args: string[] = [];
-        if (admin) args.push("-a");
-        const result = await this.manage(
-            "register-user",
-            ...args,
-            "-y",
-            "-p",
-            password,
-            "-d",
-            displayName ?? "",
-            username,
-        );
-
-        const registerLines = result.output.trim().split("\n");
-        const userId = registerLines
-            .find((line) => line.includes("Matrix ID: "))
-            ?.split(": ")
-            .pop();
-
-        if (!userId) {
-            throw new Error(`Failed to register user: ${result.output}`);
-        }
-
-        return userId;
-    }
-
-    private async manageIssueCompatibilityToken(
-        username: string,
-        admin = false,
-    ): Promise<{ accessToken: string; deviceId: string }> {
-        const args: string[] = [];
-        if (admin) args.push("--yes-i-want-to-grant-synapse-admin-privileges");
-        const result = await this.manage("issue-compatibility-token", ...args, username);
-
-        const parts = result.output.trim().split(/\s+/);
-        const accessToken = parts.find((part) => part.startsWith("mct_"));
-        const deviceId = parts.find((part) => part.startsWith("compat_session.device="))?.split("=")[1];
-
-        if (!accessToken || !deviceId) {
-            throw new Error(`Failed to issue compatibility token: ${result.output}`);
-        }
-
-        return { accessToken, deviceId };
-    }
-
-    private async registerUserInternal(
-        username: string,
-        password: string,
-        displayName?: string,
-        admin = false,
-    ): Promise<Credentials> {
-        const userId = await this.manageRegisterUser(username, password, displayName, admin);
-        const { deviceId, accessToken } = await this.manageIssueCompatibilityToken(username, admin);
-
-        return {
-            userId,
-            accessToken,
-            deviceId,
-            homeServer: userId.slice(1).split(":").slice(1).join(":"),
-            displayName,
-            username,
-            password,
-        };
-    }
-
-    public async registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
-        return this.registerUserInternal(username, password, displayName, false);
-    }
-
-    public async setThreepid(username: string, medium: string, address: string): Promise<void> {
-        if (medium !== "email") {
-            throw new Error("Only email threepids are supported by MAS");
-        }
-
-        await this.manage("add-email", username, address);
-    }
 }

playwright/testcontainers/synapse.ts

@@ -5,8 +5,8 @@ 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 { AbstractStartedContainer, GenericContainer, RestartOptions, StartedTestContainer, Wait } from "testcontainers";
-import { APIRequestContext, TestInfo } from "@playwright/test";
+import { AbstractStartedContainer, GenericContainer, StartedTestContainer, Wait } from "testcontainers";
+import { APIRequestContext } from "@playwright/test";
 import crypto from "node:crypto";
 import * as YAML from "yaml";
 import { set } from "lodash";
@@ -16,10 +16,6 @@ import { randB64Bytes } from "../plugins/utils/rand.ts";
 import { Credentials } from "../plugins/homeserver";
 import { deepCopy } from "../plugins/utils/object.ts";
 import { HomeserverContainer, StartedHomeserverContainer } from "./HomeserverContainer.ts";
-import { StartedMatrixAuthenticationServiceContainer } from "./mas.ts";
-import { Api, ClientServerApi, Verb } from "../plugins/utils/api.ts";
-
-const TAG = "develop@sha256:7be2e00da62dfbb2bad071c6d408fecb1fabf740a538d08768b9b3e0a8c45350";
 
 const DEFAULT_CONFIG = {
     server_name: "localhost",
@@ -140,14 +136,15 @@ const DEFAULT_CONFIG = {
     },
 };
 
-export type SynapseConfig = Partial<typeof DEFAULT_CONFIG>;
+export type SynapseConfigOptions = Partial<typeof DEFAULT_CONFIG>;
 
 export class SynapseContainer extends GenericContainer implements HomeserverContainer<typeof DEFAULT_CONFIG> {
     private config: typeof DEFAULT_CONFIG;
-    private mas?: StartedMatrixAuthenticationServiceContainer;
 
     constructor() {
-        super(`ghcr.io/element-hq/synapse:${TAG}`);
+        super(
+            `ghcr.io/element-hq/synapse:develop@sha256:b69222d98abe9625d46f5d3cb01683d5dc173ae339215297138392cfeec935d9`,
+        );
 
         this.config = deepCopy(DEFAULT_CONFIG);
         this.config.registration_shared_secret = randB64Bytes(16);
@@ -204,11 +201,6 @@ export class SynapseContainer extends GenericContainer implements HomeserverCont
         return this;
     }
 
-    public withMatrixAuthenticationService(mas?: StartedMatrixAuthenticationServiceContainer): this {
-        this.mas = mas;
-        return this;
-    }
-
     public override async start(): Promise<StartedSynapseContainer> {
         // Synapse config public_baseurl needs to know what URL it'll be accessed from, so we have to map the port manually
         const port = await getFreePort();
@@ -227,25 +219,17 @@ export class SynapseContainer extends GenericContainer implements HomeserverCont
                 },
             ]);
 
-        const container = await super.start();
-        const baseUrl = `http://localhost:${port}`;
-        if (this.mas) {
-            return new StartedSynapseWithMasContainer(
-                container,
-                baseUrl,
-                this.config.registration_shared_secret,
-                this.mas,
-            );
-        }
-
-        return new StartedSynapseContainer(container, baseUrl, this.config.registration_shared_secret);
+        return new StartedSynapseContainer(
+            await super.start(),
+            `http://localhost:${port}`,
+            this.config.registration_shared_secret,
+        );
     }
 }
 
 export class StartedSynapseContainer extends AbstractStartedContainer implements StartedHomeserverContainer {
-    protected adminTokenPromise?: Promise<string>;
-    protected readonly adminApi: Api;
-    public readonly csApi: ClientServerApi;
+    private adminToken?: string;
+    private request?: APIRequestContext;
 
     constructor(
         container: StartedTestContainer,
@@ -253,36 +237,10 @@ export class StartedSynapseContainer extends AbstractStartedContainer implements
         private readonly registrationSharedSecret: string,
     ) {
         super(container);
-        this.adminApi = new Api(`${this.baseUrl}/_synapse/admin`);
-        this.csApi = new ClientServerApi(this.baseUrl);
-    }
-
-    public restart(options?: Partial<RestartOptions>): Promise<void> {
-        this.adminTokenPromise = undefined;
-        return super.restart(options);
     }
 
     public setRequest(request: APIRequestContext): void {
-        this.csApi.setRequest(request);
-        this.adminApi.setRequest(request);
-    }
-
-    public async onTestFinished(testInfo: TestInfo): Promise<void> {
-        // Clean up the server to prevent rooms leaking between tests
-        await this.deletePublicRooms();
-    }
-
-    protected async deletePublicRooms(): Promise<void> {
-        const token = await this.getAdminToken();
-        // We hide the rooms from the room directory to save time between tests and for portability between homeservers
-        const { chunk: rooms } = await this.csApi.request<{
-            chunk: { room_id: string }[];
-        }>("GET", "/v3/publicRooms", token, {});
-        await Promise.all(
-            rooms.map((room) =>
-                this.csApi.request("PUT", `/v3/directory/list/room/${room.room_id}`, token, { visibility: "private" }),
-            ),
-        );
+        this.request = request;
     }
 
     private async registerUserInternal(
@@ -291,28 +249,30 @@ export class StartedSynapseContainer extends AbstractStartedContainer implements
         displayName?: string,
         admin = false,
     ): Promise<Credentials> {
-        const path = "/v1/register";
-        const { nonce } = await this.adminApi.request<{ nonce: string }>("GET", path, undefined, {});
+        const url = `${this.baseUrl}/_synapse/admin/v1/register`;
+        const { nonce } = await this.request.get(url).then((r) => r.json());
         const mac = crypto
             .createHmac("sha1", this.registrationSharedSecret)
             .update(`${nonce}\0${username}\0${password}\0${admin ? "" : "not"}admin`)
             .digest("hex");
-        const data = await this.adminApi.request<{
-            home_server: string;
-            access_token: string;
-            user_id: string;
-            device_id: string;
-        }>("POST", path, undefined, {
-            nonce,
-            username,
-            password,
-            mac,
-            admin,
-            displayname: displayName,
+        const res = await this.request.post(url, {
+            data: {
+                nonce,
+                username,
+                password,
+                mac,
+                admin,
+                displayname: displayName,
+            },
         });
 
+        if (!res.ok()) {
+            throw await res.json();
+        }
+
+        const data = await res.json();
         return {
-            homeServer: data.home_server || data.user_id.split(":").slice(1).join(":"),
+            homeServer: data.home_server,
             accessToken: data.access_token,
             userId: data.user_id,
             deviceId: data.device_id,
@@ -322,67 +282,57 @@ export class StartedSynapseContainer extends AbstractStartedContainer implements
         };
     }
 
-    protected async getAdminToken(): Promise<string> {
-        if (this.adminTokenPromise === undefined) {
-            this.adminTokenPromise = this.registerUserInternal(
-                "admin",
-                "totalyinsecureadminpassword",
-                undefined,
-                true,
-            ).then((res) => res.accessToken);
-        }
-        return this.adminTokenPromise;
-    }
-
-    private async adminRequest<R extends {}>(verb: "GET", path: string, data?: never): Promise<R>;
-    private async adminRequest<R extends {}>(verb: Verb, path: string, data?: object): Promise<R>;
-    private async adminRequest<R extends {}>(verb: Verb, path: string, data?: object): Promise<R> {
-        const adminToken = await this.getAdminToken();
-        return this.adminApi.request(verb, path, adminToken, data);
-    }
-
     public registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
         return this.registerUserInternal(username, password, displayName, false);
     }
 
     public async loginUser(userId: string, password: string): Promise<Credentials> {
-        return this.csApi.loginUser(userId, password);
-    }
-
-    public async setThreepid(userId: string, medium: string, address: string): Promise<void> {
-        await this.adminRequest("PUT", `/v2/users/${userId}`, {
-            threepids: [
-                {
-                    medium,
-                    address,
+        const url = `${this.baseUrl}/_matrix/client/v3/login`;
+        const res = await this.request.post(url, {
+            data: {
+                type: "m.login.password",
+                identifier: {
+                    type: "m.id.user",
+                    user: userId,
                 },
-            ],
+                password: password,
+            },
         });
-    }
-}
+        const json = await res.json();
 
-export class StartedSynapseWithMasContainer extends StartedSynapseContainer {
-    constructor(
-        container: StartedTestContainer,
-        baseUrl: string,
-        registrationSharedSecret: string,
-        private readonly mas: StartedMatrixAuthenticationServiceContainer,
-    ) {
-        super(container, baseUrl, registrationSharedSecret);
-    }
-
-    protected async getAdminToken(): Promise<string> {
-        if (this.adminTokenPromise === undefined) {
-            this.adminTokenPromise = this.mas.getAdminToken();
-        }
-        return this.adminTokenPromise;
-    }
-
-    public registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
-        return this.mas.registerUser(username, password, displayName);
+        return {
+            password,
+            accessToken: json.access_token,
+            userId: json.user_id,
+            deviceId: json.device_id,
+            homeServer: json.home_server,
+            username: userId.slice(1).split(":")[0],
+        };
     }
 
     public async setThreepid(userId: string, medium: string, address: string): Promise<void> {
-        return this.mas.setThreepid(userId, medium, address);
+        if (this.adminToken === undefined) {
+            const result = await this.registerUserInternal("admin", "totalyinsecureadminpassword", undefined, true);
+            this.adminToken = result.accessToken;
+        }
+
+        const url = `${this.baseUrl}/_synapse/admin/v2/users/${userId}`;
+        const res = await this.request.put(url, {
+            data: {
+                threepids: [
+                    {
+                        medium,
+                        address,
+                    },
+                ],
+            },
+            headers: {
+                Authorization: `Bearer ${this.adminToken}`,
+            },
+        });
+
+        if (!res.ok()) {
+            throw await res.json();
+        }
     }
 }

playwright/testcontainers/utils.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { TestInfo } from "@playwright/test";
+import { Readable } from "stream";
+import stripAnsi from "strip-ansi";
+
+export class ContainerLogger {
+    private logs: Record<string, string> = {};
+
+    public getConsumer(container: string) {
+        this.logs[container] = "";
+        return (stream: Readable) => {
+            stream.on("data", (chunk) => {
+                this.logs[container] += chunk.toString();
+            });
+            stream.on("err", (chunk) => {
+                this.logs[container] += "ERR " + chunk.toString();
+            });
+        };
+    }
+
+    public async testStarted(testInfo: TestInfo) {
+        for (const container in this.logs) {
+            this.logs[container] = "";
+        }
+    }
+
+    public async testFinished(testInfo: TestInfo) {
+        if (testInfo.status !== "passed") {
+            for (const container in this.logs) {
+                await testInfo.attach(container, {
+                    body: stripAnsi(this.logs[container]),
+                    contentType: "text/plain",
+                });
+            }
+        }
+    }
+}

res/css/_components.pcss

@@ -126,6 +126,7 @@
 @import "./views/context_menus/_RoomNotificationContextMenu.pcss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
+@import "./views/dialogs/_AppDownloadDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
 @import "./views/dialogs/_BulkRedactDialog.pcss";
 @import "./views/dialogs/_ChangelogDialog.pcss";
@@ -216,6 +217,8 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
+@import "./views/elements/_UseCaseSelection.pcss";
+@import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";
 @import "./views/emojipicker/_EmojiPicker.pcss";
 @import "./views/location/_LocationPicker.pcss";
@@ -376,6 +379,11 @@
 @import "./views/toasts/_IncomingLegacyCallToast.pcss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
 @import "./views/typography/_Heading.pcss";
+@import "./views/user-onboarding/_UserOnboardingButton.pcss";
+@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
+@import "./views/user-onboarding/_UserOnboardingList.pcss";
+@import "./views/user-onboarding/_UserOnboardingPage.pcss";
+@import "./views/user-onboarding/_UserOnboardingTask.pcss";
 @import "./views/verification/_VerificationShowSas.pcss";
 @import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
 @import "./views/voip/_CallDuration.pcss";

res/css/views/dialogs/_AppDownloadDialog.pcss

@@ -0,0 +1,77 @@
+.mx_AppDownloadDialog {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-32;
+    color: $primary-content;
+
+    &.mx_Dialog_fixedWidth {
+        width: 640px;
+    }
+
+    .mx_AppDownloadDialog_desktop {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $spacing-16;
+    }
+
+    .mx_AppDownloadDialog_mobile {
+        display: flex;
+        flex-direction: row;
+        gap: $spacing-24;
+
+        .mx_AppDownloadDialog_app {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-basis: 50%;
+            align-items: center;
+            gap: $spacing-16;
+
+            .mx_QRCode {
+                /* intentionally hardcoded color to ensure the QR code is readable in any situation */
+                background: #ffffff;
+
+                padding: $spacing-24;
+                border: 1px solid $quinary-content;
+                border-radius: 4px;
+                align-self: stretch;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+
+                .mx_VerificationQRCode {
+                    height: 144px;
+                    width: 144px;
+                    image-rendering: pixelated;
+                    border-radius: 0;
+                }
+            }
+
+            .mx_AppDownloadDialog_info {
+                font-size: $font-12px;
+                color: $tertiary-content;
+            }
+
+            .mx_AppDownloadDialog_links {
+                display: flex;
+                flex-direction: row;
+                gap: $spacing-8;
+
+                .mx_AccessibleButton {
+                    svg {
+                        height: 40px;
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_AppDownloadDialog_legal {
+        p {
+            margin: 0;
+            font-size: $font-12px;
+            color: $tertiary-content;
+        }
+    }
+}

res/css/views/elements/_UseCaseSelection.pcss

@@ -0,0 +1,122 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UseCaseSelection {
+    display: grid;
+    grid-template-rows: 1fr 1fr max-content 2fr;
+    height: 100%;
+    grid-gap: $spacing-40;
+
+    .mx_UseCaseSelection_title {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
+        h1 {
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-32px;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseSelection_info {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-8;
+        align-self: flex-end;
+
+        h2 {
+            margin: 0;
+            font-weight: 500;
+            font-size: $font-24px;
+            text-align: center;
+        }
+
+        h3 {
+            margin: 0;
+            font-weight: 400;
+            font-size: $font-16px;
+            color: $secondary-content;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseSelection_options {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 232px);
+        gap: $spacing-32;
+        align-self: stretch;
+        justify-content: center;
+    }
+
+    .mx_UseCaseSelection_skip {
+        display: flex;
+        flex-direction: column;
+        align-self: flex-start;
+    }
+}
+
+.mx_UseCaseSelection_slideIn {
+    animation-delay: 800ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UseCaseSelection_slideInLong;
+    animation-fill-mode: backwards;
+    will-change: opacity;
+}
+
+.mx_UseCaseSelection_slideInDelayed {
+    animation-delay: 1500ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UseCaseSelection_slideInShort;
+    animation-fill-mode: backwards;
+    will-change: transform, opacity;
+}
+
+.mx_UseCaseSelection_selected {
+    .mx_UseCaseSelection_slideIn,
+    .mx_UseCaseSelection_slideInDelayed {
+        animation-delay: 800ms;
+        animation-duration: 300ms;
+        animation-fill-mode: forwards;
+        animation-name: mx_UseCaseSelection_fadeOut;
+        will-change: opacity;
+    }
+}
+
+@keyframes mx_UseCaseSelection_slideInLong {
+    0% {
+        transform: translate(0, 20px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UseCaseSelection_slideInShort {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UseCaseSelection_fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

res/css/views/elements/_UseCaseSelectionButton.pcss

@@ -0,0 +1,98 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UseCaseSelectionButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $spacing-24 $spacing-16;
+    background: $background;
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+    text-align: center;
+    position: relative;
+    transition-property: box-shadow, transform;
+    transition-duration: 300ms;
+
+    .mx_UseCaseSelectionButton_icon {
+        /* workaround: design expects a layering of two colors */
+        background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #ffffff;
+        border-radius: 14px;
+        padding: $spacing-8;
+        margin-bottom: $spacing-16;
+
+        &::before {
+            content: "";
+            display: block;
+            /* this has to remain the same color across all themes,
+               as its background has a fixed color as well */
+            background: #1e1e1e;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            width: 22px;
+            height: 22px;
+        }
+
+        &.mx_UseCaseSelectionButton_messaging::before {
+            mask-image: url("$(res)/img/element-icons/chat-bubble.svg");
+        }
+
+        &.mx_UseCaseSelectionButton_work::before {
+            mask-image: url("$(res)/img/element-icons/view-community.svg");
+        }
+
+        &.mx_UseCaseSelectionButton_community::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
+            mask-size: 24px;
+        }
+    }
+
+    &:hover,
+    &:focus {
+        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
+        transform: translate(0, -$spacing-8);
+    }
+
+    .mx_UseCaseSelectionButton_selectedIcon {
+        right: -12px;
+        top: -12px;
+        position: absolute;
+        border-radius: 24px;
+        background: $accent;
+        padding: 6px;
+        transition-property: opacity, transform;
+        transition-duration: 150ms;
+        opacity: 0;
+        transform: scale(0.6);
+
+        &::before {
+            content: "";
+            display: block;
+            background: $background;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            width: 12px;
+            height: 12px;
+
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+        }
+    }
+
+    &.mx_UseCaseSelectionButton_selected {
+        border: 2px solid $accent;
+        padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
+        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
+
+        .mx_UseCaseSelectionButton_selectedIcon {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}

res/css/views/user-onboarding/_UserOnboardingButton.pcss

@@ -0,0 +1,75 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserOnboardingButton {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    align-items: stretch;
+    border-radius: 8px;
+    margin: $spacing-8 $spacing-8 0;
+    padding: $spacing-12;
+
+    &.mx_UserOnboardingButton_selected,
+    &:hover,
+    &:focus-within {
+        background-color: $panel-actions;
+    }
+
+    .mx_UserOnboardingButton_content {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: center;
+
+        .mx_Heading_h4 {
+            margin-right: auto;
+            font: var(--cpd-font-body-md-regular);
+            color: $primary-content;
+        }
+
+        .mx_UserOnboardingButton_percentage {
+            font-size: $font-12px;
+            color: $secondary-content;
+        }
+
+        .mx_UserOnboardingButton_close {
+            position: relative;
+            box-sizing: border-box;
+            width: 14px;
+            height: 14px;
+            border-radius: 7px;
+            border: 1px solid $secondary-content;
+            flex-shrink: 0;
+
+            &::before {
+                background-color: $secondary-content;
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 12px;
+                width: inherit;
+                height: inherit;
+                position: absolute;
+                left: -1px;
+                top: -1px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+            }
+        }
+    }
+
+    .mx_ProgressBar {
+        width: auto;
+        margin-top: $spacing-8;
+        background: $background;
+    }
+
+    &.mx_UserOnboardingButton_completed .mx_ProgressBar {
+        display: none;
+    }
+}

res/css/views/user-onboarding/_UserOnboardingHeader.pcss

@@ -0,0 +1,93 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserOnboardingHeader {
+    display: flex;
+    flex-direction: row;
+    padding: $spacing-32;
+    border-radius: 16px;
+    background: $system;
+    gap: $spacing-64;
+
+    animation-delay: 1500ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UserOnboardingHeader_slideIn;
+    animation-fill-mode: backwards;
+    will-change: opacity, transform;
+
+    @media (max-width: 1280px) {
+        margin: $spacing-32;
+    }
+
+    .mx_UserOnboardingHeader_dot {
+        color: $accent;
+    }
+
+    .mx_UserOnboardingHeader_content {
+        display: flex;
+        flex-direction: column;
+        flex-basis: 50%;
+        flex-shrink: 1;
+        flex-grow: 1;
+        min-width: 0;
+        gap: $spacing-24;
+        margin-right: auto;
+
+        p {
+            margin: 0;
+        }
+
+        .mx_AccessibleButton {
+            margin-top: auto;
+            align-self: flex-start;
+            padding: $spacing-12 $spacing-24;
+        }
+    }
+
+    .mx_UserOnboardingHeader_image {
+        flex-basis: 30%;
+        flex-shrink: 1;
+        flex-grow: 1;
+        align-self: center;
+        height: calc(100% + $spacing-64 + $spacing-64);
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+        min-width: 0;
+        min-height: 0;
+        margin-top: -$spacing-64;
+        margin-bottom: -$spacing-64;
+
+        animation-delay: 1500ms;
+        animation-duration: 300ms;
+        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+        animation-name: mx_UserOnboardingHeader_slideInLong;
+        animation-fill-mode: backwards;
+        will-change: opacity, transform;
+    }
+}
+
+@keyframes mx_UserOnboardingHeader_slideIn {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UserOnboardingHeader_slideInLong {
+    0% {
+        transform: translate(0, 32px);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}

res/css/views/user-onboarding/_UserOnboardingList.pcss

@@ -0,0 +1,67 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserOnboardingList {
+    display: flex;
+    flex-direction: column;
+    margin: 0 $spacing-32;
+
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UserOnboardingList_slideIn;
+    animation-fill-mode: backwards;
+    will-change: opacity;
+
+    .mx_UserOnboardingList_header {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+        align-items: center;
+
+        .mx_UserOnboardingList_hint {
+            color: $secondary-content;
+        }
+    }
+
+    .mx_UserOnboardingList_progress {
+        display: flex;
+        flex-direction: column;
+        counter-reset: user-onboarding;
+
+        .mx_ProgressBar {
+            width: auto;
+            margin-top: $spacing-16;
+            height: 16px;
+
+            @mixin ProgressBarBorderRadius 16px;
+        }
+    }
+
+    .mx_UserOnboardingList_list {
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+
+        appearance: none;
+        list-style: none;
+        margin: $spacing-32 0 0;
+        padding: 0;
+
+        grid-gap: $spacing-24;
+    }
+}
+
+@keyframes mx_UserOnboardingList_slideIn {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}

res/css/views/user-onboarding/_UserOnboardingPage.pcss

@@ -0,0 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserOnboardingPage {
+    width: 100%;
+    height: 100%;
+
+    align-self: stretch;
+    max-width: 1200px;
+    margin: 0 auto auto;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    gap: $spacing-64;
+    padding: $spacing-64 100px;
+
+    @media (max-width: 1280px) {
+        padding: $spacing-48 $spacing-32;
+    }
+}

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -0,0 +1,112 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserOnboardingTask {
+    display: contents;
+
+    .mx_UserOnboardingTask_number {
+        counter-increment: user-onboarding;
+        grid-column: 1;
+        color: $secondary-content;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        border: 2px solid $quinary-content;
+        border-radius: 32px;
+        line-height: 32px;
+        align-self: center;
+        position: relative;
+
+        &::before {
+            content: counter(user-onboarding);
+        }
+    }
+
+    .mx_UserOnboardingTask_content {
+        grid-column: 2;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        transition: all 500ms;
+
+        .mx_UserOnboardingTask_title {
+            font: var(--cpd-font-body-md-medium);
+        }
+
+        .mx_UserOnboardingTask_description {
+            font-size: $font-12px;
+        }
+    }
+
+    .mx_UserOnboardingTask_action.mx_AccessibleButton {
+        grid-column: 3;
+        min-width: 180px;
+
+        @media (max-width: 800px) {
+            grid-column: 2;
+            margin-top: -16px;
+        }
+    }
+
+    &.mx_UserOnboardingTask_completed {
+        .mx_UserOnboardingTask_number {
+            &::before {
+                content: "";
+                position: absolute;
+                inset: -2px;
+                background: var(--cpd-color-icon-accent-tertiary);
+                border-radius: 32px;
+
+                animation-duration: 300ms;
+                animation-fill-mode: both;
+                animation-name: mx_UserOnboardingTask_spring;
+                will-change: opacity, transform;
+            }
+
+            &::after {
+                background-color: var(--cpd-color-icon-on-solid-primary);
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 24px;
+                width: inherit;
+                height: inherit;
+                position: absolute;
+                left: 0;
+                top: 0;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+
+                animation-duration: 300ms;
+                animation-fill-mode: both;
+                animation-name: mx_UserOnboardingTask_spring;
+                will-change: opacity, transform;
+            }
+        }
+
+        .mx_UserOnboardingTask_content {
+            opacity: 0.6;
+        }
+    }
+}
+
+@keyframes mx_UserOnboardingTask_spring {
+    0% {
+        opacity: 0;
+        transform: scale(0.6);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}