Update dependency @babel/preset-react to v7.26.3 (#28714 )

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Update @vector-im/compound-web to 7.5.0 (#28700 )
2024-12-11 20:24:53 +00:00 · 2024-12-11 19:35:59 +00:00 · 2024-12-11 19:00:24 +00:00 · 2024-12-11 15:02:47 +00:00 · 2024-12-11 14:25:56 +00:00 · 2024-12-11 13:13:09 +00:00
356 changed files with 2978 additions and 4403 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -42,6 +42,10 @@ module.exports = {
                name: "setImmediate",
                message: "Use setTimeout instead.",
            },
+            {
+                name: "Buffer",
+                message: "Buffer is not available in the web.",
+            },
        ],

        "import/no-duplicates": ["error"],
@ -255,6 +259,9 @@ module.exports = {
                        additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"],
                    },
                ],
+
+                // These are fine in tests
+                "no-restricted-globals": "off",
            },
        },
        {
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -13,6 +13,7 @@

 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings
+/src/i18n/strings/en_EN.json  @element-hq/element-web-reviewers
 # Ignore the synapse plugin as this is updated by GHA for docker image updating
 /playwright/plugins/homeserver/synapse/index.ts

--- a/.github/actions/download-verify-element-tarball/action.yml
+++ b/.github/actions/download-verify-element-tarball/action.yml
@ -10,24 +10,29 @@ inputs:
 runs:
    using: composite
    steps:
-        - name: Download current version for its old bundles
-          id: current_download
+        - name: Download release tarball
          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
          with:
-              tag: steps.current_version.outputs.version
+              tag: ${{ inputs.tag }}
              fileName: element-*.tar.gz*
              out-file-path: ${{ runner.temp }}/download-verify-element-tarball

        - name: Verify tarball
+          shell: bash
          run: gpg --verify element-*.tar.gz.asc element-*.tar.gz
          working-directory: ${{ runner.temp }}/download-verify-element-tarball

        - name: Extract tarball
-          run: tar xvzf element-*.tar.gz -C webapp --strip-components=1
+          shell: bash
+          run: |
+              mkdir webapp
+              tar xvzf element-*.tar.gz -C webapp --strip-components=1
          working-directory: ${{ runner.temp }}/download-verify-element-tarball

        - name: Move webapp to out-file-path
+          shell: bash
          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp ${{ inputs.out-file-path }}

        - name: Clean up temp directory
+          shell: bash
          run: rm -R ${{ runner.temp }}/download-verify-element-tarball
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -1,7 +1,8 @@
 # Manual deploy workflow for deploying to app.element.io & staging.element.io
 # Runs automatically for staging.element.io when an RC or Release is published
 # Note: Does *NOT* run automatically for app.element.io so that it gets tested on staging.element.io beforehand
-name: Build and Deploy ${{ inputs.site || 'staging.element.io' }}
+name: Deploy release
+run-name: Deploy ${{ github.ref_name }} to ${{ inputs.site || 'staging.element.io' }}
 on:
    release:
        types: [published]
@ -28,37 +29,40 @@ jobs:
        env:
            SITE: ${{ inputs.site || 'staging.element.io' }}
        steps:
+            - uses: actions/checkout@v4
+
            - name: Load GPG key
              run: |
                  curl https://packages.element.io/element-release-key.gpg | gpg --import
                  gpg -k "$GPG_FINGERPRINT"
              env:
-                  GPG_FINGERPRINT: ${{ secrets.GPG_FINGERPRINT }}
+                  GPG_FINGERPRINT: ${{ vars.GPG_FINGERPRINT }}

            - name: Check current version on deployment
              id: current_version
              run: |
-                  echo "version=$(curl -s https://$SITE/version)" >> $GITHUB_OUTPUT
+                  version=$(curl -s https://$SITE/version)
+                  echo "version=${version#v}" >> $GITHUB_OUTPUT

            # The current version bundle melding dance is skipped if the version we're deploying is the same
            # as then we're just doing a re-deploy of the same version with potentially different configs.
            - name: Download current version for its old bundles
              id: current_download
              if: steps.current_version.outputs.version != github.ref_name
-              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
+              uses: ./.github/actions/download-verify-element-tarball
              with:
-                  tag: steps.current_version.outputs.version
-                  out-file-path: current_version
+                  tag: v${{ steps.current_version.outputs.version }}
+                  out-file-path: _current_version

            - name: Download target version
-              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
+              uses: ./.github/actions/download-verify-element-tarball
              with:
                  tag: ${{ github.ref_name }}
                  out-file-path: _deploy

            - name: Merge current bundles into target
              if: steps.current_download.outcome == 'success'
-              run: cp -vnpr current_version/bundles/* _deploy/bundles/
+              run: cp -vnpr _current_version/bundles/* _deploy/bundles/

            - name: Copy config
              run: cp element.io/app/config.json _deploy/config.json
@ -73,7 +77,7 @@ jobs:
              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
              with:
                  ref: ${{ github.sha }}
-                  running-workflow-name: "Build and Deploy ${{ env.SITE }}"
+                  running-workflow-name: "Deploy to Cloudflare Pages"
                  repo-token: ${{ secrets.GITHUB_TOKEN }}
                  wait-interval: 10
                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages).)*$
--- a/.github/workflows/end-to-end-tests.yaml
+++ b/.github/workflows/end-to-end-tests.yaml
@ -83,7 +83,7 @@ jobs:
        name: "Run Tests ${{ matrix.runner }}/${{ strategy.job-total }}"
        needs: build
        if: inputs.skip != true
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
        permissions:
            actions: read
            issues: read
@ -124,14 +124,18 @@ jobs:
              with:
                  path: |
                      ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-playwright-${{ steps.playwright.outputs.version }}
+                  key: ${{ runner.os }}-playwright-${{ steps.playwright.outputs.version }}-chromium

-            - name: Install Playwright browsers
+            - name: Install Playwright browser
              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: yarn playwright install --with-deps
+              run: yarn playwright install --with-deps --no-shell chromium

+            # We skip tests tagged with @mergequeue when running on PRs, but run them in MQ and everywhere else
            - name: Run Playwright tests
-              run: yarn playwright test --shard ${{ matrix.runner }}/${{ strategy.job-total }}
+              run: |
+                  yarn playwright test \
+                      --shard "${{ matrix.runner }}/${{ strategy.job-total }}" \
+                      ${{ github.event_name == 'pull_request' && '--grep-invert @mergequeue' || '' }}

            - name: Upload blob report to GitHub Actions Artifacts
              if: always()
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -104,7 +104,7 @@ jobs:

            - name: Skip SonarCloud in merge queue
              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@66088c44e212a906c32a047529a213d81809ec1c
+              uses: guibranco/github-status-action-v2@d469d49426f5a7b8a1fbcac20ad274d3e4892321
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,33 @@
+Changes in [1.11.87](https://github.com/element-hq/element-web/releases/tag/v1.11.87) (2024-12-03)
+==================================================================================================
+## ✨ Features
+
+* Send and respect MSC4230 is\_animated flag ([#28513](https://github.com/element-hq/element-web/pull/28513)). Contributed by @t3chguy.
+* Display a warning when an unverified user's identity changes ([#28211](https://github.com/element-hq/element-web/pull/28211)). Contributed by @uhoreg.
+* Swap out Twitter link for Mastodon on auth footer ([#28508](https://github.com/element-hq/element-web/pull/28508)). Contributed by @t3chguy.
+* Consider `org.matrix.msc3417.call` as video room in create room dialog ([#28497](https://github.com/element-hq/element-web/pull/28497)). Contributed by @t3chguy.
+* Standardise icons using Compound Design Tokens ([#28217](https://github.com/element-hq/element-web/pull/28217)). Contributed by @t3chguy.
+* Start sending stable `m.marked_unread` events ([#28478](https://github.com/element-hq/element-web/pull/28478)). Contributed by @tulir.
+* Upgrade to compound-design-tokens v2 ([#28471](https://github.com/element-hq/element-web/pull/28471)). Contributed by @t3chguy.
+* Standardise icons using Compound Design Tokens ([#28286](https://github.com/element-hq/element-web/pull/28286)). Contributed by @t3chguy.
+* Remove reply fallbacks as per merged MSC2781 ([#28406](https://github.com/element-hq/element-web/pull/28406)). Contributed by @t3chguy.
+* Use React Suspense when rendering async modals ([#28386](https://github.com/element-hq/element-web/pull/28386)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Add spinner when room encryption is loading in room settings ([#28535](https://github.com/element-hq/element-web/pull/28535)). Contributed by @florianduros.
+* Fix getOidcCallbackUrl for Element Desktop ([#28521](https://github.com/element-hq/element-web/pull/28521)). Contributed by @t3chguy.
+* Filter out redacted poll votes to avoid crashing the Poll widget ([#28498](https://github.com/element-hq/element-web/pull/28498)). Contributed by @t3chguy.
+* Fix force tab complete not working since switching to React 18 createRoot API ([#28505](https://github.com/element-hq/element-web/pull/28505)). Contributed by @t3chguy.
+* Fix media captions in bubble layout ([#28480](https://github.com/element-hq/element-web/pull/28480)). Contributed by @tulir.
+* Reset cross-signing before backup when resetting both ([#28402](https://github.com/element-hq/element-web/pull/28402)). Contributed by @uhoreg.
+* Listen to events so that encryption icon updates when status changes ([#28407](https://github.com/element-hq/element-web/pull/28407)). Contributed by @uhoreg.
+* Check that the file the user chose has a MIME type of `image/*` ([#28467](https://github.com/element-hq/element-web/pull/28467)). Contributed by @t3chguy.
+* Fix download button size in message action bar ([#28472](https://github.com/element-hq/element-web/pull/28472)). Contributed by @t3chguy.
+* Allow tab completing users in brackets ([#28460](https://github.com/element-hq/element-web/pull/28460)). Contributed by @t3chguy.
+* Fix React 18 strict mode breaking spotlight dialog ([#28452](https://github.com/element-hq/element-web/pull/28452)). Contributed by @MidhunSureshR.
+
+
 Changes in [1.11.86](https://github.com/element-hq/element-web/releases/tag/v1.11.86) (2024-11-19)
 ==================================================================================================
 ## ✨ Features
--- a/docs/playwright.md
+++ b/docs/playwright.md
@ -217,3 +217,10 @@ instead of the native `toHaveScreenshot`.

 If you are running Linux and are unfortunate that the screenshots are not rendering identically,
 you may wish to specify `--ignore-snapshots` and rely on Docker to render them for you.
+
+## Test Tags
+
+We use test tags to categorise tests for running subsets more efficiently.
+
+- `@mergequeue`: Tests that are slow or flaky and cover areas of the app we update seldom, should not be run on every PR commit but will be run in the Merge Queue.
+- `@screenshot`: Tests that use `toMatchScreenshot` to speed up a run of `test:playwright:screenshots`. A test with this tag must not also have the `@mergequeue` tag as this would cause false positives in the stale screenshot detection.
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.86",
+    "version": "1.11.87",
    "description": "A feature-rich client for Matrix.org",
    "author": "New Vector Ltd.",
    "repository": {
@ -64,7 +64,7 @@
        "test:playwright:open": "yarn test:playwright --ui",
        "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
        "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",
+        "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",
        "coverage": "yarn test --coverage",
        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
        "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
@ -79,6 +79,8 @@
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
+        "@fontsource/inconsolata": "^5",
+        "@fontsource/inter": "^5",
        "@formatjs/intl-segmenter": "^11.5.7",
        "@matrix-org/analytics-events": "^0.29.0",
        "@matrix-org/emojibase-bindings": "^1.3.3",
@ -86,7 +88,7 @@
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^8.0.0",
        "@vector-im/compound-design-tokens": "^2.0.1",
-        "@vector-im/compound-web": "^7.4.0",
+        "@vector-im/compound-web": "^7.5.0",
        "@vector-im/matrix-wysiwyg": "2.37.13",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
@ -114,10 +116,10 @@
        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
-        "linkify-element": "4.1.4",
-        "linkify-react": "4.1.4",
-        "linkify-string": "4.1.4",
-        "linkifyjs": "4.1.4",
+        "linkify-element": "4.2.0",
+        "linkify-react": "4.2.0",
+        "linkify-string": "4.2.0",
+        "linkifyjs": "4.2.0",
        "lodash": "^4.17.21",
        "maplibre-gl": "^4.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
@ -214,7 +216,6 @@
        "babel-loader": "^9.0.0",
        "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
        "blob-polyfill": "^9.0.0",
-        "buffer": "^6.0.3",
        "chokidar": "^4.0.0",
        "concurrently": "^9.0.0",
        "copy-webpack-plugin": "^12.0.0",
@ -268,7 +269,7 @@
        "postcss-preset-env": "^10.0.0",
        "postcss-scss": "^4.0.4",
        "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.4.1",
+        "prettier": "3.4.2",
        "process": "^0.11.10",
        "raw-loader": "^4.0.2",
        "rimraf": "^6.0.0",
@ -281,7 +282,7 @@
        "terser-webpack-plugin": "^5.3.9",
        "ts-node": "^10.9.1",
        "ts-prune": "^0.10.3",
-        "typescript": "5.7.2",
+        "typescript": "5.6.3",
        "util": "^0.12.5",
        "web-streams-polyfill": "^4.0.0",
        "webpack": "^5.89.0",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -6,11 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import { defineConfig } from "@playwright/test";
+import { defineConfig, devices } from "@playwright/test";

 const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";

 export default defineConfig({
+    projects: [{ name: "Chrome", use: { ...devices["Desktop Chrome"], channel: "chromium" } }],
    use: {
        viewport: { width: 1280, height: 720 },
        ignoreHTTPSErrors: true,
--- a/playwright/Dockerfile
+++ b/playwright/Dockerfile
@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.49.0-jammy
+FROM mcr.microsoft.com/playwright:v1.49.0-noble

 WORKDIR /work

--- a/playwright/e2e/app-loading/feature-detection.spec.ts
+++ b/playwright/e2e/app-loading/feature-detection.spec.ts
@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import { test, expect } from "../../element-web-test";

-test(`shows error page if browser lacks Intl support`, async ({ page }) => {
+test(`shows error page if browser lacks Intl support`, { tag: "@screenshot" }, async ({ page }) => {
    await page.addInitScript({ content: `delete window.Intl;` });
    await page.goto("/");

@ -21,7 +21,7 @@ test(`shows error page if browser lacks Intl support`, async ({ page }) => {
    await expect(page).toMatchScreenshot("unsupported-browser.png");
 });

-test(`shows error page if browser lacks WebAssembly support`, async ({ page }) => {
+test(`shows error page if browser lacks WebAssembly support`, { tag: "@screenshot" }, async ({ page }) => {
    await page.addInitScript({ content: `delete window.WebAssembly;` });
    await page.goto("/");

--- a/playwright/e2e/audio-player/audio-player.spec.ts
+++ b/playwright/e2e/audio-player/audio-player.spec.ts
@ -134,18 +134,22 @@ test.describe("Audio player", () => {
        ).toBeVisible();
    });

-    test("should be correctly rendered - light theme", async ({ page, app }) => {
+    test("should be correctly rendered - light theme", { tag: "@screenshot" }, async ({ page, app }) => {
        await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
        await takeSnapshots(page, app, "Selected EventTile of audio player (light theme)");
    });

-    test("should be correctly rendered - light theme with monospace font", async ({ page, app }) => {
-        await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
+    test(
+        "should be correctly rendered - light theme with monospace font",
+        { tag: "@screenshot" },
+        async ({ page, app }) => {
+            await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");

-        await takeSnapshots(page, app, "Selected EventTile of audio player (light theme, monospace font)", true); // Enable monospace
-    });
+            await takeSnapshots(page, app, "Selected EventTile of audio player (light theme, monospace font)", true); // Enable monospace
+        },
+    );

-    test("should be correctly rendered - high contrast theme", async ({ page, app }) => {
+    test("should be correctly rendered - high contrast theme", { tag: "@screenshot" }, async ({ page, app }) => {
        // Disable system theme in case ThemeWatcher enables the theme automatically,
        // so that the high contrast theme can be enabled
        await app.settings.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
@ -161,7 +165,7 @@ test.describe("Audio player", () => {
        await takeSnapshots(page, app, "Selected EventTile of audio player (high contrast)");
    });

-    test("should be correctly rendered - dark theme", async ({ page, app }) => {
+    test("should be correctly rendered - dark theme", { tag: "@screenshot" }, async ({ page, app }) => {
        // Enable dark theme
        await app.settings.setValue("theme", null, SettingLevel.ACCOUNT, "dark");

@ -207,93 +211,101 @@ test.describe("Audio player", () => {
        expect(download.suggestedFilename()).toBe("1sec.ogg");
    });

-    test("should support replying to audio file with another audio file", async ({ page, app }) => {
-        await uploadFile(page, "playwright/sample-files/1sec.ogg");
+    test(
+        "should support replying to audio file with another audio file",
+        { tag: "@screenshot" },
+        async ({ page, app }) => {
+            await uploadFile(page, "playwright/sample-files/1sec.ogg");

-        // Assert the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+            // Assert the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();

-        // Find and click "Reply" button on MessageActionBar
-        const tile = page.locator(".mx_EventTile_last");
-        await tile.hover();
-        await tile.getByRole("button", { name: "Reply", exact: true }).click();
-
-        // Reply to the player with another audio file
-        await uploadFile(page, "playwright/sample-files/1sec.ogg");
-
-        // Assert that the audio player is rendered
-        await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
-
-        // Assert that replied audio file is rendered as file button inside ReplyChain
-        const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
-        // Assert that the file button has file name
-        await expect(button.locator(".mx_MFileBody_info_filename")).toBeVisible();
-
-        await takeSnapshots(page, app, "Selected EventTile of audio player with a reply");
-    });
-
-    test("should support creating a reply chain with multiple audio files", async ({ page, app, user }) => {
-        // Note: "mx_ReplyChain" element is used not only for replies which
-        // create a reply chain, but also for a single reply without a replied
-        // message. This test checks whether a reply chain which consists of
-        // multiple audio file replies is rendered properly.
-
-        const tile = page.locator(".mx_EventTile_last");
-
-        // Find and click "Reply" button
-        const clickButtonReply = async () => {
-            await tile.scrollIntoViewIfNeeded();
+            // Find and click "Reply" button on MessageActionBar
+            const tile = page.locator(".mx_EventTile_last");
            await tile.hover();
            await tile.getByRole("button", { name: "Reply", exact: true }).click();
-        };

-        await uploadFile(page, "playwright/sample-files/upload-first.ogg");
+            // Reply to the player with another audio file
+            await uploadFile(page, "playwright/sample-files/1sec.ogg");

-        // Assert that the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+            // Assert that the audio player is rendered
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();

-        await clickButtonReply();
+            // Assert that replied audio file is rendered as file button inside ReplyChain
+            const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
+            // Assert that the file button has file name
+            await expect(button.locator(".mx_MFileBody_info_filename")).toBeVisible();

-        // Reply to the player with another audio file
-        await uploadFile(page, "playwright/sample-files/upload-second.ogg");
+            await takeSnapshots(page, app, "Selected EventTile of audio player with a reply");
+        },
+    );

-        // Assert that the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+    test(
+        "should support creating a reply chain with multiple audio files",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            // Note: "mx_ReplyChain" element is used not only for replies which
+            // create a reply chain, but also for a single reply without a replied
+            // message. This test checks whether a reply chain which consists of
+            // multiple audio file replies is rendered properly.

-        await clickButtonReply();
+            const tile = page.locator(".mx_EventTile_last");

-        // Reply to the player with yet another audio file to create a reply chain
-        await uploadFile(page, "playwright/sample-files/upload-third.ogg");
+            // Find and click "Reply" button
+            const clickButtonReply = async () => {
+                await tile.scrollIntoViewIfNeeded();
+                await tile.hover();
+                await tile.getByRole("button", { name: "Reply", exact: true }).click();
+            };

-        // Assert that the audio player is rendered
-        await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
+            await uploadFile(page, "playwright/sample-files/upload-first.ogg");

-        // Assert that there are two "mx_ReplyChain" elements
-        await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
+            // Assert that the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();

-        // Assert that one line contains the user name
-        await expect(tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName)).toBeVisible();
+            await clickButtonReply();

-        // Assert that the other line contains the file button
-        await expect(tile.locator(".mx_ReplyChain .mx_MFileBody")).toBeVisible();
+            // Reply to the player with another audio file
+            await uploadFile(page, "playwright/sample-files/upload-second.ogg");

-        // Click "In reply to"
-        await tile.locator(".mx_ReplyChain .mx_ReplyChain_show", { hasText: "In reply to" }).click();
+            // Assert that the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();

-        const replyChain = tile.locator(".mx_ReplyChain:first-of-type");
-        // Assert that "In reply to" has disappeared
-        await expect(replyChain.getByText("In reply to")).not.toBeVisible();
+            await clickButtonReply();

-        // Assert that the file button contains the name of the file sent at first
-        await expect(
-            replyChain
-                .locator(".mx_MFileBody_info[role='button']")
-                .locator(".mx_MFileBody_info_filename", { hasText: "upload-first.ogg" }),
-        ).toBeVisible();
+            // Reply to the player with yet another audio file to create a reply chain
+            await uploadFile(page, "playwright/sample-files/upload-third.ogg");

-        // Take snapshots
-        await takeSnapshots(page, app, "Selected EventTile of audio player with a reply chain");
-    });
+            // Assert that the audio player is rendered
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
+
+            // Assert that there are two "mx_ReplyChain" elements
+            await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
+
+            // Assert that one line contains the user name
+            await expect(tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName)).toBeVisible();
+
+            // Assert that the other line contains the file button
+            await expect(tile.locator(".mx_ReplyChain .mx_MFileBody")).toBeVisible();
+
+            // Click "In reply to"
+            await tile.locator(".mx_ReplyChain .mx_ReplyChain_show", { hasText: "In reply to" }).click();
+
+            const replyChain = tile.locator(".mx_ReplyChain:first-of-type");
+            // Assert that "In reply to" has disappeared
+            await expect(replyChain.getByText("In reply to")).not.toBeVisible();
+
+            // Assert that the file button contains the name of the file sent at first
+            await expect(
+                replyChain
+                    .locator(".mx_MFileBody_info[role='button']")
+                    .locator(".mx_MFileBody_info_filename", { hasText: "upload-first.ogg" }),
+            ).toBeVisible();
+
+            // Take snapshots
+            await takeSnapshots(page, app, "Selected EventTile of audio player with a reply chain");
+        },
+    );

    test("should be rendered, play, and support replying on a thread", async ({ page, app }) => {
        await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
--- a/playwright/e2e/chat-export/html-export.spec.ts
+++ b/playwright/e2e/chat-export/html-export.spec.ts
@ -89,43 +89,47 @@ test.describe("HTML Export", () => {
        },
    });

-    test("should export html successfully and match screenshot", 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.
-        page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+    test(
+        "should export html successfully and match screenshot",
+        { tag: "@screenshot" },
+        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.
+            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++) {
-            const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
-            if (i == 1) {
-                await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+            // Send a bunch of messages to populate the room
+            for (let i = 1; i < 10; i++) {
+                const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
+                if (i == 1) {
+                    await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+                }
            }
-        }

-        // Wait for all the messages to be displayed
-        await expect(
-            page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
-        ).toBeVisible();
+            // Wait for all the messages to be displayed
+            await expect(
+                page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
+            ).toBeVisible();

-        await app.toggleRoomInfoPanel();
-        await page.getByRole("menuitem", { name: "Export Chat" }).click();
+            await app.toggleRoomInfoPanel();
+            await page.getByRole("menuitem", { name: "Export Chat" }).click();

-        const downloadPromise = page.waitForEvent("download");
-        await page.getByRole("button", { name: "Export", exact: true }).click();
-        const download = await downloadPromise;
+            const downloadPromise = page.waitForEvent("download");
+            await page.getByRole("button", { name: "Export", exact: true }).click();
+            const download = await downloadPromise;

-        const dirPath = path.join(os.tmpdir(), "html-export-test");
-        const zipPath = `${dirPath}.zip`;
-        await download.saveAs(zipPath);
+            const dirPath = path.join(os.tmpdir(), "html-export-test");
+            const zipPath = `${dirPath}.zip`;
+            await download.saveAs(zipPath);

-        const zip = await extractZipFileToPath(zipPath, dirPath);
-        await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
-        await expect(page).toMatchScreenshot("html-export.png", {
-            mask: [
-                // We need to mask the whole thing because the width of the time part changes
-                page.locator(".mx_TimelineSeparator"),
-                page.locator(".mx_MessageTimestamp"),
-            ],
-        });
-    });
+            const zip = await extractZipFileToPath(zipPath, dirPath);
+            await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
+            await expect(page).toMatchScreenshot("html-export.png", {
+                mask: [
+                    // We need to mask the whole thing because the width of the time part changes
+                    page.locator(".mx_TimelineSeparator"),
+                    page.locator(".mx_MessageTimestamp"),
+                ],
+            });
+        },
+    );
 });
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@ -204,30 +204,29 @@ test.describe("Cryptography", function () {
        await expect(page.locator(".mx_Dialog")).toHaveCount(1);
    });

-    test("creating a DM should work, being e2e-encrypted / user verification", async ({
-        page,
-        app,
-        bot: bob,
-        user: aliceCredentials,
-    }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
-        await startDMWithBob(page, bob);
-        // send first message
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
-        await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
-        await checkDMRoom(page);
-        const bobRoomId = await bobJoin(page, bob);
-        await testMessages(page, bob, bobRoomId);
-        await verify(app, bob);
+    test(
+        "creating a DM should work, being e2e-encrypted / user verification",
+        { tag: "@screenshot" },
+        async ({ page, app, bot: bob, user: aliceCredentials }) => {
+            await app.client.bootstrapCrossSigning(aliceCredentials);
+            await startDMWithBob(page, bob);
+            // send first message
+            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
+            await checkDMRoom(page);
+            const bobRoomId = await bobJoin(page, bob);
+            await testMessages(page, bob, bobRoomId);
+            await verify(app, bob);

-        // Assert that verified icon is rendered
-        await page.getByTestId("base-card-back-button").click();
-        await page.getByLabel("Room info").nth(1).click();
-        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");
+            // Assert that verified icon is rendered
+            await page.getByTestId("base-card-back-button").click();
+            await page.getByLabel("Room info").nth(1).click();
+            await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");

-        // Take a snapshot of RoomSummaryCard with a verified E2EE icon
-        await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
-    });
+            // Take a snapshot of RoomSummaryCard with a verified E2EE icon
+            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
+        },
+    );

    test("should allow verification when there is no existing DM", async ({
        page,
--- a/playwright/e2e/crypto/device-verification.spec.ts
+++ b/playwright/e2e/crypto/device-verification.spec.ts
@ -102,7 +102,7 @@ test.describe("Device verification", () => {
        // feed the QR code into the verification request.
        const qrData = await readQrCode(infoDialog);
        const verifier = await verificationRequest.evaluateHandle(
-            (request, qrData) => request.scanQRCode(new Uint8Array(qrData)),
+            (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
            [...qrData],
        );

--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

+import { Locator } from "@playwright/test";
+
 import { expect, test } from "../../element-web-test";
 import {
    autoJoin,
@ -17,6 +19,7 @@ import {
    verify,
 } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
+import { ElementAppPage } from "../../pages/ElementAppPage.ts";

 test.describe("Cryptography", function () {
    test.use({
@ -277,6 +280,15 @@ test.describe("Cryptography", function () {
            bot: bob,
            homeserver,
        }) => {
+            // Workaround for https://github.com/element-hq/element-web/issues/28640:
+            // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
+            // his user info.
+            await app.toggleRoomInfoPanel();
+            const rightPanel = page.locator(".mx_RightPanel");
+            await rightPanel.getByRole("menuitem", { name: "People" }).click();
+            await rightPanel.getByRole("button", { name: bob.credentials!.userId }).click();
+            await expect(rightPanel.locator(".mx_UserInfo_devices")).toContainText("1 session");
+
            // Our app is blocked from syncing while Bob sends his messages.
            await app.client.network.goOffline();

@ -306,7 +318,7 @@ test.describe("Cryptography", function () {
            );

            const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
-            await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
+            await assertNoE2EIcon(penultimate, app);
        });

        test("should show correct shields on events sent by users with changed identity", async ({
@ -335,3 +347,21 @@ test.describe("Cryptography", function () {
        });
    });
 });
+
+/**
+ * Check that the given message doesn't have an E2E warning icon.
+ *
+ * If it does, throw an error.
+ */
+async function assertNoE2EIcon(messageLocator: Locator, app: ElementAppPage) {
+    // Make sure the message itself exists, before we check if it has any icons
+    await messageLocator.waitFor();
+
+    const e2eIcon = messageLocator.locator(".mx_EventTile_e2eIcon");
+    if ((await e2eIcon.count()) > 0) {
+        // uh-oh, there is an e2e icon. Let's find out what it's about so that we can throw a helpful error.
+        await e2eIcon.focus();
+        const tooltip = await app.getTooltipForElement(e2eIcon);
+        throw new Error(`Found an unexpected e2eIcon with tooltip '${await tooltip.textContent()}'`);
+    }
+}
--- a/playwright/e2e/crypto/user-verification.spec.ts
+++ b/playwright/e2e/crypto/user-verification.spec.ts
@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";

+import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { doTwoWaySasVerification, awaitVerifier } from "./utils";
 import { Client } from "../../pages/client";
@ -38,6 +39,8 @@ test.describe("User verification", () => {
        toasts,
        room: { roomId: dmRoomId },
    }) => {
+        await waitForDeviceKeys(page);
+
        // once Alice has joined, Bob starts the verification
        const bobVerificationRequest = await bob.evaluateHandle(
            async (client, { dmRoomId, aliceCredentials }) => {
@ -87,6 +90,8 @@ test.describe("User verification", () => {
        toasts,
        room: { roomId: dmRoomId },
    }) => {
+        await waitForDeviceKeys(page);
+
        // once Alice has joined, Bob starts the verification
        const bobVerificationRequest = await bob.evaluateHandle(
            async (client, { dmRoomId, aliceCredentials }) => {
@ -149,3 +154,15 @@ async function createDMRoom(client: Client, userId: string): Promise<string> {
        ],
    });
 }
+
+/**
+ * Wait until we get the other user's device keys.
+ * In newer rust-crypto versions, the verification request will be ignored if we
+ * don't have the sender's device keys.
+ */
+async function waitForDeviceKeys(page: Page): Promise<void> {
+    await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+    const avatar = await page.getByRole("button", { name: "Avatar" });
+    await avatar.click();
+    await expect(page.getByText("1 session")).toBeVisible();
+}
--- a/playwright/e2e/editing/editing.spec.ts
+++ b/playwright/e2e/editing/editing.spec.ts
@ -66,126 +66,130 @@ test.describe("Editing", () => {
        botCreateOpts: { displayName: "Bob" },
    });

-    test("should render and interact with the message edit history dialog", async ({ page, user, app, room }) => {
-        // Click the "Remove" button on the message edit history dialog
-        const clickButtonRemove = async (locator: Locator) => {
-            const eventTileLine = locator.locator(".mx_EventTile_line");
-            await eventTileLine.hover();
-            await eventTileLine.getByRole("button", { name: "Remove" }).click();
-        };
+    test(
+        "should render and interact with the message edit history dialog",
+        { tag: "@screenshot" },
+        async ({ page, user, app, room }) => {
+            // Click the "Remove" button on the message edit history dialog
+            const clickButtonRemove = async (locator: Locator) => {
+                const eventTileLine = locator.locator(".mx_EventTile_line");
+                await eventTileLine.hover();
+                await eventTileLine.getByRole("button", { name: "Remove" }).click();
+            };

-        await page.goto(`#/room/${room.roomId}`);
+            await page.goto(`#/room/${room.roomId}`);

-        // Send "Message"
-        await sendEvent(app, room.roomId);
+            // Send "Message"
+            await sendEvent(app, room.roomId);

-        // Edit "Message" to "Massage"
-        await editLastMessage(page, "Massage");
+            // Edit "Message" to "Massage"
+            await editLastMessage(page, "Massage");

-        // Assert that the edit label is visible
-        await expect(page.locator(".mx_EventTile_edited")).toBeVisible();
+            // Assert that the edit label is visible
+            await expect(page.locator(".mx_EventTile_edited")).toBeVisible();

-        await clickEditedMessage(page, "Massage");
+            await clickEditedMessage(page, "Massage");

-        // Assert that the message edit history dialog is rendered
-        const dialog = page.getByRole("dialog");
-        const li = dialog.getByRole("listitem").last();
-        // Assert CSS styles which are difficult or cannot be detected with snapshots are applied as expected
-        await expect(li).toHaveCSS("clear", "both");
+            // Assert that the message edit history dialog is rendered
+            const dialog = page.getByRole("dialog");
+            const li = dialog.getByRole("listitem").last();
+            // Assert CSS styles which are difficult or cannot be detected with snapshots are applied as expected
+            await expect(li).toHaveCSS("clear", "both");

-        const timestamp = li.locator(".mx_EventTile .mx_MessageTimestamp");
-        await expect(timestamp).toHaveCSS("position", "absolute");
-        await expect(timestamp).toHaveCSS("inset-inline-start", "0px");
-        await expect(timestamp).toHaveCSS("text-align", "center");
+            const timestamp = li.locator(".mx_EventTile .mx_MessageTimestamp");
+            await expect(timestamp).toHaveCSS("position", "absolute");
+            await expect(timestamp).toHaveCSS("inset-inline-start", "0px");
+            await expect(timestamp).toHaveCSS("text-align", "center");

-        // Assert that monospace characters can fill the content line as expected
-        await expect(li.locator(".mx_EventTile .mx_EventTile_content")).toHaveCSS("margin-inline-end", "0px");
+            // Assert that monospace characters can fill the content line as expected
+            await expect(li.locator(".mx_EventTile .mx_EventTile_content")).toHaveCSS("margin-inline-end", "0px");

-        // Assert that zero block start padding is applied to mx_EventTile as expected
-        // See: .mx_EventTile on _EventTile.pcss
-        await expect(li.locator(".mx_EventTile")).toHaveCSS("padding-block-start", "0px");
+            // Assert that zero block start padding is applied to mx_EventTile as expected
+            // See: .mx_EventTile on _EventTile.pcss
+            await expect(li.locator(".mx_EventTile")).toHaveCSS("padding-block-start", "0px");

-        // Assert that the date separator is rendered at the top
-        await expect(dialog.getByRole("listitem").first().locator("h2", { hasText: "today" })).toHaveCSS(
-            "text-transform",
-            "capitalize",
-        );
+            // Assert that the date separator is rendered at the top
+            await expect(dialog.getByRole("listitem").first().locator("h2", { hasText: "today" })).toHaveCSS(
+                "text-transform",
+                "capitalize",
+            );

-        {
-            // Assert that the edited message is rendered under the date separator
-            const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
-            // Assert that the edited message body consists of both deleted character and inserted character
-            // Above the first "e" of "Message" was replaced with "a"
-            await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");
+            {
+                // Assert that the edited message is rendered under the date separator
+                const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
+                // Assert that the edited message body consists of both deleted character and inserted character
+                // Above the first "e" of "Message" was replaced with "a"
+                await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");

-            const body = tile.locator(".mx_EventTile_content .mx_EventTile_body");
-            await expect(body.locator(".mx_EditHistoryMessage_deletion").getByText("e")).toBeVisible();
-            await expect(body.locator(".mx_EditHistoryMessage_insertion").getByText("a")).toBeVisible();
-        }
+                const body = tile.locator(".mx_EventTile_content .mx_EventTile_body");
+                await expect(body.locator(".mx_EditHistoryMessage_deletion").getByText("e")).toBeVisible();
+                await expect(body.locator(".mx_EditHistoryMessage_insertion").getByText("a")).toBeVisible();
+            }

-        // Assert that the original message is rendered at the bottom
-        await expect(
-            dialog
-                .locator("li:nth-child(3) .mx_EventTile")
-                .locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Message" }),
-        ).toBeVisible();
+            // Assert that the original message is rendered at the bottom
+            await expect(
+                dialog
+                    .locator("li:nth-child(3) .mx_EventTile")
+                    .locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Message" }),
+            ).toBeVisible();

-        // Take a snapshot of the dialog
-        await expect(dialog).toMatchScreenshot("message-edit-history-dialog.png", {
-            mask: [page.locator(".mx_MessageTimestamp")],
-        });
+            // Take a snapshot of the dialog
+            await expect(dialog).toMatchScreenshot("message-edit-history-dialog.png", {
+                mask: [page.locator(".mx_MessageTimestamp")],
+            });

-        {
-            const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
-            await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");
-            // Click the "Remove" button again
-            await clickButtonRemove(tile);
-        }
+            {
+                const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
+                await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");
+                // Click the "Remove" button again
+                await clickButtonRemove(tile);
+            }

-        // Do nothing and close the dialog to confirm that the message edit history dialog is rendered
-        await app.closeDialog();
+            // Do nothing and close the dialog to confirm that the message edit history dialog is rendered
+            await app.closeDialog();

-        {
-            // Assert that the message edit history dialog is rendered again after it was closed
-            const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
-            await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");
-            // Click the "Remove" button again
-            await clickButtonRemove(tile);
-        }
+            {
+                // Assert that the message edit history dialog is rendered again after it was closed
+                const tile = dialog.locator("li:nth-child(2) .mx_EventTile");
+                await expect(tile.locator(".mx_EventTile_body")).toHaveText("Meassage");
+                // Click the "Remove" button again
+                await clickButtonRemove(tile);
+            }

-        // This time remove the message really
-        const textInputDialog = page.locator(".mx_TextInputDialog");
-        await textInputDialog.getByRole("textbox", { name: "Reason (optional)" }).fill("This is a test."); // Reason
-        await textInputDialog.getByRole("button", { name: "Remove" }).click();
+            // This time remove the message really
+            const textInputDialog = page.locator(".mx_TextInputDialog");
+            await textInputDialog.getByRole("textbox", { name: "Reason (optional)" }).fill("This is a test."); // Reason
+            await textInputDialog.getByRole("button", { name: "Remove" }).click();

-        // Assert that the message edit history dialog is rendered again
-        const messageEditHistoryDialog = page.locator(".mx_MessageEditHistoryDialog");
-        // Assert that the date is rendered
-        await expect(
-            messageEditHistoryDialog.getByRole("listitem").first().locator("h2", { hasText: "today" }),
-        ).toHaveCSS("text-transform", "capitalize");
+            // Assert that the message edit history dialog is rendered again
+            const messageEditHistoryDialog = page.locator(".mx_MessageEditHistoryDialog");
+            // Assert that the date is rendered
+            await expect(
+                messageEditHistoryDialog.getByRole("listitem").first().locator("h2", { hasText: "today" }),
+            ).toHaveCSS("text-transform", "capitalize");

-        // Assert that the original message is rendered under the date on the dialog
-        await expect(
-            messageEditHistoryDialog
-                .locator("li:nth-child(2) .mx_EventTile")
-                .locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Message" }),
-        ).toBeVisible();
+            // Assert that the original message is rendered under the date on the dialog
+            await expect(
+                messageEditHistoryDialog
+                    .locator("li:nth-child(2) .mx_EventTile")
+                    .locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Message" }),
+            ).toBeVisible();

-        // Assert that the edited message is gone
-        await expect(
-            messageEditHistoryDialog.locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Meassage" }),
-        ).not.toBeVisible();
+            // Assert that the edited message is gone
+            await expect(
+                messageEditHistoryDialog.locator(".mx_EventTile_content .mx_EventTile_body", { hasText: "Meassage" }),
+            ).not.toBeVisible();

-        await app.closeDialog();
+            await app.closeDialog();

-        // Assert that the redaction placeholder is rendered
-        await expect(
-            page
-                .locator(".mx_RoomView_MessageList")
-                .locator(".mx_EventTile_last .mx_RedactedBody", { hasText: "Message deleted" }),
-        ).toBeVisible();
-    });
+            // Assert that the redaction placeholder is rendered
+            await expect(
+                page
+                    .locator(".mx_RoomView_MessageList")
+                    .locator(".mx_EventTile_last .mx_RedactedBody", { hasText: "Message deleted" }),
+            ).toBeVisible();
+        },
+    );

    test("should render 'View Source' button in developer mode on the message edit history dialog", async ({
        page,
--- a/playwright/e2e/file-upload/image-upload.spec.ts
+++ b/playwright/e2e/file-upload/image-upload.spec.ts
@ -25,7 +25,7 @@ test.describe("Image Upload", () => {
        ).toBeVisible();
    });

-    test("should show image preview when uploading an image", async ({ page, app }) => {
+    test("should show image preview when uploading an image", { tag: "@screenshot" }, async ({ page, app }) => {
        await page
            .locator(".mx_MessageComposer_actions input[type='file']")
            .setInputFiles("playwright/sample-files/riot.png");
--- a/playwright/e2e/forgot-password/forgot-password.spec.ts
+++ b/playwright/e2e/forgot-password/forgot-password.spec.ts
@ -26,7 +26,7 @@ test.describe("Forgot Password", () => {
            }),
    });

-    test("renders properly", async ({ page, homeserver }) => {
+    test("renders properly", { tag: "@screenshot" }, async ({ page, homeserver }) => {
        await page.goto("/");

        await page.getByRole("link", { name: "Sign in" }).click();
@ -39,7 +39,7 @@ test.describe("Forgot Password", () => {
        await expect(page.getByRole("main")).toMatchScreenshot("forgot-password.png");
    });

-    test("renders email verification dialog properly", async ({ page, homeserver }) => {
+    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);
--- a/playwright/e2e/invite/invite-dialog.spec.ts
+++ b/playwright/e2e/invite/invite-dialog.spec.ts
@ -19,7 +19,7 @@ test.describe("Invite dialog", function () {

    const botName = "BotAlice";

-    test("should support inviting a user to a room", async ({ page, app, user, bot }) => {
+    test("should support inviting a user to a room", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
        // Create and view a room
        await app.client.createRoom({ name: "Test Room" });
        await app.viewRoomByName("Test Room");
@ -73,52 +73,63 @@ test.describe("Invite dialog", function () {
        await expect(page.getByText(`${botName} joined the room`)).toBeVisible();
    });

-    test("should support inviting a user to Direct Messages", async ({ page, app, user, bot }) => {
-        await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();
+    test(
+        "should support inviting a user to Direct Messages",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot }) => {
+            await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();

-        const other = page.locator(".mx_InviteDialog_other");
-        // Assert that the header is rendered
-        await expect(other.locator(".mx_Dialog_header .mx_Dialog_title").getByText("Direct Messages")).toBeVisible();
+            const other = page.locator(".mx_InviteDialog_other");
+            // Assert that the header is rendered
+            await expect(
+                other.locator(".mx_Dialog_header .mx_Dialog_title").getByText("Direct Messages"),
+            ).toBeVisible();

-        // Assert that the bar is rendered
-        await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();
+            // Assert that the bar is rendered
+            await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();

-        // Take a snapshot of the invite dialog
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png");
+            // Take a snapshot of the invite dialog
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png");

-        await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
+            await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);

-        await expect(other.locator(".mx_InviteDialog_tile_nameStack").getByText(bot.credentials.userId)).toBeVisible();
-        await other.locator(".mx_InviteDialog_tile_nameStack").getByText(botName).click();
+            await expect(
+                other.locator(".mx_InviteDialog_tile_nameStack").getByText(bot.credentials.userId),
+            ).toBeVisible();
+            await other.locator(".mx_InviteDialog_tile_nameStack").getByText(botName).click();

-        await expect(
-            other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
-        ).toBeVisible();
+            await expect(
+                other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
+            ).toBeVisible();

-        // Take a snapshot of the invite dialog with a user pill
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");
+            // Take a snapshot of the invite dialog with a user pill
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");

-        // Open a direct message UI
-        await other.getByRole("button", { name: "Go" }).click();
+            // Open a direct message UI
+            await other.getByRole("button", { name: "Go" }).click();

-        // Assert that the invite dialog disappears
-        await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
+            // Assert that the invite dialog disappears
+            await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();

-        // Assert that the hovered user name on invitation UI does not have background color
-        // TODO: implement the test on room-header.spec.ts
-        const roomHeader = page.locator(".mx_RoomHeader");
-        await roomHeader.locator(".mx_RoomHeader_heading").hover();
-        await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+            // Assert that the hovered user name on invitation UI does not have background color
+            // TODO: implement the test on room-header.spec.ts
+            const roomHeader = page.locator(".mx_RoomHeader");
+            await roomHeader.locator(".mx_RoomHeader_heading").hover();
+            await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS(
+                "background-color",
+                "rgba(0, 0, 0, 0)",
+            );

-        // Send a message to invite the bots
-        const composer = app.getComposer().locator("[contenteditable]");
-        await composer.fill("Hello}");
-        await composer.press("Enter");
+            // Send a message to invite the bots
+            const composer = app.getComposer().locator("[contenteditable]");
+            await composer.fill("Hello}");
+            await composer.press("Enter");

-        // Assert that they were invited and joined
-        await expect(page.getByText(`${botName} joined the room`)).toBeVisible();
+            // Assert that they were invited and joined
+            await expect(page.getByText(`${botName} joined the room`)).toBeVisible();

-        // Assert that the message is displayed at the bottom
-        await expect(page.locator(".mx_EventTile_last").getByText("Hello")).toBeVisible();
-    });
+            // Assert that the message is displayed at the bottom
+            await expect(page.locator(".mx_EventTile_last").getByText("Hello")).toBeVisible();
+        },
+    );
 });
--- a/playwright/e2e/messages/messages.spec.ts
+++ b/playwright/e2e/messages/messages.spec.ts
@ -63,7 +63,7 @@ test.describe("Message rendering", () => {
        { direction: "ltr", displayName: "Quentin" },
        { direction: "rtl", displayName: "كوينتين" },
    ].forEach(({ direction, displayName }) => {
-        test.describe(`with ${direction} display name`, () => {
+        test.describe(`with ${direction} display name`, { tag: "@screenshot" }, () => {
            test.use({
                displayName,
                room: async ({ user, app }, use) => {
@ -72,14 +72,18 @@ test.describe("Message rendering", () => {
                },
            });

-            test("should render a basic LTR text message", async ({ page, user, app, room }) => {
-                await page.goto(`#/room/${room.roomId}`);
+            test(
+                "should render a basic LTR text message",
+                { tag: "@screenshot" },
+                async ({ page, user, app, room }) => {
+                    await page.goto(`#/room/${room.roomId}`);

-                const msgTile = await sendMessage(page, "Hello, world!");
-                await expect(msgTile).toMatchScreenshot(`basic-message-ltr-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
-            });
+                    const msgTile = await sendMessage(page, "Hello, world!");
+                    await expect(msgTile).toMatchScreenshot(`basic-message-ltr-${direction}displayname.png`, {
+                        mask: [page.locator(".mx_MessageTimestamp")],
+                    });
+                },
+            );

            test("should render an LTR emote", async ({ page, user, app, room }) => {
                await page.goto(`#/room/${room.roomId}`);
--- a/playwright/e2e/permalinks/permalinks.spec.ts
+++ b/playwright/e2e/permalinks/permalinks.spec.ts
@ -24,7 +24,7 @@ test.describe("permalinks", () => {
        displayName: "Alice",
    });

-    test("shoud render permalinks as expected", async ({ page, app, user, homeserver }) => {
+    test("shoud render permalinks as expected", { tag: "@screenshot" }, async ({ page, app, user, homeserver }) => {
        const bob = new Bot(page, homeserver, { displayName: "Bob" });
        const charlotte = new Bot(page, homeserver, { displayName: "Charlotte" });
        await bob.prepareClient();
--- a/playwright/e2e/pinned-messages/index.ts
+++ b/playwright/e2e/pinned-messages/index.ts
@ -129,6 +129,7 @@ export class Helpers {
        const timelineMessage = this.page.locator(".mx_MTextBody", { hasText: message });
        await timelineMessage.click({ button: "right" });
        await this.page.getByRole("menuitem", { name: "Pin", exact: true }).click();
+        await this.assertMessageInBanner(message);
    }

    /**
--- a/playwright/e2e/pinned-messages/pinned-messages.spec.ts
+++ b/playwright/e2e/pinned-messages/pinned-messages.spec.ts
@ -10,35 +10,38 @@ import { test } from "./index";
 import { expect } from "../../element-web-test";

 test.describe("Pinned messages", () => {
-    test("should show the empty state when there are no pinned messages", async ({ page, app, room1, util }) => {
-        await util.goTo(room1);
-        await util.openRoomInfo();
-        await util.assertPinnedCountInRoomInfo(0);
-        await util.openPinnedMessagesList();
-        await util.assertEmptyPinnedMessagesList();
-    });
+    test(
+        "should show the empty state when there are no pinned messages",
+        { tag: "@screenshot" },
+        async ({ page, app, room1, util }) => {
+            await util.goTo(room1);
+            await util.openRoomInfo();
+            await util.assertPinnedCountInRoomInfo(0);
+            await util.openPinnedMessagesList();
+            await util.assertEmptyPinnedMessagesList();
+        },
+    );

-    test("should pin one message and to have the pinned message badge in the timeline", async ({
-        page,
-        app,
-        room1,
-        util,
-    }) => {
-        await util.goTo(room1);
-        await util.receiveMessages(room1, ["Msg1"]);
-        await util.pinMessages(["Msg1"]);
+    test(
+        "should pin one message and to have the pinned message badge in the timeline",
+        { tag: "@screenshot" },
+        async ({ page, app, room1, util }) => {
+            await util.goTo(room1);
+            await util.receiveMessages(room1, ["Msg1"]);
+            await util.pinMessages(["Msg1"]);

-        const tile = util.getEventTile("Msg1");
-        await expect(tile).toMatchScreenshot("pinned-message-Msg1.png", {
-            mask: [tile.locator(".mx_MessageTimestamp")],
-            // Hide the jump to bottom button in the timeline to avoid flakiness
-            css: `
+            const tile = util.getEventTile("Msg1");
+            await expect(tile).toMatchScreenshot("pinned-message-Msg1.png", {
+                mask: [tile.locator(".mx_MessageTimestamp")],
+                // Hide the jump to bottom button in the timeline to avoid flakiness
+                css: `
                .mx_JumpToBottomButton {
                    display: none !important;
                }
            `,
-        });
-    });
+            });
+        },
+    );

    test("should pin messages and show them in the room info panel", async ({ page, app, room1, util }) => {
        await util.goTo(room1);
@ -73,7 +76,7 @@ test.describe("Pinned messages", () => {
        await util.assertPinnedCountInRoomInfo(2);
    });

-    test("should unpin all messages", async ({ page, app, room1, util }) => {
+    test("should unpin all messages", { tag: "@screenshot" }, async ({ page, app, room1, util }) => {
        await util.goTo(room1);
        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
        await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
@ -98,7 +101,7 @@ test.describe("Pinned messages", () => {
        await util.assertPinnedCountInRoomInfo(0);
    });

-    test("should display one message in the banner", async ({ page, app, room1, util }) => {
+    test("should display one message in the banner", { tag: "@screenshot" }, async ({ page, app, room1, util }) => {
        await util.goTo(room1);
        await util.receiveMessages(room1, ["Msg1"]);
        await util.pinMessages(["Msg1"]);
@ -106,7 +109,7 @@ test.describe("Pinned messages", () => {
        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-1-Msg1.png");
    });

-    test("should display 2 messages in the banner", async ({ page, app, room1, util }) => {
+    test("should display 2 messages in the banner", { tag: "@screenshot" }, async ({ page, app, room1, util }) => {
        await util.goTo(room1);
        await util.receiveMessages(room1, ["Msg1", "Msg2"]);
        await util.pinMessages(["Msg1", "Msg2"]);
@ -123,7 +126,7 @@ test.describe("Pinned messages", () => {
        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
    });

-    test("should display 4 messages in the banner", async ({ page, app, room1, util }) => {
+    test("should display 4 messages in the banner", { tag: "@screenshot" }, async ({ page, app, room1, util }) => {
        await util.goTo(room1);
        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
        await util.pinMessages(["Msg1", "Msg2", "Msg3", "Msg4"]);
--- a/playwright/e2e/polls/polls.spec.ts
+++ b/playwright/e2e/polls/polls.spec.ts
@ -93,7 +93,7 @@ test.describe("Polls", () => {
        });
    });

-    test("should be creatable and votable", async ({ page, app, bot, user }) => {
+    test("should be creatable and votable", { tag: "@screenshot" }, async ({ page, app, bot, user }) => {
        const roomId: string = await app.client.createRoom({});
        await app.client.inviteUser(roomId, bot.credentials.userId);
        await page.goto("/#/room/" + roomId);
@ -219,107 +219,121 @@ test.describe("Polls", () => {
        await expect(page.locator(".mx_ErrorDialog")).toBeAttached();
    });

-    test("should be displayed correctly in thread panel", async ({ page, app, user, bot, homeserver }) => {
-        const botCharlie = new Bot(page, homeserver, { displayName: "BotCharlie" });
-        await botCharlie.prepareClient();
+    test(
+        "should be displayed correctly in thread panel",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot, homeserver }) => {
+            const botCharlie = new Bot(page, homeserver, { displayName: "BotCharlie" });
+            await botCharlie.prepareClient();

-        const roomId: string = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
-        await app.client.inviteUser(roomId, botCharlie.credentials.userId);
-        await page.goto("/#/room/" + roomId);
+            const roomId: string = await app.client.createRoom({});
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, botCharlie.credentials.userId);
+            await page.goto("/#/room/" + roomId);

-        // wait until the bots joined
-        await expect(page.getByText("BotBob and one other were invited and joined")).toBeAttached({ timeout: 10000 });
+            // wait until the bots joined
+            await expect(page.getByText("BotBob and one other were invited and joined")).toBeAttached({
+                timeout: 10000,
+            });

-        const locator = await app.openMessageComposerOptions();
-        await locator.getByRole("menuitem", { name: "Poll" }).click();
+            const locator = await app.openMessageComposerOptions();
+            await locator.getByRole("menuitem", { name: "Poll" }).click();

-        const pollParams = {
-            title: "Does the polls feature work?",
-            options: ["Yes", "No", "Maybe"],
-        };
-        await createPoll(page, pollParams);
+            const pollParams = {
+                title: "Does the polls feature work?",
+                options: ["Yes", "No", "Maybe"],
+            };
+            await createPoll(page, pollParams);

-        // Wait for message to send, get its ID and save as @pollId
-        const pollId = await page
-            .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
-            .filter({ hasText: pollParams.title })
-            .getAttribute("data-scroll-tokens");
+            // Wait for message to send, get its ID and save as @pollId
+            const pollId = await page
+                .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
+                .filter({ hasText: pollParams.title })
+                .getAttribute("data-scroll-tokens");

-        // Bob starts thread on the poll
-        await bot.sendMessage(
-            roomId,
-            {
-                body: "Hello there",
-                msgtype: "m.text",
-            },
-            pollId,
-        );
+            // Bob starts thread on the poll
+            await bot.sendMessage(
+                roomId,
+                {
+                    body: "Hello there",
+                    msgtype: "m.text",
+                },
+                pollId,
+            );

-        // open the thread summary
-        await page.getByRole("button", { name: "Open thread" }).click();
+            // open the thread summary
+            await page.getByRole("button", { name: "Open thread" }).click();

-        // Bob votes 'Maybe' in the poll
-        await botVoteForOption(page, bot, roomId, pollId, pollParams.options[2]);
+            // Bob votes 'Maybe' in the poll
+            await botVoteForOption(page, bot, roomId, pollId, pollParams.options[2]);

-        // Charlie votes 'No'
-        await botVoteForOption(page, botCharlie, roomId, pollId, pollParams.options[1]);
+            // Charlie votes 'No'
+            await botVoteForOption(page, botCharlie, roomId, pollId, pollParams.options[1]);

-        // no votes shown until I vote, check votes have arrived in main tl
-        await expect(
-            page
-                .locator(".mx_RoomView_body .mx_MPollBody_totalVotes")
-                .getByText("2 votes cast. Vote to see the results"),
-        ).toBeAttached();
+            // no votes shown until I vote, check votes have arrived in main tl
+            await expect(
+                page
+                    .locator(".mx_RoomView_body .mx_MPollBody_totalVotes")
+                    .getByText("2 votes cast. Vote to see the results"),
+            ).toBeAttached();

-        // and thread view
-        await expect(
-            page.locator(".mx_ThreadView .mx_MPollBody_totalVotes").getByText("2 votes cast. Vote to see the results"),
-        ).toBeAttached();
+            // and thread view
+            await expect(
+                page
+                    .locator(".mx_ThreadView .mx_MPollBody_totalVotes")
+                    .getByText("2 votes cast. Vote to see the results"),
+            ).toBeAttached();

-        // Take snapshots of poll on ThreadView
-        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
-        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']").first()).toBeVisible();
-        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("ThreadView_with_a_poll_on_bubble_layout.png", {
-            mask: [page.locator(".mx_MessageTimestamp")],
-        });
+            // Take snapshots of poll on ThreadView
+            await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
+            await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']").first()).toBeVisible();
+            await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
+                "ThreadView_with_a_poll_on_bubble_layout.png",
+                {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                },
+            );

-        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
-        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='group']").first()).toBeVisible();
+            await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
+            await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='group']").first()).toBeVisible();

-        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("ThreadView_with_a_poll_on_group_layout.png", {
-            mask: [page.locator(".mx_MessageTimestamp")],
-        });
+            await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
+                "ThreadView_with_a_poll_on_group_layout.png",
+                {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                },
+            );

-        const roomViewLocator = page.locator(".mx_RoomView_body");
-        // vote 'Maybe' in the main timeline poll
-        await getPollOption(page, pollId, pollParams.options[2], roomViewLocator).click();
-        // both me and bob have voted Maybe
-        await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 2, roomViewLocator);
+            const roomViewLocator = page.locator(".mx_RoomView_body");
+            // vote 'Maybe' in the main timeline poll
+            await getPollOption(page, pollId, pollParams.options[2], roomViewLocator).click();
+            // both me and bob have voted Maybe
+            await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 2, roomViewLocator);

-        const threadViewLocator = page.locator(".mx_ThreadView");
-        // votes updated in thread view too
-        await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 2, threadViewLocator);
-        // change my vote to 'Yes'
-        await getPollOption(page, pollId, pollParams.options[0], threadViewLocator).click();
+            const threadViewLocator = page.locator(".mx_ThreadView");
+            // votes updated in thread view too
+            await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 2, threadViewLocator);
+            // change my vote to 'Yes'
+            await getPollOption(page, pollId, pollParams.options[0], threadViewLocator).click();

-        // Bob updates vote to 'No'
-        await botVoteForOption(page, bot, roomId, pollId, pollParams.options[1]);
+            // Bob updates vote to 'No'
+            await botVoteForOption(page, bot, roomId, pollId, pollParams.options[1]);

-        // me: yes, bob: no, charlie: no
-        const expectVoteCounts = async (optLocator: Locator) => {
-            // I voted yes
-            await expectPollOptionVoteCount(page, pollId, pollParams.options[0], 1, optLocator);
-            // Bob and Charlie voted no
-            await expectPollOptionVoteCount(page, pollId, pollParams.options[1], 2, optLocator);
-            // 0 for maybe
-            await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 0, optLocator);
-        };
+            // me: yes, bob: no, charlie: no
+            const expectVoteCounts = async (optLocator: Locator) => {
+                // I voted yes
+                await expectPollOptionVoteCount(page, pollId, pollParams.options[0], 1, optLocator);
+                // Bob and Charlie voted no
+                await expectPollOptionVoteCount(page, pollId, pollParams.options[1], 2, optLocator);
+                // 0 for maybe
+                await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 0, optLocator);
+            };

-        // check counts are correct in main timeline tile
-        await expectVoteCounts(page.locator(".mx_RoomView_body"));
+            // check counts are correct in main timeline tile
+            await expectVoteCounts(page.locator(".mx_RoomView_body"));

-        // and in thread view tile
-        await expectVoteCounts(page.locator(".mx_ThreadView"));
-    });
+            // and in thread view tile
+            await expectVoteCounts(page.locator(".mx_ThreadView"));
+        },
+    );
 });
--- a/playwright/e2e/read-receipts/editing-messages-in-threads.spec.ts
+++ b/playwright/e2e/read-receipts/editing-messages-in-threads.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("editing messages", () => {
        test.describe("in threads", () => {
            test("An edit of a threaded message makes the room unread", async ({
--- a/playwright/e2e/read-receipts/editing-messages-main-timeline.spec.ts
+++ b/playwright/e2e/read-receipts/editing-messages-main-timeline.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("editing messages", () => {
        test.describe("in the main timeline", () => {
            test("Editing a message leaves a room read", async ({ roomAlpha: room1, roomBeta: room2, util, msg }) => {
--- a/playwright/e2e/read-receipts/editing-messages-thread-roots.spec.ts
+++ b/playwright/e2e/read-receipts/editing-messages-thread-roots.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("editing messages", () => {
        test.describe("thread roots", () => {
            test("An edit of a thread root leaves the room read", async ({
--- a/playwright/e2e/read-receipts/high-level.spec.ts
+++ b/playwright/e2e/read-receipts/high-level.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { customEvent, many, test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("Ignored events", () => {
        test("If all events after receipt are unimportant, the room is read", async ({
            roomAlpha: room1,
--- a/playwright/e2e/read-receipts/message-ordering.spec.ts
+++ b/playwright/e2e/read-receipts/message-ordering.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("Message ordering", () => {
        test.describe("in the main timeline", () => {
            test.fixme(
--- a/playwright/e2e/read-receipts/missing-referents.spec.ts
+++ b/playwright/e2e/read-receipts/missing-referents.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("messages with missing referents", () => {
        test.fixme(
            "A message in an unknown thread is not visible and the room is read",
--- a/playwright/e2e/read-receipts/new-messages-in-threads.spec.ts
+++ b/playwright/e2e/read-receipts/new-messages-in-threads.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { many, test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("new messages", () => {
        test.describe("in threads", () => {
            test("Receiving a message makes a room unread", async ({
--- a/playwright/e2e/read-receipts/new-messages-main-timeline.spec.ts
+++ b/playwright/e2e/read-receipts/new-messages-main-timeline.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { many, test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("new messages", () => {
        test.describe("in the main timeline", () => {
            test("Receiving a message makes a room unread", async ({
--- a/playwright/e2e/read-receipts/new-messages-thread-roots.spec.ts
+++ b/playwright/e2e/read-receipts/new-messages-thread-roots.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { many, test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("new messages", () => {
        test.describe("thread roots", () => {
            test("Reading a thread root does not mark the thread as read", async ({
--- a/playwright/e2e/read-receipts/notifications.spec.ts
+++ b/playwright/e2e/read-receipts/notifications.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("Notifications", () => {
        test.describe("in the main timeline", () => {
            test.fixme("A new message that mentions me shows a notification", () => {});
--- a/playwright/e2e/read-receipts/reactions-in-threads.spec.ts
+++ b/playwright/e2e/read-receipts/reactions-in-threads.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test, expect } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("reactions", () => {
        test.describe("in threads", () => {
            test("A reaction to a threaded message does not make the room unread", async ({
--- a/playwright/e2e/read-receipts/reactions-main-timeline.spec.ts
+++ b/playwright/e2e/read-receipts/reactions-main-timeline.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("reactions", () => {
        test.describe("in the main timeline", () => {
            test("Receiving a reaction to a message does not make a room unread", async ({
--- a/playwright/e2e/read-receipts/reactions-thread-roots.spec.ts
+++ b/playwright/e2e/read-receipts/reactions-thread-roots.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("reactions", () => {
        test.describe("thread roots", () => {
            test("A reaction to a thread root does not make the room unread", async ({
--- a/playwright/e2e/read-receipts/read-receipts.spec.ts
+++ b/playwright/e2e/read-receipts/read-receipts.spec.ts
@ -13,7 +13,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 import { Bot } from "../../pages/bot";
 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.use({
        displayName: "Mae",
        botCreateOpts: { displayName: "Other User" },
--- a/playwright/e2e/read-receipts/redactions-in-threads.spec.ts
+++ b/playwright/e2e/read-receipts/redactions-in-threads.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("redactions", () => {
        test.describe("in threads", () => {
            test("Redacting the threaded message pointed to by my receipt leaves the room read", async ({
--- a/playwright/e2e/read-receipts/redactions-main-timeline.spec.ts
+++ b/playwright/e2e/read-receipts/redactions-main-timeline.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("redactions", () => {
        test.describe("in the main timeline", () => {
            test("Redacting the message pointed to by my receipt leaves the room read", async ({
--- a/playwright/e2e/read-receipts/redactions-thread-roots.spec.ts
+++ b/playwright/e2e/read-receipts/redactions-thread-roots.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("redactions", () => {
        test.describe("thread roots", () => {
            test("Redacting a thread root after it was read leaves the room read", async ({
--- a/playwright/e2e/read-receipts/room-list-order.spec.ts
+++ b/playwright/e2e/read-receipts/room-list-order.spec.ts
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.

 import { test } from ".";

-test.describe("Read receipts", () => {
+test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("Room list order", () => {
        test("Rooms with unread messages appear at the top of room list if 'unread first' is selected", async ({
            roomAlpha: room1,
--- a/playwright/e2e/register/email.spec.ts
+++ b/playwright/e2e/register/email.spec.ts
@ -38,34 +38,33 @@ test.describe("Email Registration", async () => {
        await page.goto("/#/register");
    });

-    test("registers an account and lands on the use case selection screen", async ({
-        page,
-        mailhog,
-        request,
-        checkA11y,
-    }) => {
-        await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
-        // Hide the server text as it contains the randomly allocated Homeserver port
-        const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
+    test(
+        "registers an account and lands on the use case selection screen",
+        { tag: "@screenshot" },
+        async ({ page, mailhog, request, checkA11y }) => {
+            await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
+            // Hide the server text as it contains the randomly allocated Homeserver port
+            const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };

-        await page.getByRole("textbox", { name: "Username" }).fill("alice");
-        await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
-        await page.getByPlaceholder("Confirm password").fill("totally a great password");
-        await page.getByPlaceholder("Email").fill("alice@email.com");
-        await page.getByRole("button", { name: "Register" }).click();
+            await page.getByRole("textbox", { name: "Username" }).fill("alice");
+            await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
+            await page.getByPlaceholder("Confirm password").fill("totally a great password");
+            await page.getByPlaceholder("Email").fill("alice@email.com");
+            await page.getByRole("button", { name: "Register" }).click();

-        await expect(page.getByText("Check your email to continue")).toBeVisible();
-        await expect(page).toMatchScreenshot("registration_check_your_email.png", screenshotOptions);
-        await checkA11y();
+            await expect(page.getByText("Check your email to continue")).toBeVisible();
+            await expect(page).toMatchScreenshot("registration_check_your_email.png", screenshotOptions);
+            await checkA11y();

-        await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();
+            await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();

-        const messages = await mailhog.api.messages();
-        expect(messages.items).toHaveLength(1);
-        expect(messages.items[0].to).toEqual("alice@email.com");
-        const [emailLink] = messages.items[0].text.match(/http.+/);
-        await request.get(emailLink); // "Click" the link in the email
+            const messages = await mailhog.api.messages();
+            expect(messages.items).toHaveLength(1);
+            expect(messages.items[0].to).toEqual("alice@email.com");
+            const [emailLink] = messages.items[0].text.match(/http.+/);
+            await request.get(emailLink); // "Click" the link in the email

-        await expect(page.locator(".mx_UseCaseSelection_skip")).toBeVisible();
-    });
+            await expect(page.locator(".mx_UseCaseSelection_skip")).toBeVisible();
+        },
+    );
 });
--- a/playwright/e2e/register/register.spec.ts
+++ b/playwright/e2e/register/register.spec.ts
@ -15,66 +15,73 @@ test.describe("Registration", () => {
        await page.goto("/#/register");
    });

-    test("registers an account and lands on the home screen", async ({ homeserver, page, checkA11y, crypto }) => {
-        await page.getByRole("button", { name: "Edit", exact: true }).click();
-        await expect(page.getByRole("button", { name: "Continue", exact: true })).toBeVisible();
+    test(
+        "registers an account and lands on the home screen",
+        { tag: "@screenshot" },
+        async ({ homeserver, page, checkA11y, crypto }) => {
+            await page.getByRole("button", { name: "Edit", exact: true }).click();
+            await expect(page.getByRole("button", { name: "Continue", exact: true })).toBeVisible();

-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("server-picker.png");
-        await checkA11y();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("server-picker.png");
+            await checkA11y();

-        await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.config.baseUrl);
-        await page.getByRole("button", { name: "Continue", exact: true }).click();
-        // wait for the dialog to go away
-        await expect(page.getByRole("dialog")).not.toBeVisible();
+            await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.config.baseUrl);
+            await page.getByRole("button", { name: "Continue", exact: true }).click();
+            // wait for the dialog to go away
+            await expect(page.getByRole("dialog")).not.toBeVisible();

-        await expect(page.getByRole("textbox", { name: "Username", exact: true })).toBeVisible();
-        // Hide the server text as it contains the randomly allocated Homeserver port
-        const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")], includeDialogBackground: true };
-        await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
-        await checkA11y();
+            await expect(page.getByRole("textbox", { name: "Username", exact: true })).toBeVisible();
+            // Hide the server text as it contains the randomly allocated Homeserver port
+            const screenshotOptions = {
+                mask: [page.locator(".mx_ServerPicker_server")],
+                includeDialogBackground: true,
+            };
+            await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
+            await checkA11y();

-        await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
-        await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
-        await page.getByPlaceholder("Confirm password", { exact: true }).fill("totally a great password");
-        await page.getByRole("button", { name: "Register", exact: true }).click();
+            await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
+            await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
+            await page.getByPlaceholder("Confirm password", { exact: true }).fill("totally a great password");
+            await page.getByRole("button", { name: "Register", exact: true }).click();

-        const dialog = page.getByRole("dialog");
-        await expect(dialog).toBeVisible();
-        await expect(page).toMatchScreenshot("email-prompt.png", screenshotOptions);
-        await checkA11y();
-        await dialog.getByRole("button", { name: "Continue", exact: true }).click();
+            const dialog = page.getByRole("dialog");
+            await expect(dialog).toBeVisible();
+            await expect(page).toMatchScreenshot("email-prompt.png", screenshotOptions);
+            await checkA11y();
+            await dialog.getByRole("button", { name: "Continue", exact: true }).click();

-        await expect(page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy")).toBeVisible();
-        await expect(page).toMatchScreenshot("terms-prompt.png", screenshotOptions);
-        await checkA11y();
+            await expect(page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy")).toBeVisible();
+            await expect(page).toMatchScreenshot("terms-prompt.png", screenshotOptions);
+            await checkA11y();

-        const termsPolicy = page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy");
-        await termsPolicy.getByRole("checkbox").click(); // Click the checkbox before terms of service anchor link
-        await expect(termsPolicy.getByLabel("Privacy Policy")).toBeVisible();
+            const termsPolicy = page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy");
+            await termsPolicy.getByRole("checkbox").click(); // Click the checkbox before terms of service anchor link
+            await expect(termsPolicy.getByLabel("Privacy Policy")).toBeVisible();

-        await page.getByRole("button", { name: "Accept", exact: true }).click();
+            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.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$/);
+            await expect(page).toHaveURL(/\/#\/home$/);

-        /*
-         * Cross-signing checks
-         */
-        // check that the device considers itself verified
-        await page.getByRole("button", { name: "User menu", exact: true }).click();
-        await page.getByRole("menuitem", { name: "All settings", exact: true }).click();
-        await page.getByRole("tab", { name: "Sessions", exact: true }).click();
-        await expect(page.getByTestId("current-session-section").getByTestId("device-metadata-isVerified")).toHaveText(
-            "Verified",
-        );
+            /*
+             * Cross-signing checks
+             */
+            // check that the device considers itself verified
+            await page.getByRole("button", { name: "User menu", exact: true }).click();
+            await page.getByRole("menuitem", { name: "All settings", exact: true }).click();
+            await page.getByRole("tab", { name: "Sessions", exact: true }).click();
+            await expect(
+                page.getByTestId("current-session-section").getByTestId("device-metadata-isVerified"),
+            ).toHaveText("Verified");

-        // check that cross-signing keys have been uploaded.
-        await crypto.assertDeviceIsCrossSigned();
-    });
+            // check that cross-signing keys have been uploaded.
+            await crypto.assertDeviceIsCrossSigned();
+        },
+    );

    test("should require username to fulfil requirements and be available", async ({ homeserver, page }) => {
        await page.getByRole("button", { name: "Edit", exact: true }).click();
--- a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
+++ b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
@ -18,7 +18,7 @@ test.describe("Release announcement", () => {
        labsFlags: ["threadsActivityCentre"],
    });

-    test("should display the release announcement process", async ({ page, app, util }) => {
+    test("should display the release announcement process", { tag: "@screenshot" }, async ({ page, app, util }) => {
        // The TAC release announcement should be displayed
        await util.assertReleaseAnnouncementIsVisible("Threads Activity Centre");
        // Hide the release announcement
--- a/playwright/e2e/right-panel/file-panel.spec.ts
+++ b/playwright/e2e/right-panel/file-panel.spec.ts
@ -40,7 +40,7 @@ test.describe("FilePanel", () => {
    });

    test.describe("render", () => {
-        test("should render empty state", async ({ page }) => {
+        test("should render empty state", { tag: "@screenshot" }, async ({ page }) => {
            // Wait until the information about the empty state is rendered
            await expect(page.locator(".mx_EmptyState")).toBeVisible();

@ -48,7 +48,7 @@ test.describe("FilePanel", () => {
            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png");
        });

-        test("should list tiles on the panel", async ({ page }) => {
+        test("should list tiles on the panel", { tag: "@screenshot" }, async ({ page }) => {
            // Upload multiple files
            await uploadFile(page, "playwright/sample-files/riot.png"); // Image
            await uploadFile(page, "playwright/sample-files/1sec.ogg"); // Audio
--- a/playwright/e2e/right-panel/notification-panel.spec.ts
+++ b/playwright/e2e/right-panel/notification-panel.spec.ts
@ -21,7 +21,7 @@ test.describe("NotificationPanel", () => {
        await app.client.createRoom({ name: ROOM_NAME });
    });

-    test("should render empty state", async ({ page, app }) => {
+    test("should render empty state", { tag: "@screenshot" }, async ({ page, app }) => {
        await app.viewRoomByName(ROOM_NAME);

        await page.getByRole("button", { name: "Notifications" }).click();
--- a/playwright/e2e/right-panel/right-panel.spec.ts
+++ b/playwright/e2e/right-panel/right-panel.spec.ts
@ -38,7 +38,7 @@ test.describe("RightPanel", () => {
    });

    test.describe("in rooms", () => {
-        test("should handle long room address and long room name", async ({ page, app }) => {
+        test("should handle long room address and long room name", { tag: "@screenshot" }, async ({ page, app }) => {
            await app.client.createRoom({ name: ROOM_NAME_LONG });
            await viewRoomSummaryByName(page, app, ROOM_NAME_LONG);

--- a/playwright/e2e/room-directory/room-directory.spec.ts
+++ b/playwright/e2e/room-directory/room-directory.spec.ts
@ -47,34 +47,40 @@ test.describe("Room Directory", () => {
        expect(resp.chunk[0].room_id).toEqual(roomId);
    });

-    test("should allow finding published rooms in directory", async ({ page, app, user, bot }) => {
-        const name = "This is a public room";
-        await bot.createRoom({
-            visibility: "public" as Visibility,
-            name,
-            room_alias_name: "test1234",
-        });
+    test(
+        "should allow finding published rooms in directory",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot }) => {
+            const name = "This is a public room";
+            await bot.createRoom({
+                visibility: "public" as Visibility,
+                name,
+                room_alias_name: "test1234",
+            });

-        await page.getByRole("button", { name: "Explore rooms" }).click();
+            await page.getByRole("button", { name: "Explore rooms" }).click();

-        const dialog = page.locator(".mx_SpotlightDialog");
-        await dialog.getByRole("textbox", { name: "Search" }).fill("Unknown Room");
-        await expect(
-            dialog.getByText("If you can't find the room you're looking for, ask for an invite or create a new room."),
-        ).toHaveClass("mx_SpotlightDialog_otherSearches_messageSearchText");
+            const dialog = page.locator(".mx_SpotlightDialog");
+            await dialog.getByRole("textbox", { name: "Search" }).fill("Unknown Room");
+            await expect(
+                dialog.getByText(
+                    "If you can't find the room you're looking for, ask for an invite or create a new room.",
+                ),
+            ).toHaveClass("mx_SpotlightDialog_otherSearches_messageSearchText");

-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-no-results.png");
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-no-results.png");

-        await dialog.getByRole("textbox", { name: "Search" }).fill("test1234");
-        await expect(dialog.getByText(name)).toHaveClass("mx_SpotlightDialog_result_publicRoomName");
+            await dialog.getByRole("textbox", { name: "Search" }).fill("test1234");
+            await expect(dialog.getByText(name)).toHaveClass("mx_SpotlightDialog_result_publicRoomName");

-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-one-result.png");
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-one-result.png");

-        await page
-            .locator(".mx_SpotlightDialog .mx_SpotlightDialog_option")
-            .getByRole("button", { name: "Join" })
-            .click();
+            await page
+                .locator(".mx_SpotlightDialog .mx_SpotlightDialog_option")
+                .getByRole("button", { name: "Join" })
+                .click();

-        await expect(page).toHaveURL("/#/room/#test1234:localhost");
-    });
+            await expect(page).toHaveURL("/#/room/#test1234:localhost");
+        },
+    );
 });
--- a/playwright/e2e/room/room-header.spec.ts
+++ b/playwright/e2e/room/room-header.spec.ts
@ -20,7 +20,7 @@ test.describe("Room Header", () => {
        test.use({
            labsFlags: ["feature_notifications"],
        });
-        test("should render default buttons properly", async ({ page, app, user }) => {
+        test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
            await app.client.createRoom({ name: "Test Room" });
            await app.viewRoomByName("Test Room");

@ -51,34 +51,38 @@ test.describe("Room Header", () => {
            await expect(header).toMatchScreenshot("room-header.png");
        });

-        test("should render a very long room name without collapsing the buttons", async ({ page, app, user }) => {
-            const LONG_ROOM_NAME =
-                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
-                "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
-                "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
-                "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
-                "officia deserunt mollit anim id est laborum.";
+        test(
+            "should render a very long room name without collapsing the buttons",
+            { tag: "@screenshot" },
+            async ({ page, app, user }) => {
+                const LONG_ROOM_NAME =
+                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+                    "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+                    "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+                    "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+                    "officia deserunt mollit anim id est laborum.";

-            await app.client.createRoom({ name: LONG_ROOM_NAME });
-            await app.viewRoomByName(LONG_ROOM_NAME);
+                await app.client.createRoom({ name: LONG_ROOM_NAME });
+                await app.viewRoomByName(LONG_ROOM_NAME);

-            const header = page.locator(".mx_RoomHeader");
-            // Wait until the room name is set
-            await expect(page.locator(".mx_RoomHeader_heading").getByText(LONG_ROOM_NAME)).toBeVisible();
+                const header = page.locator(".mx_RoomHeader");
+                // Wait until the room name is set
+                await expect(page.locator(".mx_RoomHeader_heading").getByText(LONG_ROOM_NAME)).toBeVisible();

-            // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
-            // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
-            const buttons = header.locator(".mx_Flex").getByRole("button");
-            await expect(buttons).toHaveCount(5);
+                // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
+                // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
+                const buttons = header.locator(".mx_Flex").getByRole("button");
+                await expect(buttons).toHaveCount(5);

-            for (const button of await buttons.all()) {
-                await expect(button).toBeVisible();
-                await expect(button).toHaveCSS("height", "32px");
-                await expect(button).toHaveCSS("width", "32px");
-            }
+                for (const button of await buttons.all()) {
+                    await expect(button).toBeVisible();
+                    await expect(button).toHaveCSS("height", "32px");
+                    await expect(button).toHaveCSS("width", "32px");
+                }

-            await expect(header).toMatchScreenshot("room-header-long-name.png");
-        });
+                await expect(header).toMatchScreenshot("room-header-long-name.png");
+            },
+        );
    });

    test.describe("with a video room", () => {
@ -99,30 +103,34 @@ test.describe("Room Header", () => {
        test.describe("and with feature_notifications enabled", () => {
            test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });

-            test("should render buttons for chat, room info, threads and facepile", async ({ page, app, user }) => {
-                await createVideoRoom(page, app);
+            test(
+                "should render buttons for chat, room info, threads and facepile",
+                { tag: "@screenshot" },
+                async ({ page, app, user }) => {
+                    await createVideoRoom(page, app);

-                const header = page.locator(".mx_RoomHeader");
+                    const header = page.locator(".mx_RoomHeader");

-                // There's two room info button - the header itself and the i button
-                const infoButtons = header.getByRole("button", { name: "Room info" });
-                await expect(infoButtons).toHaveCount(2);
-                await expect(infoButtons.first()).toBeVisible();
-                await expect(infoButtons.last()).toBeVisible();
+                    // There's two room info button - the header itself and the i button
+                    const infoButtons = header.getByRole("button", { name: "Room info" });
+                    await expect(infoButtons).toHaveCount(2);
+                    await expect(infoButtons.first()).toBeVisible();
+                    await expect(infoButtons.last()).toBeVisible();

-                // Facepile
-                await expect(header.locator(".mx_FacePile")).toBeVisible();
+                    // Facepile
+                    await expect(header.locator(".mx_FacePile")).toBeVisible();

-                // Chat, Threads and Notification buttons
-                await expect(header.getByRole("button", { name: "Chat" })).toBeVisible();
-                await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
-                await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
+                    // Chat, Threads and Notification buttons
+                    await expect(header.getByRole("button", { name: "Chat" })).toBeVisible();
+                    await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
+                    await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();

-                // Assert that there is not a button except those buttons
-                await expect(header.getByRole("button")).toHaveCount(7);
+                    // Assert that there is not a button except those buttons
+                    await expect(header.getByRole("button")).toHaveCount(7);

-                await expect(header).toMatchScreenshot("room-header-video-room.png");
-            });
+                    await expect(header).toMatchScreenshot("room-header-video-room.png");
+                },
+            );
        });

        test("should render a working chat button which opens the timeline on a right panel", async ({
--- a/playwright/e2e/settings/account-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/account-user-settings-tab.spec.ts
@ -23,7 +23,7 @@ test.describe("Account user settings tab", () => {
        },
    });

-    test("should be rendered properly", async ({ uut, user }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ uut, user }) => {
        await expect(uut).toMatchScreenshot("account.png");

        // Assert that the top heading is rendered
@ -71,7 +71,7 @@ test.describe("Account user settings tab", () => {
        );
    });

-    test("should respond to small screen sizes", async ({ page, uut }) => {
+    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page, uut }) => {
        await page.setViewportSize({ width: 700, height: 600 });
        await expect(uut).toMatchScreenshot("account-smallscreen.png");
    });
--- a/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
@ -13,7 +13,7 @@ test.describe("Appearance user settings tab", () => {
        displayName: "Hanako",
    });

-    test("should be rendered properly", async ({ page, user, app }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app }) => {
        const tab = await app.settings.openUserSettings("Appearance");

        // Click "Show advanced" link button
@ -25,19 +25,23 @@ test.describe("Appearance user settings tab", () => {
        await expect(tab).toMatchScreenshot("appearance-tab.png");
    });

-    test("should support changing font size by using the font size dropdown", async ({ page, app, user }) => {
-        await app.settings.openUserSettings("Appearance");
+    test(
+        "should support changing font size by using the font size dropdown",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            await app.settings.openUserSettings("Appearance");

-        const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
-        const fontDropdown = tab.locator(".mx_FontScalingPanel_Dropdown");
-        await expect(fontDropdown.getByLabel("Font size")).toBeVisible();
+            const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
+            const fontDropdown = tab.locator(".mx_FontScalingPanel_Dropdown");
+            await expect(fontDropdown.getByLabel("Font size")).toBeVisible();

-        // Default browser font size is 16px and the select value is 0
-        // -4 value is 12px
-        await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });
+            // Default browser font size is 16px and the select value is 0
+            // -4 value is 12px
+            await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });

-        await expect(page).toMatchScreenshot("window-12px.png", { includeDialogBackground: true });
-    });
+            await expect(page).toMatchScreenshot("window-12px.png", { includeDialogBackground: true });
+        },
+    );

    test("should support enabling system font", async ({ page, app, user }) => {
        await app.settings.openUserSettings("Appearance");
--- a/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.ts
@ -20,20 +20,24 @@ test.describe("Appearance user settings tab", () => {
            await util.openAppearanceTab();
        });

-        test("should change the message layout from modern to bubble", async ({ page, app, user, util }) => {
-            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-modern.png");
+        test(
+            "should change the message layout from modern to bubble",
+            { tag: "@screenshot" },
+            async ({ page, app, user, util }) => {
+                await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-modern.png");

-            await util.getBubbleLayout().click();
+                await util.getBubbleLayout().click();

-            // Assert that modern are irc layout are not selected
-            await expect(util.getBubbleLayout()).toBeChecked();
-            await expect(util.getModernLayout()).not.toBeChecked();
-            await expect(util.getIRCLayout()).not.toBeChecked();
+                // Assert that modern are irc layout are not selected
+                await expect(util.getBubbleLayout()).toBeChecked();
+                await expect(util.getModernLayout()).not.toBeChecked();
+                await expect(util.getIRCLayout()).not.toBeChecked();

-            // Assert that the room layout is set to bubble layout
-            await util.assertBubbleLayout();
-            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-bubble.png");
-        });
+                // Assert that the room layout is set to bubble layout
+                await util.assertBubbleLayout();
+                await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-bubble.png");
+            },
+        );

        test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
--- a/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts
@ -20,31 +20,39 @@ test.describe("Appearance user settings tab", () => {
            await util.openAppearanceTab();
        });

-        test("should be rendered with the light theme selected", async ({ page, app, util }) => {
-            // Assert that 'Match system theme' is not checked
-            await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+        test(
+            "should be rendered with the light theme selected",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                // Assert that 'Match system theme' is not checked
+                await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();

-            // Assert that the light theme is selected
-            await expect(util.getLightTheme()).toBeChecked();
-            // Assert that the dark and high contrast themes are not selected
-            await expect(util.getDarkTheme()).not.toBeChecked();
-            await expect(util.getHighContrastTheme()).not.toBeChecked();
+                // Assert that the light theme is selected
+                await expect(util.getLightTheme()).toBeChecked();
+                // Assert that the dark and high contrast themes are not selected
+                await expect(util.getDarkTheme()).not.toBeChecked();
+                await expect(util.getHighContrastTheme()).not.toBeChecked();

-            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
-        });
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
+            },
+        );

-        test("should disable the themes when the system theme is clicked", async ({ page, app, util }) => {
-            await util.getMatchSystemThemeCheckbox().click();
+        test(
+            "should disable the themes when the system theme is clicked",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                await util.getMatchSystemThemeCheckbox().click();

-            // Assert that the themes are disabled
-            await expect(util.getLightTheme()).toBeDisabled();
-            await expect(util.getDarkTheme()).toBeDisabled();
-            await expect(util.getHighContrastTheme()).toBeDisabled();
+                // Assert that the themes are disabled
+                await expect(util.getLightTheme()).toBeDisabled();
+                await expect(util.getDarkTheme()).toBeDisabled();
+                await expect(util.getHighContrastTheme()).toBeDisabled();

-            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-match-system-enabled.png");
-        });
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-match-system-enabled.png");
+            },
+        );

-        test("should change the theme to dark", async ({ page, app, util }) => {
+        test("should change the theme to dark", { tag: "@screenshot" }, async ({ page, app, util }) => {
            // Assert that the light theme is selected
            await expect(util.getLightTheme()).toBeChecked();

@ -63,19 +71,23 @@ test.describe("Appearance user settings tab", () => {
                labsFlags: ["feature_custom_themes"],
            });

-            test("should render the custom theme section", async ({ page, app, util }) => {
+            test("should render the custom theme section", { tag: "@screenshot" }, async ({ page, app, util }) => {
                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
            });

-            test("should be able to add and remove a custom theme", async ({ page, app, util }) => {
-                await util.addCustomTheme();
+            test(
+                "should be able to add and remove a custom theme",
+                { tag: "@screenshot" },
+                async ({ page, app, util }) => {
+                    await util.addCustomTheme();

-                await expect(util.getCustomTheme()).not.toBeChecked();
-                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
+                    await expect(util.getCustomTheme()).not.toBeChecked();
+                    await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");

-                await util.removeCustomTheme();
-                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
-            });
+                    await util.removeCustomTheme();
+                    await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
+                },
+            );
        });
    });
 });
--- a/playwright/e2e/settings/general-room-settings-tab.spec.ts
+++ b/playwright/e2e/settings/general-room-settings-tab.spec.ts
@ -20,7 +20,7 @@ test.describe("General room settings tab", () => {
        await app.viewRoomByName(roomName);
    });

-    test("should be rendered properly", async ({ page, app }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, app }) => {
        const settings = await app.settings.openRoomSettings("General");

        // Assert that "Show less" details element is rendered
--- a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
@ -23,7 +23,7 @@ test.describe("Preferences user settings tab", () => {
        },
    });

-    test("should be rendered properly", async ({ app, page, user }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
        page.setViewportSize({ width: 1024, height: 3300 });
        const tab = await app.settings.openUserSettings("Preferences");
        // Assert that the top heading is rendered
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@ -36,7 +36,7 @@ test.describe("Security user settings tab", () => {
        });

        test.describe("AnalyticsLearnMoreDialog", () => {
-            test("should be rendered properly", async ({ app, page }) => {
+            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page }) => {
                const tab = await app.settings.openUserSettings("Security");
                await tab.getByRole("button", { name: "Learn more" }).click();
                await expect(page.locator(".mx_AnalyticsLearnMoreDialog_wrapper .mx_Dialog")).toMatchScreenshot(
--- a/playwright/e2e/share-dialog/share-dialog.spec.ts
+++ b/playwright/e2e/share-dialog/share-dialog.spec.ts
@ -16,7 +16,7 @@ test.describe("Share dialog", () => {
        },
    });

-    test("should share a room", async ({ page, app, room }) => {
+    test("should share a room", { tag: "@screenshot" }, async ({ page, app, room }) => {
        await app.viewRoomById(room.roomId);
        await app.toggleRoomInfoPanel();
        await page.getByRole("menuitem", { name: "Copy link" }).click();
@ -29,7 +29,7 @@ test.describe("Share dialog", () => {
        });
    });

-    test("should share a room member", async ({ page, app, room, user }) => {
+    test("should share a room member", { tag: "@screenshot" }, async ({ page, app, room, user }) => {
        await app.viewRoomById(room.roomId);
        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });

@ -46,7 +46,7 @@ test.describe("Share dialog", () => {
        });
    });

-    test("should share an event", async ({ page, app, room }) => {
+    test("should share an event", { tag: "@screenshot" }, async ({ page, app, room }) => {
        await app.viewRoomById(room.roomId);
        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });

--- a/playwright/e2e/spaces/spaces.spec.ts
+++ b/playwright/e2e/spaces/spaces.spec.ts
@ -55,7 +55,7 @@ test.describe("Spaces", () => {
        botCreateOpts: { displayName: "BotBob" },
    });

-    test("should allow user to create public space", async ({ page, app, user }) => {
+    test("should allow user to create public space", { tag: "@screenshot" }, async ({ page, app, user }) => {
        const contextMenu = await openSpaceCreateMenu(page);
        await expect(contextMenu).toMatchScreenshot("space-create-menu.png");

@ -88,7 +88,7 @@ test.describe("Spaces", () => {
        await expect(page.getByRole("treeitem", { name: "Jokes" })).toBeVisible();
    });

-    test("should allow user to create private space", async ({ page, app, user }) => {
+    test("should allow user to create private space", { tag: "@screenshot" }, async ({ page, app, user }) => {
        const menu = await openSpaceCreateMenu(page);
        await menu.getByRole("button", { name: "Private" }).click();

@ -216,49 +216,47 @@ test.describe("Spaces", () => {
        await expect(hierarchyList.getByRole("treeitem", { name: "Gaming" }).getByRole("button")).toBeVisible();
    });

-    test("should render subspaces in the space panel only when expanded", async ({
-        page,
-        app,
-        user,
-        axe,
-        checkA11y,
-    }) => {
-        axe.disableRules([
-            // Disable this check as it triggers on nested roving tab index elements which are in practice fine
-            "nested-interactive",
-            // XXX: We have some known contrast issues here
-            "color-contrast",
-        ]);
+    test(
+        "should render subspaces in the space panel only when expanded",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe, checkA11y }) => {
+            axe.disableRules([
+                // Disable this check as it triggers on nested roving tab index elements which are in practice fine
+                "nested-interactive",
+                // XXX: We have some known contrast issues here
+                "color-contrast",
+            ]);

-        const childSpaceId = await app.client.createSpace({
-            name: "Child Space",
-            initial_state: [],
-        });
-        await app.client.createSpace({
-            name: "Root Space",
-            initial_state: [spaceChildInitialState(childSpaceId)],
-        });
+            const childSpaceId = await app.client.createSpace({
+                name: "Child Space",
+                initial_state: [],
+            });
+            await app.client.createSpace({
+                name: "Root Space",
+                initial_state: [spaceChildInitialState(childSpaceId)],
+            });

-        // Find collapsed Space panel
-        const spaceTree = page.getByRole("tree", { name: "Spaces" });
-        await expect(spaceTree.getByRole("button", { name: "Root Space" })).toBeVisible();
-        await expect(spaceTree.getByRole("button", { name: "Child Space" })).not.toBeVisible();
+            // Find collapsed Space panel
+            const spaceTree = page.getByRole("tree", { name: "Spaces" });
+            await expect(spaceTree.getByRole("button", { name: "Root Space" })).toBeVisible();
+            await expect(spaceTree.getByRole("button", { name: "Child Space" })).not.toBeVisible();

-        await checkA11y();
-        await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-collapsed.png");
+            await checkA11y();
+            await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-collapsed.png");

-        // This finds the expand button with the class name "mx_SpaceButton_toggleCollapse". Note there is another
-        // button with the same name with different class name "mx_SpacePanel_toggleCollapse".
-        await spaceTree.getByRole("button", { name: "Expand" }).click();
-        await expect(page.locator(".mx_SpacePanel:not(.collapsed)")).toBeVisible(); // TODO: replace :not() selector
+            // This finds the expand button with the class name "mx_SpaceButton_toggleCollapse". Note there is another
+            // button with the same name with different class name "mx_SpacePanel_toggleCollapse".
+            await spaceTree.getByRole("button", { name: "Expand" }).click();
+            await expect(page.locator(".mx_SpacePanel:not(.collapsed)")).toBeVisible(); // TODO: replace :not() selector

-        const item = page.locator(".mx_SpaceItem", { hasText: "Root Space" });
-        await expect(item).toBeVisible();
-        await expect(item.locator(".mx_SpaceItem", { hasText: "Child Space" })).toBeVisible();
+            const item = page.locator(".mx_SpaceItem", { hasText: "Root Space" });
+            await expect(item).toBeVisible();
+            await expect(item.locator(".mx_SpaceItem", { hasText: "Child Space" })).toBeVisible();

-        await checkA11y();
-        await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-expanded.png");
-    });
+            await checkA11y();
+            await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-expanded.png");
+        },
+    );

    test("should not soft crash when joining a room from space hierarchy which has a link in its topic", async ({
        page,
--- a/playwright/e2e/spaces/threads-activity-centre/index.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/index.ts
@ -276,7 +276,7 @@ export class Helpers {
     * Assert that the threads activity centre button has no indicator
     */
    async assertNoTacIndicator() {
-        // Assert by checkng neither of the known indicators are visible first. This will wait
+        // Assert by checking neither of the known indicators are visible first. This will wait
        // if it takes a little time to disappear, but the screenshot comparison won't.
        await expect(this.getTacButton().locator("[data-indicator='success']")).not.toBeVisible();
        await expect(this.getTacButton().locator("[data-indicator='critical']")).not.toBeVisible();
@ -376,7 +376,7 @@ export class Helpers {
     * Clicks the button to mark all threads as read in the current room
     */
    clickMarkAllThreadsRead() {
-        return this.page.getByLabel("Mark all as read").click();
+        return this.page.locator("#thread-panel").getByRole("button", { name: "Mark all as read" }).click();
    }
 }

--- a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
@ -16,16 +16,18 @@ test.describe("Threads Activity Centre", () => {
        labsFlags: ["threadsActivityCentre"],
    });

-    test("should have the button correctly aligned and displayed in the space panel when expanded", async ({
-        util,
-    }) => {
-        // Open the space panel
-        await util.expandSpacePanel();
-        // The buttons in the space panel should be aligned when expanded
-        await expect(util.getSpacePanel()).toMatchScreenshot("tac-button-expanded.png");
-    });
+    test(
+        "should have the button correctly aligned and displayed in the space panel when expanded",
+        { tag: "@screenshot" },
+        async ({ util }) => {
+            // Open the space panel
+            await util.expandSpacePanel();
+            // The buttons in the space panel should be aligned when expanded
+            await expect(util.getSpacePanel()).toMatchScreenshot("tac-button-expanded.png");
+        },
+    );

-    test("should not show indicator when there is no thread", async ({ room1, util }) => {
+    test("should not show indicator when there is no thread", { tag: "@screenshot" }, async ({ room1, util }) => {
        // No indicator should be shown
        await util.assertNoTacIndicator();

@ -62,7 +64,7 @@ test.describe("Threads Activity Centre", () => {
        await util.assertHighlightIndicator();
    });

-    test("should show the rooms with unread threads", async ({ room1, room2, util, msg }) => {
+    test("should show the rooms with unread threads", { tag: "@screenshot" }, async ({ room1, room2, util, msg }) => {
        await util.goTo(room2);
        await util.populateThreads(room1, room2, msg);
        // The indicator should be shown
@ -79,7 +81,7 @@ test.describe("Threads Activity Centre", () => {
        await expect(util.getTacPanel()).toMatchScreenshot("tac-panel-mix-unread.png");
    });

-    test("should update with a thread is read", async ({ room1, room2, util, msg }) => {
+    test("should update with a thread is read", { tag: "@screenshot" }, async ({ room1, room2, util, msg }) => {
        await util.goTo(room2);
        await util.populateThreads(room1, room2, msg);

@ -128,7 +130,7 @@ test.describe("Threads Activity Centre", () => {
        await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
    });

-    test("should have the correct hover state", async ({ util, page }) => {
+    test("should have the correct hover state", { tag: "@screenshot" }, async ({ util, page }) => {
        await util.hoverTacButton();
        await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered.png");

@ -138,7 +140,7 @@ test.describe("Threads Activity Centre", () => {
        await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered-expanded.png");
    });

-    test("should mark all threads as read", async ({ room1, room2, util, msg, page }) => {
+    test("should mark all threads as read", { tag: "@screenshot" }, async ({ room1, room2, util, msg, page }) => {
        await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);

        await util.assertNotificationTac();
@ -146,7 +148,7 @@ test.describe("Threads Activity Centre", () => {
        await util.openTac();
        await util.clickRoomInTac(room1.name);

-        util.clickMarkAllThreadsRead();
+        await util.clickMarkAllThreadsRead();

        await util.assertNoTacIndicator();
    });
--- a/playwright/e2e/threads/threads.spec.ts
+++ b/playwright/e2e/threads/threads.spec.ts
@ -25,7 +25,7 @@ test.describe("Threads", () => {
    });

    // Flaky: https://github.com/vector-im/element-web/issues/26452
-    test.skip("should be usable for a conversation", async ({ page, app, bot }) => {
+    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);
@ -150,7 +150,7 @@ test.describe("Threads", () => {
        ).toHaveCSS("padding-inline-start", ThreadViewGroupSpacingStart);

        // Take snapshot of group layout (IRC layout is not available on ThreadView)
-        expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
+        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_reaction_and_a_hidden_event_on_group_layout.png",
            {
                mask: mask,
@ -174,7 +174,7 @@ test.describe("Threads", () => {
            .toHaveCSS("margin-inline-start", "0px");

        // Take snapshot of bubble layout
-        expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
+        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_reaction_and_a_hidden_event_on_bubble_layout.png",
            {
                mask: mask,
@ -351,57 +351,61 @@ test.describe("Threads", () => {
        });
    });

-    test("should send location and reply to the location on ThreadView", async ({ page, app, bot }) => {
-        const roomId = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
-        await bot.joinRoom(roomId);
-        await page.goto("/#/room/" + roomId);
+    test(
+        "should send location and reply to the location on ThreadView",
+        { tag: "@screenshot" },
+        async ({ page, app, bot }) => {
+            const roomId = await app.client.createRoom({});
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+            await page.goto("/#/room/" + roomId);

-        // Exclude timestamp, read marker, and maplibregl-map from snapshots
-        const css =
-            ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }";
+            // Exclude timestamp, read marker, and maplibregl-map from snapshots
+            const css =
+                ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }";

-        let locator = page.locator(".mx_RoomView_body");
-        // User sends message
-        let textbox = locator.getByRole("textbox", { name: "Send a message…" });
-        await textbox.fill("Hello Mr. Bot");
-        await textbox.press("Enter");
-        // Wait for message to send, get its ID and save as @threadId
-        const threadId = await locator
-            .locator(".mx_EventTile[data-scroll-tokens]")
-            .filter({ hasText: "Hello Mr. Bot" })
-            .getAttribute("data-scroll-tokens");
+            let locator = page.locator(".mx_RoomView_body");
+            // User sends message
+            let textbox = locator.getByRole("textbox", { name: "Send a message…" });
+            await textbox.fill("Hello Mr. Bot");
+            await textbox.press("Enter");
+            // Wait for message to send, get its ID and save as @threadId
+            const threadId = await locator
+                .locator(".mx_EventTile[data-scroll-tokens]")
+                .filter({ hasText: "Hello Mr. Bot" })
+                .getAttribute("data-scroll-tokens");

-        // Bot starts thread
-        await bot.sendMessage(roomId, "Hello there", threadId);
+            // Bot starts thread
+            await bot.sendMessage(roomId, "Hello there", threadId);

-        // User clicks thread summary
-        await page.locator(".mx_RoomView_body .mx_ThreadSummary").click();
+            // User clicks thread summary
+            await page.locator(".mx_RoomView_body .mx_ThreadSummary").click();

-        // User sends location on ThreadView
-        await expect(page.locator(".mx_ThreadView")).toBeAttached();
-        await (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Location" }).click();
-        await page.getByTestId(`share-location-option-Pin`).click();
-        await page.locator("#mx_LocationPicker_map").click();
-        await page.getByRole("button", { name: "Share location" }).click();
-        await expect(page.locator(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody")).toBeAttached({
-            timeout: 10000,
-        });
+            // User sends location on ThreadView
+            await expect(page.locator(".mx_ThreadView")).toBeAttached();
+            await (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Location" }).click();
+            await page.getByTestId(`share-location-option-Pin`).click();
+            await page.locator("#mx_LocationPicker_map").click();
+            await page.getByRole("button", { name: "Share location" }).click();
+            await expect(page.locator(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody")).toBeAttached({
+                timeout: 10000,
+            });

-        // User replies to the location
-        locator = page.locator(".mx_ThreadView");
-        await locator.locator(".mx_EventTile_last").hover();
-        await locator.locator(".mx_EventTile_last").getByRole("button", { name: "Reply" }).click();
-        textbox = locator.getByRole("textbox", { name: "Reply to thread…" });
-        await textbox.fill("Please come here");
-        await textbox.press("Enter");
-        // Wait until the reply is sent
-        await expect(locator.locator(".mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+            // User replies to the location
+            locator = page.locator(".mx_ThreadView");
+            await locator.locator(".mx_EventTile_last").hover();
+            await locator.locator(".mx_EventTile_last").getByRole("button", { name: "Reply" }).click();
+            textbox = locator.getByRole("textbox", { name: "Reply to thread…" });
+            await textbox.fill("Please come here");
+            await textbox.press("Enter");
+            // Wait until the reply is sent
+            await expect(locator.locator(".mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();

-        // Take a snapshot of reply to the shared location
-        await page.addStyleTag({ content: css });
-        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Reply_to_the_location_on_ThreadView.png");
-    });
+            // Take a snapshot of reply to the shared location
+            await page.addStyleTag({ content: css });
+            await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Reply_to_the_location_on_ThreadView.png");
+        },
+    );

    test("right panel behaves correctly", async ({ page, app, user }) => {
        // Create room
--- a/playwright/e2e/timeline/timeline.spec.ts
+++ b/playwright/e2e/timeline/timeline.spec.ts
--- a/playwright/e2e/user-menu/user-menu.spec.ts
+++ b/playwright/e2e/user-menu/user-menu.spec.ts
@ -11,7 +11,7 @@ import { test, expect } from "../../element-web-test";
 test.describe("User Menu", () => {
    test.use({ displayName: "Jeff" });

-    test("should contain our name & userId", async ({ page, user }) => {
+    test("should contain our name & userId", { tag: "@screenshot" }, async ({ page, user }) => {
        await page.getByRole("button", { name: "User menu", exact: true }).click();
        const menu = page.getByRole("menu");

--- a/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
+++ b/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
@ -26,7 +26,7 @@ test.describe("User Onboarding (new user)", () => {
        await expect(page.locator(".mx_UserOnboardingList")).toBeVisible();
    });

-    test("page is shown and preference exists", async ({ page, app }) => {
+    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",
        );
@ -34,7 +34,7 @@ test.describe("User Onboarding (new user)", () => {
        await expect(page.getByText("Show shortcut to welcome checklist above the room list")).toBeVisible();
    });

-    test("app download dialog", async ({ page }) => {
+    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" }),
--- a/playwright/e2e/user-view/user-view.spec.ts
+++ b/playwright/e2e/user-view/user-view.spec.ts
@ -14,7 +14,7 @@ test.describe("UserView", () => {
        botCreateOpts: { displayName: "Usman" },
    });

-    test("should render the user view as expected", async ({ page, homeserver, user, bot }) => {
+    test("should render the user view as expected", { tag: "@screenshot" }, async ({ page, homeserver, user, bot }) => {
        await page.goto(`/#/user/${bot.credentials.userId}`);

        const rightPanel = page.locator("#mx_RightPanel");
--- a/playwright/e2e/widgets/layout.spec.ts
+++ b/playwright/e2e/widgets/layout.spec.ts
@ -70,7 +70,7 @@ test.describe("Widget Layout", () => {
        await app.viewRoomByName(ROOM_NAME);
    });

-    test("should be set properly", async ({ page }) => {
+    test("should be set properly", { tag: "@screenshot" }, async ({ page }) => {
        await expect(page.locator(".mx_AppsDrawer")).toMatchScreenshot("apps-drawer.png");
    });

--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@ -314,6 +314,10 @@ export const expect = baseExpect.extend({
        const testInfo = test.info();
        if (!testInfo) throw new Error(`toMatchScreenshot() must be called during the test`);

+        if (!testInfo.tags.includes("@screenshot")) {
+            throw new Error("toMatchScreenshot() must be used in a test tagged with @screenshot");
+        }
+
        const page = "page" in receiver ? receiver.page() : receiver;

        let css = `
--- a/playwright/plugins/homeserver/synapse/index.ts
+++ b/playwright/plugins/homeserver/synapse/index.ts
@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:892793d00b70e9a92ceb929263fe734408ce7f50cb4436c65f07407048a6d4e7";
+const DOCKER_TAG = "develop@sha256:6b82dba715fa7ae641010b4cc5e71edaeb9cc05a50ac5b9e4ff09afa9cd2a80d";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
--- a/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png
+++ b/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png
--- a/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-linux.png
+++ b/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
--- a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png
+++ b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png
--- a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
+++ b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
--- a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png
+++ b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png
--- a/playwright/snapshots/file-upload/image-upload.spec.ts/image-upload-preview-linux.png
+++ b/playwright/snapshots/file-upload/image-upload.spec.ts/image-upload-preview-linux.png
--- a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png
+++ b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png
--- a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-verify-email-linux.png
+++ b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-verify-email-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
renovate[bot]	943b817194	Update dependency @babel/preset-react to v7.26.3 (#28714 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-11 20:24:53 +00:00
Florian Duros	2aa72bb40b	Update `@vector-im/compound-web` to `7.5.0` (#28700 ) Co-authored-by: David Baker <dbkr@users.noreply.github.com>	2024-12-11 19:35:59 +00:00
David Baker	a755e399cf	Change to en-US locale for date tests (#28723 ) * Change to en-US locale for date tests As per comment. Fixes the tests. * Spell locale right Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>	2024-12-11 19:00:24 +00:00
renovate[bot]	8dff758153	Update definitelyTyped (#28704 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-11 15:02:47 +00:00
David Baker	cf3bdbdc7a	Fix Read Receipt Test (#28719 ) * Update test snapshot as the date formatting appears to have gained a comma, and somehow got through the merge tests on the dependency bump. * Actually this was the problem	2024-12-11 14:25:56 +00:00
renovate[bot]	ba98c2085d	Update dependency @formatjs/intl-segmenter to v11.7.5 (#28713 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-11 13:13:09 +00:00
David Baker	b330de5d6e	Factor out crypto setup process into a store (#28675 ) * Factor out crypto setup process into a store To make components pure and avoid react 18 dev mode problems due to components making requests when mounted. * fix test * test for the store * Add comment	2024-12-11 13:10:27 +00:00
renovate[bot]	b86bb5cc2f	Update guibranco/github-status-action-v2 digest to d469d49 (#28702 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-11 02:01:31 +00:00
renovate[bot]	e835cab139	Update all non-major dependencies (#28703 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-10 17:20:18 +00:00
Hugh Nimmo-Smith	6b7c94905f	Allow trusted Element Call widget to send and receive media encryption key to-device messages (#28316 )	2024-12-10 12:05:30 +00:00
ElementRobot	a4e8bb3f9a	[create-pull-request] automated change (#28696 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-12-10 06:17:13 +00:00
Hubert Chathi	2b4000d47f	Add delay in test to allow Alice to fetch Bob's device keys (#28668 ) * add delay in test to allow Alice to fetch Bob's device keys * wait until we see bob's device, rather than hard-coding a timeout * Fix comment Co-authored-by: Florian Duros <florianduros@element.io> * fix lint --------- Co-authored-by: Florian Duros <florianduros@element.io>	2024-12-09 21:02:29 +00:00
Michael Telatynski	01304439ee	Make tsc faster again (#28678 ) * Stash initial work to bring TSC from over 6 mins to under 1 minute Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Stabilise types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix incorrect props to AccessibleButton Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Swap AccessibleButton element types to match the props they provide Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Changed my mind, remove spurious previously ignored props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-06 17:49:32 +00:00
David Baker	c659afa8db	Rename CreateCrossSigningDialog to InitialCryptoSetupDialog (#28658 ) * Rename CreateCrossSigningDialog to InitialCryptoSetup because it will soon encompass things other than just creating cross signing. * Fix name & tests * Fix import * Remove code creating key backup Because this was split out from my key backup by default PR * Fix comment * Convert to named export	2024-12-06 10:26:26 +00:00
ElementRobot	9cc5564d50	[create-pull-request] automated change (#28670 ) Co-authored-by: t3chguy <t3chguy@users.noreply.github.com>	2024-12-06 09:38:58 +00:00
Michael Telatynski	549300726f	Update CODEOWNERS	2024-12-06 09:18:33 +00:00
ElementRobot	319dab5920	[create-pull-request] automated change (#28669 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-12-06 06:17:19 +00:00
renovate[bot]	5c51d179b9	Update linkify to v4.2.0 (#28665 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-05 19:28:39 +00:00
Florian Duros	dbdb23f6bc	Notify to resize the timeline when the pinned message banner is displayed or hidden (#28654 )	2024-12-05 16:11:40 +00:00
Florian Duros	5686666ad2	Fix multiple pinned messages flacky tests by waiting the message to be displayed in the banner when pinned. (#28655 )	2024-12-05 15:31:16 +00:00
Michael Telatynski	0c4189f2ed	Remove stale webpack configuration (#28649 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-05 14:42:26 +00:00
Michael Telatynski	450cb608ec	Add mergequeue tag to read-receipts tests and skip running them on PR commits (#28648 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-05 14:30:28 +00:00
Michael Telatynski	7e03f38a3b	Switch to React18 useId (#28651 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-05 14:11:03 +00:00
ElementRobot	9bf3d22439	[create-pull-request] automated change (#28646 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-12-05 09:08:21 +00:00
Richard van der Hoff	5547101bcc	Playwright: fix (hopefully) flaky shields test (#28641 ) * Playwright: improve failure report when an unexpected shield exists If we discover an E2E shield when we didn't expect one, let's make the error message more helpful by checking the tooltip. * Playwright: fix (hopefully) flaky shields test Wait for our user to fetch the bot's identity before running the test, to work around a race in the shield logic. Hopefully, fixes https://github.com/element-hq/element-web/issues/28061	2024-12-04 23:01:58 +00:00
Michael Telatynski	085854b125	Merge pull request #28626 from element-hq/t3chguy/web-friendly-buffers Remove usages of Buffer so we don't need to ship the polyfill	2024-12-04 22:10:30 +00:00
fkwp	ee24989f49	increase ringing timeout from 10 seconds to 90 seconds (#28630 ) * increase ringing timeout from 10 seconds to 90 seconds * increase ringing timeout from 10 seconds to 90 seconds * increase max age of incoming notify event to 15 seconds which triggers a call ringingn notification/toast	2024-12-04 21:52:15 +00:00
Florian Duros	5a418f3f19	Fix font & spaces in settings subsection (#28631 ) * Fix settings header * Fix gap between subsection * Update tests * Update e2e tests * Update snapshots	2024-12-04 14:11:02 +00:00
Michael Telatynski	db5b3359c6	Switch to using @fontsource for Inter & Inconsolata (#28540 ) * Switch to using @fontsource for Inter & Inconsolata Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused font Open_Sans Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to less broken imports Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to Ubuntu 24.04 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Discard changes to res/themes/dark/css/dark.pcss * Discard changes to res/themes/legacy-light/css/_fonts.pcss * Discard changes to res/themes/light-high-contrast/css/light-high-contrast.pcss * Discard changes to res/themes/light/css/light.pcss * Discard changes to .github/workflows/end-to-end-tests.yaml * Set outputDir for fonts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use headed mode for Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to new Chrome headless mode instead Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Cache bust playwright browser install in CI Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Try with 22.04 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update to Ubuntu Noble Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-04 11:55:27 +00:00
Michael Telatynski	188f910dc7	Merge remote-tracking branch 'origin/t3chguy/web-friendly-buffers' into t3chguy/web-friendly-buffers	2024-12-04 11:46:56 +00:00
Michael Telatynski	619e41e3a2	Remove usages of Buffer Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-04 11:46:48 +00:00
Michael Telatynski	c1838b34b6	Merge branch 'develop' into t3chguy/web-friendly-buffers	2024-12-04 11:34:13 +00:00
ElementRobot	1d51323451	Localazy Download (#28629 ) * [create-pull-request] automated change * Discard changes to src/i18n/strings/en_EN.json --------- Co-authored-by: t3chguy <t3chguy@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-04 09:40:33 +00:00
Michael Telatynski	d0d0b8212d	Tag screenshot tests to speed up test:playwright:screenshot (#28623 ) * Tag screenshot tests to speed up test:playwright:screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add more tags Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-04 09:12:43 +00:00
Michael Telatynski	974d3c175a	Use specific import for bloom-filters to avoid Buffer dependency Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-04 08:46:25 +00:00
Florian Duros	d0e19d3e03	Fix TAC `should mark all threads as read` e2e test (#28625 )	2024-12-04 08:42:37 +00:00
ElementRobot	b016cf59e9	[create-pull-request] automated change (#28628 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-12-04 08:38:52 +00:00
Michael Telatynski	cfdfc4e640	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 18:06:05 +00:00
Michael Telatynski	d0fea745bb	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 17:41:28 +00:00
Michael Telatynski	f3ef9e6602	Update test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 17:38:24 +00:00
Michael Telatynski	af0391b86a	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 17:32:10 +00:00
Michael Telatynski	36108c0c22	Update js-sdk usages around Buffers to avoid needing Buffer polyfill Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 17:18:43 +00:00
Florian Duros	d2acce1221	Remove manual device verification which is not supported by the new cryptography stack (#28588 ) * Remove call of `MatrixClient.setDeviceVerified` * Replace usage of deprecated crypto events * Replace deprecated imports * Remove legacy button in `UntrustedDeviceDialog` * Review fixes * Add tests * Fix doc	2024-12-03 15:26:37 +00:00
Florian Duros	b72c053d1a	Add `Close` tooltip to dialog (#28617 ) * Add `Close` tooltip to dialog * Update snapshots	2024-12-03 14:25:06 +00:00
Michael Telatynski	865c5b0e9c	Fix deploy script by normalizing version string Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-12-03 12:42:23 +00:00
RiotRobot	ce3fa2164f	Reset matrix-js-sdk back to develop branch	2024-12-03 12:33:41 +00:00
RiotRobot	60b0e8b237	Merge branch 'master' into develop	2024-12-03 12:33:26 +00:00
RiotRobot	823828fc17	v1.11.87	2024-12-03 12:30:13 +00:00
RiotRobot	8774a68a13	Upgrade dependency to matrix-js-sdk@34.13.0	2024-12-03 12:25:29 +00:00
RiotRobot	a891dcddc2	v1.11.87-rc.7	2024-11-26 15:33:55 +00:00
Michael Telatynski	61947deef5	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 15:29:08 +00:00
Michael Telatynski	c1549e6aaa	Fix running-workflow-name so it can self-detect Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 15:28:59 +00:00
RiotRobot	adfc66bd1b	v1.11.87-rc.6	2024-11-26 15:15:08 +00:00
Michael Telatynski	dbfb84eb77	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 15:11:53 +00:00
Michael Telatynski	3d48168394	We have to make the tar output directory manually Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 15:11:48 +00:00
RiotRobot	9ddd5d96eb	v1.11.87-rc.5	2024-11-26 15:05:15 +00:00
Michael Telatynski	e6dc6b93a7	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 15:03:46 +00:00
Michael Telatynski	bd0bb879ec	Fix download-verify-element-tarball not consuming inputs.tag Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 15:03:39 +00:00
RiotRobot	903928c33c	v1.11.87-rc.4	2024-11-26 14:56:48 +00:00
Michael Telatynski	0525887be4	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 14:53:25 +00:00
Michael Telatynski	4259e96c90	Fix current version checking function Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 14:53:17 +00:00
RiotRobot	20532144d2	v1.11.87-rc.3	2024-11-26 14:42:48 +00:00
Michael Telatynski	d2eeb3d8af	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 14:41:11 +00:00
Michael Telatynski	b4445fed53	Specify shell:bash in download-verify-element-tarball Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 14:41:00 +00:00
RiotRobot	9860f9320a	v1.11.87-rc.2	2024-11-26 14:29:01 +00:00
Michael Telatynski	c8f46a0191	Merge remote-tracking branch 'origin/staging' into staging	2024-11-26 14:27:12 +00:00
Michael Telatynski	4285b4b140	GPG_FINGERPRINT is in vars not secrets Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 14:27:06 +00:00
RiotRobot	94130be5a7	v1.11.87-rc.1	2024-11-26 14:19:43 +00:00
Michael Telatynski	2ebc1b4a89	Fix deploy action Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-26 14:14:29 +00:00
RiotRobot	756ce2c639	v1.11.87-rc.0	2024-11-26 13:56:17 +00:00
RiotRobot	c519361b4e	Upgrade dependency to matrix-js-sdk@34.13.0-rc.0	2024-11-26 13:44:06 +00:00