Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/playwright-tenbin

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

# Conflicts:
#	.github/workflows/end-to-end-tests.yaml
#	package.json
#	playwright/e2e/crypto/backups-mas.spec.ts
#	playwright/e2e/csAPI.ts
#	playwright/e2e/login/utils.ts
#	playwright/e2e/right-panel/right-panel.spec.ts
#	playwright/e2e/spotlight/spotlight.spec.ts
#	playwright/element-web-test.ts
#	playwright/pages/client.ts
#	playwright/plugins/homeserver/index.ts
#	playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts
#	playwright/plugins/oauth_server/index.ts
#	playwright/services.ts
#	playwright/testcontainers/HomeserverContainer.ts
#	playwright/testcontainers/dendrite.ts
#	playwright/testcontainers/mas.ts
#	playwright/testcontainers/synapse.ts
#	playwright/testcontainers/utils.ts
#	yarn.lock

.eslintignore

@@ -8,3 +8,6 @@ src/component-index.js
 # Auto-generated file
 src/modules.ts
 src/modules.js
+# Test result files
+/playwright/test-results/
+/playwright/html-report/

.github/CODEOWNERS

@@ -11,10 +11,11 @@
 /src/stores/SetupEncryptionStore.ts                                     @element-hq/element-crypto-web-reviewers
 /test/stores/SetupEncryptionStore-test.ts                               @element-hq/element-crypto-web-reviewers
 /src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx  @element-hq/element-crypto-web-reviewers
-/src/src/components/views/settings/encryption/                          @element-hq/element-crypto-web-reviewers
+/src/components/views/settings/encryption/                              @element-hq/element-crypto-web-reviewers
 /test/unit-tests/components/views/settings/encryption/                  @element-hq/element-crypto-web-reviewers
-/playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 /src/components/views/dialogs/devtools/Crypto.tsx                       @element-hq/element-crypto-web-reviewers
+/playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
+/playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings

.github/workflows/docker.yaml

@@ -0,0 +1,141 @@
+name: Docker
+on:
+    workflow_dispatch: {}
+    push:
+        tags: [v*]
+    pull_request: {}
+    schedule:
+        # This job can take a while, and we have usage limits, so just publish develop only twice a day
+        - cron: "0 7/12 * * *"
+concurrency: ${{ github.workflow }}-${{ github.ref_name }}
+permissions: {}
+jobs:
+    buildx:
+        name: Docker Buildx
+        runs-on: ubuntu-24.04
+        environment: ${{ github.event_name != 'pull_request' && 'dockerhub' || '' }}
+        permissions:
+            id-token: write # needed for signing the images with GitHub OIDC Token
+            packages: write # needed for publishing packages to GHCR
+        env:
+            TEST_TAG: vectorim/element-web:test
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0 # needed for docker-package to be able to calculate the version
+
+            - name: Install Cosign
+              uses: sigstore/cosign-installer@d7d6bc7722e3daa8354c50bcb52f4837da5e9b6a # v3
+              if: github.event_name != 'pull_request'
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
+
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+              with:
+                  install: true
+
+            - name: Login to Docker Hub
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
+              if: github.event_name != 'pull_request'
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+            - name: Login to GitHub Container Registry
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
+              if: github.event_name != 'pull_request'
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.repository_owner }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Build and load
+              id: test-build
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              with:
+                  context: .
+                  load: true
+
+            - name: Test the image
+              env:
+                  IMAGEID: ${{ steps.test-build.outputs.imageid }}
+              timeout-minutes: 2
+              run: |
+                  set -x
+
+                  # Make a fake module to test the image
+                  MODULE_PATH="modules/module_name/index.js"
+                  mkdir -p $(dirname $MODULE_PATH)
+                  echo 'alert("Testing");' > $MODULE_PATH
+
+                  # Spin up a container of the image
+                  ELEMENT_WEB_PORT=8181
+                  CONTAINER_ID=$(
+                      docker run \
+                          --rm \
+                          -e "ELEMENT_WEB_PORT=$ELEMENT_WEB_PORT" \
+                          -dp "$ELEMENT_WEB_PORT:$ELEMENT_WEB_PORT" \
+                          -v $(pwd)/modules:/modules \
+                          "$IMAGEID" \
+                  )
+
+                  # Run some smoke tests
+                  wget --retry-connrefused --tries=5 -q --wait=3 --spider "http://localhost:$ELEMENT_WEB_PORT/modules/module_name/index.js"
+                  MODULE_0=$(curl "http://localhost:$ELEMENT_WEB_PORT/config.json" | jq -r .modules[0])
+                  test "$MODULE_0" = "/${MODULE_PATH}"
+
+                  # Check healthcheck
+                  until test "$(docker inspect -f {{.State.Health.Status}} $CONTAINER_ID)" == "healthy"; do
+                      sleep 1
+                  done
+
+                  # Clean up
+                  docker stop "$CONTAINER_ID"
+
+            - name: Docker meta
+              id: meta
+              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5
+              if: github.event_name != 'pull_request'
+              with:
+                  images: |
+                      vectorim/element-web
+                      ghcr.io/element-hq/element-web
+                  tags: |
+                      type=ref,event=branch
+                      type=ref,event=tag
+                  flavor: |
+                      latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
+
+            - name: Build and push
+              id: build-and-push
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              if: github.event_name != 'pull_request'
+              with:
+                  context: .
+                  push: true
+                  platforms: linux/amd64,linux/arm64
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+
+            - name: Sign the images with GitHub OIDC Token
+              env:
+                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
+                  TAGS: ${{ steps.meta.outputs.tags }}
+              if: github.event_name != 'pull_request'
+              run: |
+                  images=""
+                  for tag in ${TAGS}; do
+                      images+="${tag}@${DIGEST} "
+                  done
+                  cosign sign --yes ${images}
+
+            - name: Update repo description
+              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
+              if: github.event_name != 'pull_request'
+              continue-on-error: true
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
+                  repository: vectorim/element-web

.github/workflows/dockerhub.yaml

@@ -1,79 +0,0 @@
-name: Dockerhub
-on:
-    workflow_dispatch: {}
-    push:
-        tags: [v*]
-    schedule:
-        # This job can take a while, and we have usage limits, so just publish develop only twice a day
-        - cron: "0 7/12 * * *"
-concurrency: ${{ github.workflow }}-${{ github.ref_name }}
-permissions: {}
-jobs:
-    buildx:
-        name: Docker Buildx
-        runs-on: ubuntu-24.04
-        environment: dockerhub
-        permissions:
-            id-token: write # needed for signing the images with GitHub OIDC Token
-        steps:
-            - uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0 # needed for docker-package to be able to calculate the version
-
-            - name: Install Cosign
-              uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
-
-            - name: Set up QEMU
-              uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # v3
-
-            - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3
-              with:
-                  install: true
-
-            - name: Login to Docker Hub
-              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
-              with:
-                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-            - name: Docker meta
-              id: meta
-              uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
-              with:
-                  images: |
-                      vectorim/element-web
-                  tags: |
-                      type=ref,event=branch
-                      type=ref,event=tag
-                  flavor: |
-                      latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
-
-            - name: Build and push
-              id: build-and-push
-              uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
-              with:
-                  context: .
-                  push: true
-                  platforms: linux/amd64,linux/arm64
-                  tags: ${{ steps.meta.outputs.tags }}
-                  labels: ${{ steps.meta.outputs.labels }}
-
-            - name: Sign the images with GitHub OIDC Token
-              env:
-                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
-                  TAGS: ${{ steps.meta.outputs.tags }}
-              run: |
-                  images=""
-                  for tag in ${TAGS}; do
-                      images+="${tag}@${DIGEST} "
-                  done
-                  cosign sign --yes ${images}
-
-            - name: Update repo description
-              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
-              continue-on-error: true
-              with:
-                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-                  repository: vectorim/element-web

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

@@ -54,6 +54,17 @@ jobs:
               with:
                   repository: element-hq/element-web
 
+            # Restore playwright-results.json file, which records the execution time of each test file.
+            # The splitTests function uses this file for sharding.
+            # We do this in the build stage to ensure it remains consistent if a playwright test got manually restarted
+            - name: Restore playwright-results.json
+              uses: actions/cache/restore@v4
+              with:
+                  path: playwright-results.json
+                  key: playwright-results
+                  restore-keys: |
+                      playwright-results-*
+
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
@@ -77,15 +88,17 @@ jobs:
               env:
                   CI_PACKAGE: true
                   VERSION: "${{ steps.layered_build.outputs.VERSION }}"
-              run: |
-                  yarn build
+              run: yarn build
 
             - name: Upload Artifact
               uses: actions/upload-artifact@v4
               with:
-                  name: webapp
-                  path: webapp
+                  name: build
+                  path: |
+                      webapp
+                      playwright-results.json
                   retention-days: 1
+                  if-no-files-found: error
 
             - name: Calculate runner variables
               id: runner-vars
@@ -128,6 +141,8 @@ jobs:
                       project: Dendrite
                     - runAllTests: false
                       project: Pinecone
+        env:
+            SHARD_BLOB_NAME: blob-report-${{ matrix.project }}-${{ matrix.runner }}
         steps:
             - uses: actions/checkout@v4
               with:
@@ -137,8 +152,7 @@ jobs:
             - name: 📥 Download artifact
               uses: actions/download-artifact@v4
               with:
-                  name: webapp
-                  path: webapp
+                  name: build
 
             - uses: actions/setup-node@v4
               with:
@@ -174,63 +188,77 @@ jobs:
             - name: Run Playwright tests
               run: |
                   yarn playwright test \
-                      --shard "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}" \
                       --project="${{ matrix.project }}" \
                       ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}
+              env:
+                  SHARD: "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}"
+                  PLAYWRIGHT_BLOB_OUTPUT_FILE: ${{ env.SHARD_BLOB_NAME }}.zip
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
               uses: actions/upload-artifact@v4
               with:
-                  name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
-                  path: blob-report
+                  name: ${{ env.SHARD_BLOB_NAME }}
+                  path: ${{ env.SHARD_BLOB_NAME }}.zip
                   retention-days: 1
+                  if-no-files-found: error
 
-    complete:
-        name: end-to-end-tests
+    report:
+        name: Report results
         needs: playwright
-        if: always()
+        if: ${{ !cancelled() && inputs.skip != true }}
         runs-on: ubuntu-24.04
         steps:
             - uses: actions/checkout@v4
-              if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - uses: actions/setup-node@v4
-              if: inputs.skip != true
               with:
                   cache: "yarn"
                   node-version: "lts/*"
 
             - name: Install dependencies
-              if: inputs.skip != true
               run: yarn install --frozen-lockfile
 
             - name: Download blob reports from GitHub Actions Artifacts
-              if: inputs.skip != true
               uses: actions/download-artifact@v4
               with:
-                  pattern: all-blob-reports-*
+                  pattern: blob-report-*
                   path: all-blob-reports
                   merge-multiple: true
 
             - name: Merge into HTML Report
-              if: inputs.skip != true
-              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,json,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
               env:
                   # Only pass creds to the flaky-reporter on main branch runs
                   GITHUB_TOKEN: ${{ github.ref_name == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}
+                  PLAYWRIGHT_JSON_OUTPUT_NAME: playwright-results.json
+
+            - name: Cache playwright-results.json
+              uses: actions/cache/save@v4
+              with:
+                  path: playwright-results.json
+                  key: playwright-results-${{ github.run_id }}
 
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
-              if: always() && inputs.skip != true
+              if: always()
               uses: actions/upload-artifact@v4
               with:
                   name: html-report
                   path: playwright-report
                   retention-days: 14
+                  if-no-files-found: error
 
-            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
+    complete:
+        name: end-to-end-tests
+        needs:
+            - playwright
+            - report
+        if: ${{ !cancelled() }}
+        runs-on: ubuntu-24.04
+        steps:
+            - if: needs.playwright.result == 'failure' || needs.report.result == 'failure'
               run: exit 1

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

@@ -23,7 +23,7 @@ jobs:
 
             - name: Create Pull Request
               id: cpr
-              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
+              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/playwright-image-updates

.github/workflows/release.yml

@@ -19,6 +19,7 @@ jobs:
             contents: write
             issues: write
             pull-requests: read
+            id-token: write
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
@@ -50,7 +51,7 @@ jobs:
         permissions:
             checks: read
         steps:
-            - name: Wait for dockerhub
+            - name: Wait for docker build
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
               with:
                   ref: master

.github/workflows/tests.yml

@@ -64,6 +64,16 @@ jobs:
               id: cpu-cores
               uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
 
+            # Restore tenbin-report.json file, which records the execution time of each test file.
+            # @tenbin/jest/sequencer uses this file for sharding.
+            - name: Restore tenbin-report.json
+              uses: actions/cache/restore@v4
+              with:
+                  path: tenbin-report.json
+                  key: tenbin-report
+                  restore-keys: |
+                      tenbin-report-*
+
             - name: Run tests
               run: |
                   yarn test \
@@ -78,6 +88,13 @@ jobs:
                   # tell jest to use coloured output
                   FORCE_COLOR: true
 
+            # @tenbin/jest/reporter generates tenbin-report.json for each shard.
+            - name: Upload tenbin-report.json
+              uses: actions/upload-artifact@v4
+              with:
+                  name: tenbin-report-${{ matrix.runner }}
+                  path: tenbin-report.json
+
             - name: Move coverage files into place
               if: env.ENABLE_COVERAGE == 'true'
               run: mv coverage/lcov.info coverage/${{ steps.setupNode.outputs.node-version }}-${{ matrix.runner }}.lcov.info
@@ -104,7 +121,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@119b3320db3f04d89e91df840844b92d57ce3468
+              uses: guibranco/github-status-action-v2@5ef6e175c333bc629f3718b083c8a2ff6e0bbfbc
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success
@@ -112,3 +129,16 @@ jobs:
                   context: SonarCloud Code Analysis
                   sha: ${{ github.sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+            # Download, merge & upload tenbin-report.json
+            - uses: actions/download-artifact@v4
+              with:
+                  path: tenbin-report
+                  pattern: tenbin-report-*
+            - name: Merge  tenbin-report
+              run: jq -s add tenbin-report/**/tenbin-report.json > tenbin-report.json
+            - name: Cache tenbin-report.json
+              uses: actions/cache/save@v4
+              with:
+                  path: tenbin-report.json
+                  key: tenbin-report-${{ github.run_id }}

.github/workflows/update-jitsi.yml

@@ -23,7 +23,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
+              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

CHANGELOG.md

@@ -1,3 +1,98 @@
+Changes in [1.11.95](https://github.com/element-hq/element-web/releases/tag/v1.11.95) (2025-03-11)
+==================================================================================================
+## ✨ Features
+
+* Room List Store: Filter rooms by active space ([#29399](https://github.com/element-hq/element-web/pull/29399)). Contributed by @MidhunSureshR.
+* Room List - Update the room list store on actions from the dispatcher ([#29397](https://github.com/element-hq/element-web/pull/29397)). Contributed by @MidhunSureshR.
+* Room List  - Implement a minimal view model ([#29357](https://github.com/element-hq/element-web/pull/29357)). Contributed by @MidhunSureshR.
+* New room list: add space menu in room header ([#29352](https://github.com/element-hq/element-web/pull/29352)). Contributed by @florianduros.
+* Room List - Store sorted rooms in skip list ([#29345](https://github.com/element-hq/element-web/pull/29345)). Contributed by @MidhunSureshR.
+* New room list: add dial to search section ([#29359](https://github.com/element-hq/element-web/pull/29359)). Contributed by @florianduros.
+* New room list: add compose menu for spaces in header ([#29347](https://github.com/element-hq/element-web/pull/29347)). Contributed by @florianduros.
+* Use EditInPlace control for Identity Server picker to improve a11y ([#29280](https://github.com/element-hq/element-web/pull/29280)). Contributed by @Half-Shot.
+* First step to add header to new room list ([#29320](https://github.com/element-hq/element-web/pull/29320)). Contributed by @florianduros.
+* Add Windows 64-bit arm link and remove 32-bit link on compatibility page ([#29312](https://github.com/element-hq/element-web/pull/29312)). Contributed by @t3chguy.
+* Honour the backup disable flag from Element X ([#29290](https://github.com/element-hq/element-web/pull/29290)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* Fix edited code block width ([#29394](https://github.com/element-hq/element-web/pull/29394)). Contributed by @florianduros.
+* new room list: keep space name in one line in header ([#29369](https://github.com/element-hq/element-web/pull/29369)). Contributed by @florianduros.
+* Dismiss "Key storage out of sync" toast when secrets received ([#29348](https://github.com/element-hq/element-web/pull/29348)). Contributed by @richvdh.
+* Minor CSS fixes for the new room list ([#29334](https://github.com/element-hq/element-web/pull/29334)). Contributed by @florianduros.
+* Add padding to room header icon ([#29271](https://github.com/element-hq/element-web/pull/29271)). Contributed by @langleyd.
+
+
+Changes in [1.11.94](https://github.com/element-hq/element-web/releases/tag/v1.11.94) (2025-02-27)
+==================================================================================================
+## 🐛 Bug Fixes
+
+* [Backport staging] fix: /tmp/element-web-config may already exist preventing the container from booting up ([#29377](https://github.com/element-hq/element-web/pull/29377)). Contributed by @RiotRobot.
+
+
+Changes in [1.11.93](https://github.com/element-hq/element-web/releases/tag/v1.11.93) (2025-02-25)
+==================================================================================================
+## ✨ Features
+
+* [backport] Dynamically load Element Web modules in Docker entrypoint ([#29358](https://github.com/element-hq/element-web/pull/29358)). Contributed by @t3chguy.
+* ChangeRecoveryKey: error handling ([#29262](https://github.com/element-hq/element-web/pull/29262)). Contributed by @richvdh.
+* Dehydration: enable dehydrated device on "Set up recovery" ([#29265](https://github.com/element-hq/element-web/pull/29265)). Contributed by @richvdh.
+* Render reason for invite rejection. ([#29257](https://github.com/element-hq/element-web/pull/29257)). Contributed by @Half-Shot.
+* New room list: add search section ([#29251](https://github.com/element-hq/element-web/pull/29251)). Contributed by @florianduros.
+* New room list: hide favourites and people meta spaces ([#29241](https://github.com/element-hq/element-web/pull/29241)). Contributed by @florianduros.
+* New Room List: Create new labs flag ([#29239](https://github.com/element-hq/element-web/pull/29239)). Contributed by @MidhunSureshR.
+* Stop URl preview from covering message box ([#29215](https://github.com/element-hq/element-web/pull/29215)). Contributed by @edent.
+* Rename "security key" into "recovery key" ([#29217](https://github.com/element-hq/element-web/pull/29217)). Contributed by @florianduros.
+* Add new verification section to user profile ([#29200](https://github.com/element-hq/element-web/pull/29200)). Contributed by @MidhunSureshR.
+* Initial support for runtime modules ([#29104](https://github.com/element-hq/element-web/pull/29104)). Contributed by @t3chguy.
+* Add `Forgot recovery key?` button to encryption tab ([#29202](https://github.com/element-hq/element-web/pull/29202)). Contributed by @florianduros.
+* Add KeyIcon to key storage out of sync toast ([#29201](https://github.com/element-hq/element-web/pull/29201)). Contributed by @florianduros.
+* Improve rendering of empty topics in the timeline  ([#29152](https://github.com/element-hq/element-web/pull/29152)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Fix font scaling in member list ([#29285](https://github.com/element-hq/element-web/pull/29285)). Contributed by @florianduros.
+* Grow member list search field when resizing the right panel ([#29267](https://github.com/element-hq/element-web/pull/29267)). Contributed by @langleyd.
+* Don't reload roomview on offline connectivity check ([#29243](https://github.com/element-hq/element-web/pull/29243)). Contributed by @dbkr.
+* Respect user's 12/24 hour preference consistently ([#29237](https://github.com/element-hq/element-web/pull/29237)). Contributed by @t3chguy.
+* Restore the accessibility role on call views ([#29225](https://github.com/element-hq/element-web/pull/29225)). Contributed by @robintown.
+* Revert `GoToHome` keyboard shortcut to `Ctrl`–`Shift`–`H` on macOS ([#28577](https://github.com/element-hq/element-web/pull/28577)). Contributed by @gy-mate.
+* Encryption tab: display correct encryption panel when user cancels the reset identity flow ([#29216](https://github.com/element-hq/element-web/pull/29216)). Contributed by @florianduros.
+
+
+Changes in [1.11.92](https://github.com/element-hq/element-web/releases/tag/v1.11.92) (2025-02-11)
+==================================================================================================
+## ✨ Features
+
+* [Backport staging] Log when we show, and hide, encryption setup toasts ([#29238](https://github.com/element-hq/element-web/pull/29238)). Contributed by @richvdh.
+* Make profile header section match the designs ([#29163](https://github.com/element-hq/element-web/pull/29163)). Contributed by @MidhunSureshR.
+* Always show back button in the right panel ([#29128](https://github.com/element-hq/element-web/pull/29128)). Contributed by @MidhunSureshR.
+* Schedule dehydration on reload if the dehydration key is already cached locally ([#29021](https://github.com/element-hq/element-web/pull/29021)). Contributed by @uhoreg.
+* update to twemoji 15.1.0 ([#29115](https://github.com/element-hq/element-web/pull/29115)). Contributed by @ara4n.
+* Update matrix-widget-api ([#29112](https://github.com/element-hq/element-web/pull/29112)). Contributed by @toger5.
+* Allow navigating through the memberlist using up/down keys ([#28949](https://github.com/element-hq/element-web/pull/28949)). Contributed by @MidhunSureshR.
+* Style room header icons and facepile for toggled state ([#28968](https://github.com/element-hq/element-web/pull/28968)). Contributed by @MidhunSureshR.
+* Move threads header below base card header ([#28969](https://github.com/element-hq/element-web/pull/28969)). Contributed by @MidhunSureshR.
+* Add `Advanced` section to the user settings encryption tab ([#28804](https://github.com/element-hq/element-web/pull/28804)). Contributed by @florianduros.
+* Fix outstanding UX issues with replies/mentions/keyword notifs ([#28270](https://github.com/element-hq/element-web/pull/28270)). Contributed by @taffyko.
+* Distinguish room state and timeline events when dealing with widgets ([#28681](https://github.com/element-hq/element-web/pull/28681)). Contributed by @robintown.
+* Switch OIDC primarily to new `/auth_metadata` API ([#29019](https://github.com/element-hq/element-web/pull/29019)). Contributed by @t3chguy.
+* More memberlist changes ([#29069](https://github.com/element-hq/element-web/pull/29069)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Wire up the "Forgot recovery key" button for the "Key storage out of sync" toast ([#29190](https://github.com/element-hq/element-web/pull/29190)). Contributed by @RiotRobot.
+* Encryption tab: hide `Advanced` section when the key storage is out of sync ([#29129](https://github.com/element-hq/element-web/pull/29129)). Contributed by @florianduros.
+* Fix share button in discovery settings being disabled incorrectly ([#29151](https://github.com/element-hq/element-web/pull/29151)). Contributed by @t3chguy.
+* Ensure switching rooms does not wrongly focus timeline search ([#29153](https://github.com/element-hq/element-web/pull/29153)). Contributed by @t3chguy.
+* Stop showing a dialog prompting the user to enter an old recovery key ([#29143](https://github.com/element-hq/element-web/pull/29143)). Contributed by @richvdh.
+* Make themed widgets reflect the effective theme ([#28342](https://github.com/element-hq/element-web/pull/28342)). Contributed by @robintown.
+* support non-VS16 emoji ligatures in TwemojiMozilla ([#29100](https://github.com/element-hq/element-web/pull/29100)). Contributed by @ara4n.
+* e2e test: Verify session with the encryption tab instead of the security \& privacy tab ([#29090](https://github.com/element-hq/element-web/pull/29090)). Contributed by @florianduros.
+* Work around cloudflare R2 / aws client incompatability ([#29086](https://github.com/element-hq/element-web/pull/29086)). Contributed by @dbkr.
+* Fix identity server settings visibility ([#29083](https://github.com/element-hq/element-web/pull/29083)). Contributed by @dbkr.
+
+
 Changes in [1.11.91](https://github.com/element-hq/element-web/releases/tag/v1.11.91) (2025-01-28)
 ==================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,3 +1,5 @@
+# syntax=docker.io/docker/dockerfile:1.14-labs
+
 # Builder
 FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
 
@@ -8,7 +10,7 @@ ARG JS_SDK_BRANCH="master"
 
 WORKDIR /src
 
-COPY . /src
+COPY --exclude=docker . /src
 RUN /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=200000 install
 RUN /src/scripts/docker-package.sh
@@ -19,11 +21,15 @@ RUN cp /src/config.sample.json /src/webapp/config.json
 # App
 FROM nginx:alpine-slim
 
+# Install jq and moreutils for sponge, both used by our entrypoints
+RUN apk add jq moreutils
+
 COPY --from=builder /src/webapp /app
 
 # Override default nginx config. Templates in `/etc/nginx/templates` are passed
 # through `envsubst` by the nginx docker image entry point.
 COPY /docker/nginx-templates/* /etc/nginx/templates/
+COPY /docker/docker-entrypoint.d/* /docker-entrypoint.d/
 
 # Tell nginx to put its pidfile elsewhere, so it can run as non-root
 RUN sed -i -e 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf
@@ -40,3 +46,5 @@ USER nginx
 
 # HTTP listen port
 ENV ELEMENT_WEB_PORT=80
+
+HEALTHCHECK --start-period=5s CMD wget -q --spider http://localhost:$ELEMENT_WEB_PORT/config.json

babel.config.js

@@ -31,5 +31,7 @@ module.exports = {
 
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
+        ["@babel/plugin-proposal-decorators", { version: "2023-11" }], // only needed by the js-sdk
+        "@babel/plugin-transform-class-static-block", // only needed by the js-sdk for decorators
     ],
 };

docker/docker-entrypoint.d/18-load-element-modules.sh

@@ -0,0 +1,34 @@
+#!/bin/sh
+
+# Loads modules from `/modules` into config.json's `modules` field
+
+set -e
+
+entrypoint_log() {
+    if [ -z "${NGINX_ENTRYPOINT_QUIET_LOGS:-}" ]; then
+        echo "$@"
+    fi
+}
+
+# Copy these config files as a base
+mkdir -p /tmp/element-web-config
+cp /app/config*.json /tmp/element-web-config/
+
+# If there are modules to be loaded
+if [ -d "/modules" ]; then
+    cd /modules
+
+    for MODULE in *
+    do
+        # If the module has a package.json, use its main field as the entrypoint
+        ENTRYPOINT="index.js"
+        if [ -f "/modules/$MODULE/package.json" ]; then
+            ENTRYPOINT=$(jq -r '.main' "/modules/$MODULE/package.json")
+        fi
+
+        entrypoint_log "Loading module $MODULE with entrypoint $ENTRYPOINT"
+
+        # Append the module to the config
+        jq ".modules += [\"/modules/$MODULE/$ENTRYPOINT\"]" /tmp/element-web-config/config.json | sponge /tmp/element-web-config/config.json
+    done
+fi

docker/nginx-templates/default.conf.template

@@ -18,8 +18,12 @@ server {
     }
     # covers config.json and config.hostname.json requests as it is prefix.
     location /config {
+        root /tmp/element-web-config;
         add_header Cache-Control "no-cache";
     }
+    location /modules {
+        alias /modules;
+    }
     # redirect server error pages to the static page /50x.html
     #
     error_page   500 502 503 504  /50x.html;

docs/MVVM.md

@@ -0,0 +1,67 @@
+# MVVM
+
+General description of the pattern can be found [here](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel). But the gist of it is that you divide your code into three sections:
+
+1. Model: This is where the business logic and data resides.
+2. View Model: This code exists to provide the logic necessary for the UI. It directly uses the Model code.
+3. View: This is the UI code itself and depends on the view model.
+
+If you do MVVM right, your view should be dumb i.e it gets data from the view model and merely displays it.
+
+### Practical guidelines for MVVM in element-web
+
+#### Model
+
+This is anywhere your data or business logic comes from. If your view model is accessing something simple exposed from `matrix-js-sdk`, then the sdk is your model. If you're using something more high level in element-web to get your data/logic (eg: `MemberListStore`), then that becomes your model.
+
+#### View Model
+
+1. View model is always a custom react hook named like `useFooViewModel()`.
+2. The return type of your view model (known as view state) must be defined as a typescript interface:
+    ```ts
+    inteface FooViewState {
+    	somethingUseful: string;
+    	somethingElse: BarType;
+    	update: () => Promise<void>
+    	...
+    }
+    ```
+3. Any react state that your UI needs must be in the view model.
+
+#### View
+
+1. Views are simple react components (eg: `FooView`).
+2. Views usually start by calling the view model hook, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = (props: IProps) => {
+    	const vm = useFooViewModel();
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+3. Views are also allowed to accept the view model as a prop, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = ({ vm }: IProps) => {
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+4. Multiple views can share the same view model if necessary.
+
+### Benefits
+
+1. MVVM forces a separation of concern i.e we will no longer have large react components that have a lot of state and rendering code mixed together. This improves code readability and makes it easier to introduce changes.
+2. Introduces the possibility of code reuse. You can reuse an old view model with a new view or vice versa.
+3. Adding to the point above, in future you could import element-web view models to your project and supply your own views thus creating something similar to the [hydrogen sdk](https://github.com/element-hq/hydrogen-web/blob/master/doc/SDK.md).
+
+### Example
+
+We started experimenting with MVVM in the redesigned memberlist, you can see the code [here](https://github.com/vector-im/element-web/blob/develop/src/components/views/rooms/MemberList/MemberListView.tsx).

docs/config.md

@@ -155,7 +155,7 @@ complete re-branding/private labeling, a more personalised experience can be ach
     3. `show_once`: Optional. If true then the notice will only be shown once per device.
 18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
 19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-20. `force_verification`: If true, users must verify new logins (eg. with another device / their security key)
+20. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
 
 ### `desktop_builds` and `mobile_builds`
 
@@ -163,14 +163,14 @@ These two options describe the various availability for the application. When th
 such as trying to get the user to use an Android app or the desktop app for encrypted search, the config options will be looked
 at to see if the link should be to somewhere else.
 
-Starting with `desktop_builds`, the following subproperties are available:
+Starting with `desktop_builds`, the following sub-properties are available:
 
 1. `available`: Required. When `true`, the desktop app can be downloaded from somewhere.
 2. `logo`: Required. A URL to a logo (SVG), intended to be shown at 24x24 pixels.
 3. `url`: Required. The download URL for the app. This is used as a hyperlink.
 4. `url_macos`: Optional. Direct link to download macOS desktop app.
-5. `url_win32`: Optional. Direct link to download Windows 32-bit desktop app.
-6. `url_win64`: Optional. Direct link to download Windows 64-bit desktop app.
+5. `url_win64`: Optional. Direct link to download Windows x86 64-bit desktop app.
+6. `url_win64arm`: Optional. Direct link to download Windows ARM 64-bit desktop app.
 7. `url_linux`: Optional. Direct link to download Linux desktop app.
 
 When `desktop_builds` is not specified at all, the app will assume desktop downloads are available from https://element.io

docs/install.md

@@ -66,6 +66,18 @@ on other runtimes may require root privileges. To resolve this, either run the
 image as root (`docker run --user 0`) or, better, change the port that nginx
 listens on via the `ELEMENT_WEB_PORT` environment variable.
 
+[Element Web Modules](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api) can be dynamically loaded
+by being made available (e.g. via bind mount) in a directory within `/modules/`.
+The default entrypoint will be index.js in that directory but can be overridden if a package.json file is found with a `main` directive.
+These modules will be presented in a `/modules` subdirectory within the webroot, and automatically added to the config.json `modules` field.
+
+If you wish to use docker in read-only mode,
+you should follow the [upstream instructions](https://hub.docker.com/_/nginx#:~:text=Running%20nginx%20in%20read%2Donly%20mode)
+but additionally include the following directories:
+
+- /tmp/
+- /etc/nginx/conf.d/
+
 The behaviour of the docker image can be customised via the following
 environment variables:
 

docs/labs.md

@@ -112,3 +112,7 @@ Unreliable in encrypted rooms.
 ## Knock rooms (`feature_ask_to_join`) [In Development]
 
 Enables knock feature for rooms. This allows users to ask to join a room.
+
+## New room list (`feature_new_room_list`) [In Development]
+
+Enable the new room list that is currently in development.

docs/release.md

@@ -128,7 +128,7 @@ flowchart TD
 
     subgraph Deploying
         D1[\Deploy staging.element.io/]
-        D2[\Check dockerhub/]
+        D2[\Check docker build/]
         D3[\Deploy app.element.io/]
         D4[\Check desktop package/]
 
@@ -213,10 +213,10 @@ switched back to the version of the dependency from the master branch to not lea
 # Deploying
 
 We ship the SDKs to npm, this happens as part of the release process.
-We ship Element Web to dockerhub, `*.element.io`, and packages.element.io.
+We ship Element Web to dockerhub, ghcr.io, `*.element.io`, and packages.element.io.
 We ship Element Desktop to packages.element.io.
 
-- [ ] Check that element-web has shipped to dockerhub
+- [ ] Check that element-web has shipped to dockerhub & ghcr.io
 - [ ] Check that the staging [deployment](https://github.com/element-hq/element-web/actions/workflows/deploy.yml) has completed successfully
 - [ ] Test staging.element.io
 

jest.config.ts

@@ -54,11 +54,12 @@ const config: Config = {
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
     prettierPath: null,
     moduleDirectories: ["node_modules", "test/test-utils"],
+    testSequencer: "@tenbin/jest/sequencer",
 };
 
 // if we're running under GHA, enable the GHA reporter
 if (env["GITHUB_ACTIONS"] !== undefined) {
-    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
+    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary", "@tenbin/jest/reporter"];
 
     // if we're running against the develop branch, also enable the slow test reporter
     if (env["GITHUB_REF"] == "refs/heads/develop") {

knip.ts

@@ -19,6 +19,7 @@ export default {
     ignore: [
         // Keep for now
         "src/hooks/useLocalStorageState.ts",
+        "src/hooks/useTimeout.ts",
         "src/components/views/elements/InfoTooltip.tsx",
         "src/components/views/elements/StyledCheckbox.tsx",
     ],

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.91",
+    "version": "1.11.95",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -62,19 +62,19 @@
         "test": "jest",
         "test:playwright": "playwright test",
         "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 --grep @screenshot --project=Chrome",
+        "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
+        "@playwright/test": "1.50.1",
         "@types/react": "18.3.18",
         "@types/react-dom": "18.3.5",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001697",
+        "caniuse-lite": "1.0.30001701",
+        "testcontainers": "10.20.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -84,16 +84,16 @@
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.29.0",
+        "@matrix-org/analytics-events": "^0.29.2",
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^8.0.0",
+        "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^3.0.0",
-        "@vector-im/compound-web": "^7.6.1",
-        "@vector-im/matrix-wysiwyg": "2.38.0",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^7.7.2",
+        "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -138,7 +138,7 @@
         "png-chunks-extract": "^1.0.0",
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
-        "re-resizable": "6.10.3",
+        "re-resizable": "6.11.2",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
@@ -158,13 +158,14 @@
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
-        "@axe-core/playwright": "^4.8.1",
         "@babel/core": "^7.12.10",
         "@babel/eslint-parser": "^7.12.10",
         "@babel/eslint-plugin": "^7.12.10",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-transform-class-properties": "^7.12.1",
+        "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-logical-assignment-operators": "^7.20.7",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.12.1",
         "@babel/plugin-transform-numeric-separator": "^7.12.7",
@@ -176,13 +177,15 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
+        "@element-hq/element-web-playwright-common": "^1.1.5",
         "@peculiar/webcrypto": "^1.4.3",
-        "@playwright/test": "^1.40.1",
+        "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^3.0.0",
         "@stylistic/eslint-plugin": "^3.0.0",
         "@svgr/webpack": "^8.0.0",
-        "@testcontainers/postgresql": "^10.16.0",
+        "@tenbin/jest": "^0.5.0",
+        "@tenbin/playwright": "^0.5.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
@@ -218,12 +221,12 @@
         "@typescript-eslint/eslint-plugin": "^8.19.0",
         "@typescript-eslint/parser": "^8.19.0",
         "babel-jest": "^29.0.0",
-        "babel-loader": "^9.0.0",
+        "babel-loader": "^10.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "blob-polyfill": "^9.0.0",
         "chokidar": "^4.0.0",
         "concurrently": "^9.0.0",
-        "copy-webpack-plugin": "^12.0.0",
+        "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
         "cronstrue": "^2.41.0",
         "css-loader": "^7.0.0",
@@ -257,13 +260,12 @@
         "jsqr": "^1.4.0",
         "knip": "^5.36.2",
         "lint-staged": "^15.0.2",
-        "mailpit-api": "^1.0.5",
         "matrix-web-i18n": "^3.2.1",
         "mini-css-extract-plugin": "2.9.2",
         "minimist": "^1.2.6",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
-        "playwright-core": "^1.45.1",
+        "playwright-core": "^1.51.0",
         "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
@@ -274,21 +276,20 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.4.2",
+        "prettier": "3.5.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "strip-ansi": "^7.1.0",
         "stylelint": "^16.13.0",
         "stylelint-config-standard": "^37.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^10.16.0",
+        "testcontainers": "^10.20.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.7.3",
+        "typescript": "5.8.2",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",

playwright.config.ts

@@ -7,8 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { defineConfig, devices } from "@playwright/test";
+import { splitTests } from "@tenbin/playwright";
 
-import { Options } from "./playwright/services";
+import { type WorkerOptions } from "./playwright/services";
 
 const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
 
@@ -21,7 +22,7 @@ const chromeProject = {
     },
 };
 
-export default defineConfig<Options>({
+export default defineConfig<WorkerOptions>({
     projects: [
         {
             name: "Chrome",
@@ -83,6 +84,7 @@ export default defineConfig<Options>({
         url: `${baseURL}/config.json`,
         reuseExistingServer: true,
         timeout: (process.env.CI ? 30 : 120) * 1000,
+        stdout: "pipe",
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",
@@ -92,4 +94,11 @@ export default defineConfig<Options>({
     snapshotDir: "playwright/snapshots",
     snapshotPathTemplate: "{snapshotDir}/{testFilePath}/{arg}-{platform}{ext}",
     forbidOnly: !!process.env.CI,
+    testMatch: process.env.SHARD
+        ? splitTests({
+              shard: process.env.SHARD,
+              pattern: ["playwright/e2e/**/*.spec.ts"],
+              reportFile: "playwright-results.json",
+          })
+        : undefined,
 });

playwright/@types/playwright-core.d.ts

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

playwright/Dockerfile

@@ -1,9 +0,0 @@
-FROM mcr.microsoft.com/playwright:v1.49.1-noble
-
-WORKDIR /work
-
-# fonts-dejavu is needed for the same RTL rendering as on CI
-RUN apt-get update && apt-get -y install docker.io fonts-dejavu
-
-COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
-ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]

playwright/docker-entrypoint.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-npx playwright test --update-snapshots --reporter line $@

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

@@ -11,6 +11,7 @@ import { registerAccountMas } from "../oidc";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { TestClientServerAPI } from "../csAPI";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
+import { checkDeviceIsConnectedKeyBackup } from "./utils";
 
 // These tests register an account with MAS because then we go through the "normal" registration flow
 // and crypto gets set up. Using the 'user' fixture create a user and synthesizes an existing login,
@@ -24,8 +25,11 @@ test.describe("Encryption state after registration", () => {
         await page.getByRole("button", { name: "Continue" }).click();
         await registerAccountMas(page, mailpitClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
 
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
+        // Wait for the ui to load
+        await expect(page.locator(".mx_MatrixChat")).toBeVisible();
+
+        // Recovery is not set up yet
+        await checkDeviceIsConnectedKeyBackup(app, "1", true, false);
     });
 
     test("user is prompted to set up recovery", async ({ page, mailpitClient, app }, testInfo) => {

playwright/e2e/crypto/backups.spec.ts

@@ -58,8 +58,8 @@ test.describe("Backups", () => {
 
             // Create another
             await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-            await currentDialogLocator.getByLabel("Security Key").fill(securityKey);
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            await currentDialogLocator.getByLabel("Recovery Key").fill(securityKey);
             await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
 
             // Should be successful
@@ -90,8 +90,8 @@ test.describe("Backups", () => {
 
             // Try to create another
             await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-            // But cancel the security key dialog, to simulate not having the secret storage passphrase
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            // But cancel the recovery key dialog, to simulate not having the secret storage passphrase
             await currentDialogLocator.getByTestId("dialog-cancel-button").click();
 
             await expect(currentDialogLocator.getByRole("heading", { name: "Starting backup…" })).toBeVisible();

playwright/e2e/crypto/crypto.spec.ts

@@ -28,7 +28,7 @@ const checkDMRoom = async (page: Page) => {
 };
 
 const startDMWithBob = async (page: Page, bob: Bot) => {
-    await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();
+    await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
     await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
     await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
     await expect(
@@ -186,7 +186,7 @@ test.describe("Cryptography", function () {
         await page.getByRole("button", { name: "Clear cross-signing keys" }).click();
 
         // Enter the 4S key
-        await page.getByPlaceholder("Security Key").fill(secretStorageKey);
+        await page.getByPlaceholder("Recovery Key").fill(secretStorageKey);
         await page.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password

playwright/e2e/crypto/dehydration.spec.ts

@@ -6,21 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Locator, type Page } from "@playwright/test";
-
 import { test, expect } from "../../element-web-test";
-import { viewRoomSummaryByName } from "../right-panel/utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { completeCreateSecretStorageDialog, createBot, logIntoElement } from "./utils.ts";
 import { type Client } from "../../pages/client.ts";
+import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
-const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
-function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
-}
-
 test.use({
     displayName: NAME,
     synapseConfig: {
@@ -29,18 +22,6 @@ test.use({
             msc3814_enabled: true,
         },
     },
-    config: async ({ config, context }, use) => {
-        const wellKnown = {
-            ...config.default_server_config,
-            "org.matrix.msc3814": true,
-        };
-
-        await context.route("https://localhost/.well-known/matrix/client", async (route) => {
-            await route.fulfill({ json: wellKnown });
-        });
-
-        await use(config);
-    },
 });
 
 test.describe("Dehydration", () => {
@@ -57,36 +38,40 @@ test.describe("Dehydration", () => {
 
         await completeCreateSecretStorageDialog(page);
 
-        // Open the settings again
-        await app.settings.openUserSettings("Security & Privacy");
-
-        // The Security tab should indicate that there is a dehydrated device present
-        await expect(securityTab.getByText("Offline device enabled")).toBeVisible();
-
-        await app.settings.closeDialog();
+        await expectDehydratedDeviceEnabled(app);
 
         // the dehydrated device gets created with the name "Dehydrated
         // device".  We want to make sure that it is not visible as a normal
         // device.
         const sessionsTab = await app.settings.openUserSettings("Sessions");
         await expect(sessionsTab.getByText("Dehydrated device")).not.toBeVisible();
+    });
+
+    test("'Set up recovery' creates dehydrated device", async ({ app, credentials, page }) => {
+        await logIntoElement(page, credentials);
+
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
 
         await app.settings.closeDialog();
 
-        // now check that the user info right-panel shows the dehydrated device
-        // as a feature rather than as a normal device
-        await app.client.createRoom({ name: ROOM_NAME });
-
-        await viewRoomSummaryByName(page, app, ROOM_NAME);
-
-        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberListView")).toBeVisible();
-
-        await getMemberTileByName(page, NAME).click();
-        await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();
-
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Offline device enabled")).toBeVisible();
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Dehydrated device")).not.toBeVisible();
+        await expectDehydratedDeviceEnabled(app);
     });
 
     test("Reset recovery key during login re-creates dehydrated device", async ({
@@ -119,6 +104,40 @@ test.describe("Dehydration", () => {
         expect(dehydratedDeviceIds.length).toBe(1);
         expect(dehydratedDeviceIds[0]).not.toEqual(initialDehydratedDeviceIds[0]);
     });
+
+    test("'Reset cryptographic identity' removes dehydrated device", async ({ page, homeserver, app, credentials }) => {
+        await logIntoElement(page, credentials);
+
+        // Create a dehydrated device by setting up recovery (see "'Set up
+        // recovery' creates dehydrated device" test above)
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
+
+        await expectDehydratedDeviceEnabled(app);
+
+        // After recovery is set up, we reset our cryptographic identity, which
+        // should drop the dehydrated device.
+        await settingsDialogLocator.getByRole("button", { name: "Reset cryptographic identity" }).click();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expectDehydratedDeviceDisabled(app);
+    });
 });
 
 async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
@@ -134,3 +153,29 @@ async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
         );
     });
 }
+
+/** Wait for our user to have a dehydrated device */
+async function expectDehydratedDeviceEnabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(1);
+}
+
+/** Wait for our user to not have a dehydrated device */
+async function expectDehydratedDeviceDisabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(0);
+}

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

@@ -21,6 +21,7 @@ import {
     waitForVerificationRequest,
 } from "./utils";
 import { type Bot } from "../../pages/bot";
+import { Toasts } from "../../pages/toasts.ts";
 
 test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let aliceBotClient: Bot;
@@ -72,6 +73,51 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
     });
 
+    // Regression test for https://github.com/element-hq/element-web/issues/29110
+    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
+        // Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
+        // when we are in an encrypted room.
+        await aliceBotClient.createRoom({
+            initial_state: [
+                {
+                    type: "m.room.encryption",
+                    state_key: "",
+                    content: { algorithm: "m.megolm.v1.aes-sha2" },
+                },
+            ],
+        });
+
+        // In order to simulate a real environment more accurately, we need to slow down the arrival of the
+        // `m.secret.send` to-device messages. That's slightly tricky to do directly, so instead we delay the *outgoing*
+        // `m.secret.request` messages.
+        await page.route("**/_matrix/client/v3/sendToDevice/m.secret.request/**", async (route) => {
+            await route.fulfill({ json: {} });
+            await new Promise((f) => setTimeout(f, 1000));
+            await route.fetch();
+        });
+
+        await logIntoElement(page, credentials);
+
+        // Launch the verification request between alice and the bot
+        const verificationRequest = await initiateAliceVerificationRequest(page);
+
+        // Handle emoji SAS verification
+        const infoDialog = page.locator(".mx_InfoDialog");
+        // the bot chooses to do an emoji verification
+        const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1"));
+
+        // Handle emoji request and check that emojis are matching
+        await doTwoWaySasVerification(page, verifier);
+
+        await infoDialog.getByRole("button", { name: "They match" }).click();
+        await infoDialog.getByRole("button", { name: "Got it" }).click();
+
+        // There should be no toast (other than the notifications one)
+        const toasts = new Toasts(page);
+        await toasts.rejectToast("Notifications");
+        await toasts.assertNoToasts();
+    });
+
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
         // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
         await logIntoElement(page, credentials);
@@ -119,7 +165,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await logIntoElement(page, credentials);
 
         // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
 
         // Fill the passphrase
         const dialog = page.locator(".mx_Dialog");
@@ -136,15 +182,15 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
     });
 
-    test("Verify device with Security Key during login", async ({ page, app, credentials, homeserver }) => {
+    test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, credentials);
 
         // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
 
-        // Fill the security key
+        // Fill the recovery key
         const dialog = page.locator(".mx_Dialog");
-        await dialog.getByRole("button", { name: "use your Security Key" }).click();
+        await dialog.getByRole("button", { name: "use your Recovery Key" }).click();
         const aliceRecoveryKey = await aliceBotClient.getRecoveryKey();
         await dialog.locator("#mx_securityKey").fill(aliceRecoveryKey.encodedPrivateKey);
         await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();

playwright/e2e/crypto/event-shields.spec.ts

@@ -17,6 +17,7 @@ import {
     logIntoElement,
     logOutOfElement,
     verify,
+    waitForDevices,
 } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
@@ -144,25 +145,8 @@ test.describe("Cryptography", function () {
             // bob deletes his second device
             await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-            // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
-            async function awaitOneDevice(iterations = 1) {
-                const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByTestId("base-card-back-button").click();
-                await rightPanel.getByText("Bob").click();
-                const sessionCountText = await rightPanel
-                    .locator(".mx_UserInfo_devices")
-                    .getByText(" session", { exact: false })
-                    .textContent();
-                // cf https://github.com/vector-im/element-web/issues/26279: Element-R uses the wrong text here
-                if (sessionCountText != "1 session" && sessionCountText != "1 verified session") {
-                    if (iterations >= 10) {
-                        throw new Error(`Bob still has ${sessionCountText} after 10 iterations`);
-                    }
-                    await awaitOneDevice(iterations + 1);
-                }
-            }
-
-            await awaitOneDevice();
+            // wait for the logout to propagate.
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // close and reopen the room, to get the shield to update.
             await app.viewRoomByName("Bob");
@@ -285,11 +269,7 @@ test.describe("Cryptography", function () {
             // 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");
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // Our app is blocked from syncing while Bob sends his messages.
             await app.client.network.goOffline();

playwright/e2e/crypto/toasts.spec.ts

@@ -35,7 +35,7 @@ test.describe("Key storage out of sync toast", () => {
 
         await page.getByRole("button", { name: "Enter recovery key" }).click();
 
-        await page.getByRole("textbox", { name: "Security key" }).fill(recoveryKey.encodedPrivateKey);
+        await page.getByRole("textbox", { name: "Recovery Key" }).fill(recoveryKey.encodedPrivateKey);
         await page.getByRole("button", { name: "Continue" }).click();
 
         await expect(page.getByRole("button", { name: "Enter recovery key" })).not.toBeVisible();

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

@@ -8,9 +8,8 @@ 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 { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";
 import { type Client } from "../../pages/client";
 
 test.describe("User verification", () => {
@@ -33,13 +32,17 @@ test.describe("User verification", () => {
     });
 
     test("can receive a verification request when there is no existing DM", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -84,13 +87,17 @@ test.describe("User verification", () => {
     });
 
     test("can abort emoji verification when emoji mismatch", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -154,15 +161,3 @@ 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();
-}

playwright/e2e/crypto/utils.ts

@@ -145,11 +145,13 @@ export async function checkDeviceIsCrossSigned(app: ElementAppPage): Promise<voi
  * @param app -` ElementAppPage` wrapper for the playwright `Page`.
  * @param expectedBackupVersion - the version of the backup we expect to be connected to.
  * @param checkBackupPrivateKeyInCache - whether to check that the backup decryption key is cached locally
+ * @param checkBackupKeyIn4S - whether to check that the backup key is stored in 4S
  */
 export async function checkDeviceIsConnectedKeyBackup(
     app: ElementAppPage,
     expectedBackupVersion: string,
     checkBackupPrivateKeyInCache: boolean,
+    checkBackupKeyIn4S: boolean = true,
 ): Promise<void> {
     // Sanity check the given backup version: if it's null, something went wrong earlier in the test.
     if (!expectedBackupVersion) {
@@ -192,7 +194,7 @@ export async function checkDeviceIsConnectedKeyBackup(
     // The active backup version is as expected
     expect(activeBackupVersion).toBe(expectedBackupVersion);
     // The backup key is stored in 4S
-    expect(backupKeyIn4S).toBe(true);
+    if (checkBackupKeyIn4S) expect(backupKeyIn4S).toBe(true);
 
     if (checkBackupPrivateKeyInCache) {
         // The backup key is available locally
@@ -216,13 +218,13 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
 
     // if a securityKey was given, verify the new device
     if (securityKey !== undefined) {
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
 
-        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Security Key" });
+        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
         if (await useSecurityKey.isVisible()) {
             await useSecurityKey.click();
         }
-        // Fill in the security key
+        // Fill in the recovery key
         await page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
         await page.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
         await page.getByRole("button", { name: "Done" }).click();
@@ -249,15 +251,15 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 }
 
 /**
- * Open the encryption settings, and verify the current session using the security key.
+ * Open the encryption settings, and verify the current session using the recovery key.
  *
  * @param app - `ElementAppPage` wrapper for the playwright `Page`.
- * @param securityKey - The security key (i.e., 4S key), set up during a previous session.
+ * @param securityKey - The recovery key (i.e., 4S key), set up during a previous session.
  */
 export async function verifySession(app: ElementAppPage, securityKey: string) {
     const settings = await app.settings.openUserSettings("Encryption");
     await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Verify with Security Key" }).click();
+    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
     await app.page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
@@ -291,7 +293,7 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
  *
  * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
  *
- * Returns the security key
+ * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     await app.settings.openUserSettings("Security & Privacy");
@@ -319,9 +321,9 @@ export async function completeCreateSecretStorageDialog(
     const currentDialogLocator = page.locator(".mx_Dialog");
 
     await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-    // "Generate a Security Key" is selected by default
+    // "Generate a Recovery Key" is selected by default
     await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-    await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
+    await expect(currentDialogLocator.getByRole("heading", { name: "Save your Recovery Key" })).toBeVisible();
     await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
     // copy the recovery key to use it later
     const recoveryKey = await page.evaluate(() => navigator.clipboard.readText());
@@ -345,7 +347,7 @@ export async function completeCreateSecretStorageDialog(
 }
 
 /**
- * Click on copy and continue buttons to dismiss the security key dialog
+ * Click on copy and continue buttons to dismiss the recovery key dialog
  */
 export async function copyAndContinue(page: Page) {
     await page.getByRole("button", { name: "Copy" }).click();
@@ -502,3 +504,31 @@ export async function deleteCachedSecrets(page: Page) {
     });
     await page.reload();
 }
+
+/**
+ * Wait until the given user has a given number of devices.
+ * This function will check the device keys ten times and if
+ * the expected number of devices were not found by then, an
+ * error is thrown.
+ */
+export async function waitForDevices(
+    app: ElementAppPage,
+    userId: string,
+    expectedNumberOfDevices: number,
+): Promise<void> {
+    const result = await app.client.evaluate(
+        async (cli, { userId, expectedNumberOfDevices }) => {
+            for (let i = 0; i < 10; ++i) {
+                const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], true);
+                const deviceMap = userDeviceMap?.get(userId);
+                if (deviceMap.size === expectedNumberOfDevices) return true;
+                await new Promise((r) => setTimeout(r, 500));
+            }
+            return false;
+        },
+        { userId, expectedNumberOfDevices },
+    );
+    if (!result) {
+        throw new Error(`User ${userId} did not have ${expectedNumberOfDevices} devices within ten iterations!`);
+    }
+}

playwright/e2e/csAPI.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type APIRequestContext } from "playwright-core";
+import { type APIRequestContext } from "@playwright/test";
 import { type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { ClientServerApi } from "@element-hq/element-web-playwright-common/lib/utils/api.js";
 
 import { type HomeserverInstance } from "../plugins/homeserver";
-import { ClientServerApi } from "../plugins/utils/api.ts";
 
 /**
  * A small subset of the Client-Server API used to manipulate the state of the

playwright/e2e/editing/editing.spec.ts

@@ -267,7 +267,6 @@ test.describe("Editing", () => {
         app,
         room,
         axe,
-        checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
 
@@ -282,7 +281,7 @@ test.describe("Editing", () => {
             const line = tile.locator(".mx_EventTile_line");
             await line.hover();
             await line.getByRole("button", { name: "Edit" }).click();
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             const editComposer = page.getByRole("textbox", { name: "Edit message" });
             await editComposer.pressSequentially("Foo");
             await editComposer.press("Backspace");
@@ -290,7 +289,7 @@ test.describe("Editing", () => {
             await editComposer.press("Backspace");
             await editComposer.press("Enter");
             await app.getComposerField().hover(); // XXX: move the hover to get rid of the "Edit" tooltip
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
         }
         await expect(
             page.locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", { hasText: "Message" }),
@@ -305,7 +304,6 @@ test.describe("Editing", () => {
         user,
         app,
         axe,
-        checkA11y,
         bot: bob,
     }) => {
         // This tests the behaviour when a message has been edited some time after it has been sent, and we

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

@@ -6,22 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { expect, test as base } from "../../element-web-test";
+import { type CredentialsWithDisplayName, expect, test as base } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
 import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { type Credentials } from "../../plugins/homeserver";
 
 const email = "user@nowhere.dummy";
 
-const test = base.extend<{ credentials: Pick<Credentials, "username" | "password"> }>({
+const test = base.extend({
     // eslint-disable-next-line no-empty-pattern
     credentials: async ({}, use, testInfo) => {
         await use({
             username: `user_${testInfo.testId}`,
             // this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
             password: "oETo7MPf0o",
-        });
+        } as CredentialsWithDisplayName);
     },
 });
 

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

@@ -77,7 +77,7 @@ test.describe("Invite dialog", function () {
         "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();
+            await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
 
             const other = page.locator(".mx_InviteDialog_other");
             // Assert that the header is rendered

playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { expect, test } from "../../../element-web-test";
+import type { Page } from "@playwright/test";
+
+test.describe("Room list filters and sort", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "BotBob",
+            autoAcceptInvites: true,
+        },
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
+    function getPrimaryFilters(page: Page) {
+        return page.getByRole("listbox", { name: "Room list filters" });
+    }
+
+    test.beforeEach(async ({ page, app, bot, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        await app.client.createRoom({ name: "empty room" });
+
+        const unReadDmId = await bot.createRoom({
+            name: "unread dm",
+            invite: [user.userId],
+            is_direct: true,
+        });
+        await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
+
+        const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+        await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+        await bot.joinRoom(unReadRoomId);
+        await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
+
+        const favouriteId = await app.client.createRoom({ name: "favourite room" });
+        await app.client.evaluate(async (client, favouriteId) => {
+            await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+        }, favouriteId);
+    });
+
+    test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomList = getRoomList(page);
+        const primaryFilters = getPrimaryFilters(page);
+
+        const allFilters = await primaryFilters.locator("option").all();
+        for (const filter of allFilters) {
+            expect(await filter.getAttribute("aria-selected")).toBe("false");
+        }
+        await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
+
+        await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        // only one room should be visible
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(2);
+        await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
+
+        await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+        await primaryFilters.getByRole("option", { name: "People" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+        await primaryFilters.getByRole("option", { name: "Rooms" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(3);
+    });
+});

playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { test, expect } from "../../../element-web-test";
+import type { Page } from "@playwright/test";
+
+test.describe("Header section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the header section of the room list
+     * @param page
+     */
+    function getHeaderSection(page: Page) {
+        return page.getByTestId("room-list-header");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-header.png");
+
+        const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
+        await composeMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
+
+        // New message should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "New message" }).click();
+        await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
+        await app.closeDialog();
+
+        // New room should open the room creation dialog
+        await composeMenu.click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await expect(page.getByRole("heading", { name: "Create a private room" })).toBeVisible();
+        await app.closeDialog();
+    });
+
+    test("should render the header section for a space", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await app.client.createSpace({ name: "MySpace" });
+        await page.getByRole("button", { name: "MySpace" }).click();
+
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
+
+        await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
+        await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
+
+        const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
+        await spaceMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-space-menu.png");
+
+        // It should open the space home
+        await page.getByRole("menuitem", { name: "Space home" }).click();
+        await expect(page.getByRole("main").getByRole("heading", { name: "MySpace" })).toBeVisible();
+
+        // It should open the invite dialog
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to MySpace" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space preferences
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Preferences" }).click();
+        await expect(page.getByRole("heading", { name: "Preferences" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space settings
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Space Settings" }).click();
+        await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+        await app.closeDialog();
+    });
+});

playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Room list panel", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list view
+     * @param page
+     */
+    function getRoomListView(page: Page) {
+        return page.getByTestId("room-list-panel");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        // Populate the room list
+        for (let i = 0; i < 20; i++) {
+            await app.client.createRoom({ name: `room${i}` });
+        }
+    });
+
+    test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomListView(page);
+        // Wait for the last room to be visible
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list-panel.png");
+    });
+});

playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the search section of the room list
+     * @param page
+     */
+    function getSearchSection(page: Page) {
+        return page.getByRole("search");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the search section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        // exact=false to ignore the shortcut which is related to the OS
+        await expect(searchSection.getByRole("button", { name: "Search", exact: false })).toBeVisible();
+        await expect(searchSection).toMatchScreenshot("search-section.png");
+    });
+
+    test("should open the spotlight when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Search", exact: false }).click();
+        // The spotlight should be displayed
+        await expect(page.getByRole("dialog", { name: "Search Dialog" })).toBeVisible();
+    });
+
+    test("should open the room directory when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Explore rooms" }).click();
+        const dialog = page.getByRole("dialog", { name: "Search Dialog" });
+        // The room directory should be displayed
+        await expect(dialog).toBeVisible();
+        // The public room filter should be displayed
+        await expect(dialog.getByText("Public rooms")).toBeVisible();
+    });
+});

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Room list", () => {
+    test.use({
+        displayName: "Alice",
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+        for (let i = 0; i < 30; i++) {
+            await app.client.createRoom({ name: `room${i}` });
+        }
+    });
+
+    test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list.png");
+
+        await roomListView.hover();
+        // Scroll to the end of the room list
+        await page.mouse.wheel(0, 1000);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
+    });
+
+    test("should open the room when it is clicked", async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+        await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
+    });
+
+    test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+        await roomItem.hover();
+
+        await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+        const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+        await roomItemMenu.click();
+        await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
+
+        // It should make the room favourited
+        await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
+
+        // Check that the room is favourited
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
+        // It should show the invite dialog
+        await page.getByRole("menuitem", { name: "invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should leave the room
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await page.getByRole("menuitem", { name: "leave room" }).click();
+        await expect(roomItem).not.toBeVisible();
+    });
+});

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Page } from "playwright-core";
+import { type Page } from "@playwright/test";
 
 import { expect, test } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
@@ -120,7 +120,7 @@ test.describe("Login", () => {
             credentials,
             page,
             homeserver,
-            checkA11y,
+            axe,
         }) => {
             await page.goto("/");
 
@@ -149,7 +149,7 @@ test.describe("Login", () => {
             await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
             // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
             // cy.percySnapshot("Login");
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
             await page.getByPlaceholder("Password").fill(credentials.password);

playwright/e2e/messages/messages.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* See readme.md for tips on writing these tests. */
 
-import { type Locator, type Page } from "playwright-core";
+import { type Locator, type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 

playwright/e2e/oidc/index.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type MailpitClient } from "mailpit-api";
+import { type MailpitClient } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 import { type Page } from "@playwright/test";
 
 import { expect } from "../../element-web-test";

playwright/e2e/read-receipts/new-messages-thread-roots.spec.ts

@@ -57,8 +57,8 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 await util.openThread("ThreadRoot");
 
                 // Then the thread root is marked as read in the main timeline,
-                // 30 remaining messages are unread - 7 messages are displayed under the thread root
-                await util.assertUnread(room2, 30 - 7);
+                // 30 remaining messages are unread - 6 messages are displayed under the thread root
+                await util.assertUnread(room2, 30 - 6);
             });
 
             test("Creating a new thread based on a reply makes the room unread", async ({

playwright/e2e/register/email.spec.ts

@@ -34,7 +34,7 @@ test.describe("Email Registration", async () => {
     test(
         "registers an account and lands on the home page",
         { tag: "@screenshot" },
-        async ({ page, mailpitClient, request, checkA11y }) => {
+        async ({ page, mailpitClient, request, axe }) => {
             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")] };
@@ -47,7 +47,7 @@ test.describe("Email Registration", async () => {
 
             await expect(page.getByText("Check your email to continue")).toBeVisible();
             await expect(page).toMatchScreenshot("registration_check_your_email.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();
 

playwright/e2e/register/register.spec.ts

@@ -33,12 +33,12 @@ test.describe("Registration", () => {
     test(
         "registers an account and lands on the home screen",
         { tag: "@screenshot" },
-        async ({ homeserver, page, checkA11y, crypto }) => {
+        async ({ homeserver, page, axe, 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(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.baseUrl);
             await page.getByRole("button", { name: "Continue", exact: true }).click();
@@ -52,7 +52,7 @@ test.describe("Registration", () => {
                 includeDialogBackground: true,
             };
             await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
             await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
@@ -62,12 +62,12 @@ test.describe("Registration", () => {
             const dialog = page.getByRole("dialog");
             await expect(dialog).toBeVisible();
             await expect(page).toMatchScreenshot("email-prompt.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             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(axe).toHaveNoViolations();
 
             const termsPolicy = page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy");
             await termsPolicy.getByRole("checkbox").click(); // Click the checkbox before terms of service anchor link

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

@@ -67,6 +67,15 @@ test.describe("RightPanel", () => {
             },
         );
 
+        test("should have padding under leave room", { tag: "@screenshot" }, async ({ page, app }) => {
+            await viewRoomSummaryByName(page, app, ROOM_NAME);
+
+            const leaveButton = await page.getByRole("menuitem", { name: "Leave Room" });
+            await leaveButton.scrollIntoViewIfNeeded();
+
+            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png");
+        });
+
         test("should handle clicking add widgets", async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 

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

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import { type Visibility } from "matrix-js-sdk/src/matrix";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -85,6 +86,15 @@ test.describe("Room Header", () => {
                 await expect(header).toMatchScreenshot("room-header-long-name.png");
             },
         );
+
+        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            await expect(header).toMatchScreenshot("room-header-with-icon.png");
+        });
     });
 
     test.describe("with a video room", () => {

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

@@ -17,9 +17,7 @@ import {
 } from "../../crypto/utils";
 
 test.describe("Encryption tab", () => {
-    test.use({
-        displayName: "Alice",
-    });
+    test.use({ displayName: "Alice" });
 
     let recoveryKey: GeneratedSecretStorageKey;
     let expectedBackupVersion: string;
@@ -124,8 +122,23 @@ test.describe("Encryption tab", () => {
 
         await expect(util.getEncryptionTabContent()).toMatchScreenshot("delete-key-storage-confirm.png");
 
+        const deleteRequestPromises = [
+            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.master")),
+            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.self_signing")),
+            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.user_signing")),
+            page.waitForRequest((req) => req.url().endsWith("/account_data/m.megolm_backup.v1")),
+            page.waitForRequest((req) => req.url().endsWith("/account_data/m.secret_storage.default_key")),
+            page.waitForRequest((req) => req.url().includes("/account_data/m.secret_storage.key.")),
+        ];
+
         await page.getByRole("button", { name: "Delete key storage" }).click();
 
         await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+
+        for (const prom of deleteRequestPromises) {
+            const request = await prom;
+            expect(request.method()).toBe("PUT");
+            expect(request.postData()).toBe(JSON.stringify({}));
+        }
     });
 });

playwright/e2e/settings/encryption-user-tab/index.ts

@@ -43,7 +43,7 @@ class Helpers {
      */
     async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
         // Select the security phrase
-        await this.page.getByRole("button", { name: "Verify with Security Key" }).click();
+        await this.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
         await this.enterRecoveryKey(recoveryKey);
         await this.page.getByRole("button", { name: "Done" }).click();
     }
@@ -91,7 +91,7 @@ class Helpers {
     }
 
     /**
-     * Get the security key from the clipboard and fill in the input field
+     * Get the recovery key from the clipboard and fill in the input field
      * Then click on the finish button
      * @param title - The title of the dialog
      * @param confirmButtonLabel - The label of the confirm button

playwright/e2e/settings/quick-settings-menu.spec.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Quick settings menu", () => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
+        await page.getByRole("button", { name: "Quick settings" }).click();
+        // Assert that the top heading is renderedc
+        const settings = page.getByTestId("quick-settings-menu");
+        await expect(settings).toBeVisible();
+        await expect(settings).toMatchScreenshot("quick-settings.png");
+    });
+});

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

@@ -25,18 +25,14 @@ test.describe("Security user settings tab", () => {
             },
         });
 
-        test.beforeEach(async ({ page, user }) => {
+        test.beforeEach(async ({ page, app, user }) => {
             // Dismiss "Notification" toast
-            await page
-                .locator(".mx_Toast_toast", { hasText: "Notifications" })
-                .getByRole("button", { name: "Dismiss" })
-                .click();
-
+            await app.closeNotificationToast();
             await page.locator(".mx_Toast_buttons").getByRole("button", { name: "Yes" }).click(); // Allow analytics
         });
 
         test.describe("AnalyticsLearnMoreDialog", () => {
-            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page }) => {
+            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
                 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(
@@ -45,16 +41,57 @@ test.describe("Security user settings tab", () => {
             });
         });
 
-        test("should contain section to set ID server", async ({ app }) => {
+        test("should be able to set an ID server", async ({ app, context, user, page }) => {
             const tab = await app.settings.openUserSettings("Security");
 
-            const setIdServer = tab.locator(".mx_SetIdServer");
+            await context.route("https://identity.example.org/_matrix/identity/v2", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {},
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account/register", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        token: "AToken",
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        user_id: user.userId,
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/terms", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        policies: {},
+                    },
+                });
+            });
+            const setIdServer = tab.locator(".mx_IdentityServerPicker");
             await setIdServer.scrollIntoViewIfNeeded();
-            // Assert that an input area for identity server exists
-            await expect(setIdServer.getByRole("textbox", { name: "Enter a new identity server" })).toBeVisible();
+
+            const textElement = setIdServer.getByRole("textbox", { name: "Enter a new identity server" });
+            await textElement.click();
+            await textElement.fill("https://identity.example.org");
+            await setIdServer.getByRole("button", { name: "Change" }).click();
+
+            await expect(setIdServer.getByText("Checking server")).toBeVisible();
+            // Accept terms
+            await page.getByTestId("dialog-primary-button").click();
+            // Check identity has changed.
+            await expect(setIdServer.getByText("Your identity server has been changed")).toBeVisible();
+            // Ensure section title is updated.
+            await expect(tab.getByText(`Identity server (identity.example.org)`, { exact: true })).toBeVisible();
         });
 
-        test("should enable show integrations as enabled", async ({ app, page }) => {
+        test("should show integrations as enabled", async ({ app, page, user }) => {
             const tab = await app.settings.openUserSettings("Security");
 
             const setIntegrationManager = tab.locator(".mx_SetIntegrationManager");
@@ -65,7 +102,9 @@ test.describe("Security user settings tab", () => {
                 }),
             ).toBeVisible();
             // Make sure integration manager's toggle switch is enabled
-            await expect(setIntegrationManager.locator(".mx_ToggleSwitch_enabled")).toBeVisible();
+            const toggleswitch = setIntegrationManager.getByLabel("Enable the integration manager");
+            await expect(toggleswitch).toBeVisible();
+            await expect(toggleswitch).toBeChecked();
             await expect(setIntegrationManager.locator(".mx_SetIntegrationManager_heading_manager")).toHaveText(
                 "Manage integrations(scalar.vector.im)",
             );

playwright/e2e/spaces/spaces.spec.ts

@@ -227,7 +227,7 @@ test.describe("Spaces", () => {
     test(
         "should render subspaces in the space panel only when expanded",
         { tag: "@screenshot" },
-        async ({ page, app, user, axe, checkA11y }) => {
+        async ({ page, app, user, axe }) => {
             axe.disableRules([
                 // Disable this check as it triggers on nested roving tab index elements which are in practice fine
                 "nested-interactive",
@@ -249,7 +249,7 @@ test.describe("Spaces", () => {
             await expect(spaceTree.getByRole("button", { name: "Root Space" })).toBeVisible();
             await expect(spaceTree.getByRole("button", { name: "Child Space" })).not.toBeVisible();
 
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             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
@@ -261,7 +261,7 @@ test.describe("Spaces", () => {
             await expect(item).toBeVisible();
             await expect(item.locator(".mx_SpaceItem", { hasText: "Child Space" })).toBeVisible();
 
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-expanded.png");
         },
     );

playwright/e2e/timeline/timeline.spec.ts

@@ -277,7 +277,7 @@ test.describe("Timeline", () => {
         test(
             "should add inline start margin to an event line on IRC layout",
             { tag: "@screenshot" },
-            async ({ page, app, room, axe, checkA11y }) => {
+            async ({ page, app, room, axe }) => {
                 axe.disableRules("color-contrast");
 
                 await page.goto(`/#/room/${room.roomId}`);
@@ -318,7 +318,7 @@ test.describe("Timeline", () => {
                 `,
                     },
                 );
-                await checkA11y();
+                await expect(axe).toHaveNoViolations();
             },
         );
     });
@@ -743,68 +743,64 @@ test.describe("Timeline", () => {
             ).toBeVisible();
         });
 
-        test(
-            "should render url previews",
-            { tag: "@screenshot" },
-            async ({ page, app, room, axe, checkA11y, context }) => {
-                axe.disableRules("color-contrast");
+        test("should render url previews", { tag: "@screenshot" }, async ({ page, app, room, axe, context }) => {
+            axe.disableRules("color-contrast");
 
-                // Element Web uses a Service Worker to rewrite unauthenticated media requests to authenticated ones, but
-                // the page can't see this happening. We intercept the route at the BrowserContext to ensure we get it
-                // post-worker, but we can't waitForResponse on that, so the page context is still used there. Because
-                // the page doesn't see the rewrite, it waits for the unauthenticated route. This is only confusing until
-                // the js-sdk (and thus the app as a whole) switches to using authenticated endpoints by default, hopefully.
-                await context.route(
-                    "**/_matrix/client/v1/media/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*",
-                    async (route) => {
-                        await route.fulfill({
-                            path: "playwright/sample-files/riot.png",
-                        });
-                    },
-                );
-                await page.route(
-                    "**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*",
-                    async (route) => {
-                        await route.fulfill({
-                            json: {
-                                "og:title": "Element Call",
-                                "og:description": null,
-                                "og:image:width": 48,
-                                "og:image:height": 48,
-                                "og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV",
-                                "og:image:type": "image/png",
-                                "matrix:image:size": 2121,
-                            },
-                        });
-                    },
-                );
+            // Element Web uses a Service Worker to rewrite unauthenticated media requests to authenticated ones, but
+            // the page can't see this happening. We intercept the route at the BrowserContext to ensure we get it
+            // post-worker, but we can't waitForResponse on that, so the page context is still used there. Because
+            // the page doesn't see the rewrite, it waits for the unauthenticated route. This is only confusing until
+            // the js-sdk (and thus the app as a whole) switches to using authenticated endpoints by default, hopefully.
+            await context.route(
+                "**/_matrix/client/v1/media/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*",
+                async (route) => {
+                    await route.fulfill({
+                        path: "playwright/sample-files/riot.png",
+                    });
+                },
+            );
+            await page.route(
+                "**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*",
+                async (route) => {
+                    await route.fulfill({
+                        json: {
+                            "og:title": "Element Call",
+                            "og:description": null,
+                            "og:image:width": 48,
+                            "og:image:height": 48,
+                            "og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV",
+                            "og:image:type": "image/png",
+                            "matrix:image:size": 2121,
+                        },
+                    });
+                },
+            );
 
-                const requestPromises: Promise<any>[] = [
-                    page.waitForResponse("**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*"),
-                    // see context.route above for why we listen for the unauthenticated endpoint
-                    page.waitForResponse("**/_matrix/media/v3/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*"),
-                ];
+            const requestPromises: Promise<any>[] = [
+                page.waitForResponse("**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*"),
+                // see context.route above for why we listen for the unauthenticated endpoint
+                page.waitForResponse("**/_matrix/media/v3/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*"),
+            ];
 
-                await app.client.sendMessage(room.roomId, "https://call.element.io/");
-                await page.goto(`/#/room/${room.roomId}`);
+            await app.client.sendMessage(room.roomId, "https://call.element.io/");
+            await page.goto(`/#/room/${room.roomId}`);
 
-                await expect(page.locator(".mx_LinkPreviewWidget").getByText("Element Call")).toBeVisible();
-                await Promise.all(requestPromises);
+            await expect(page.locator(".mx_LinkPreviewWidget").getByText("Element Call")).toBeVisible();
+            await Promise.all(requestPromises);
 
-                await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
-                await app.timeline.scrollToBottom();
-                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
-                    // Exclude timestamp and read marker from snapshot
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                    css: `
+            await app.timeline.scrollToBottom();
+            await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
+                // Exclude timestamp and read marker from snapshot
+                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
                 `,
-                });
-            },
-        );
+            });
+        });
 
         test.describe("on search results panel", () => {
             test(
@@ -875,6 +871,40 @@ test.describe("Timeline", () => {
                 );
             });
         });
+
+        test("should render a code block", { tag: "@screenshot" }, async ({ page, app, room }) => {
+            await page.goto(`/#/room/${room.roomId}`);
+            await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Wait until configuration is finished
+            await expect(
+                page
+                    .locator(".mx_GenericEventListSummary_summary")
+                    .getByText(`${OLD_NAME} created and configured the room.`),
+            ).toBeVisible();
+
+            // Send a code block
+            const composer = app.getComposerField();
+            await composer.fill("```\nconsole.log('Hello, world!');\n```");
+            await composer.press("Enter");
+
+            const tile = page.locator(".mx_EventTile");
+            await expect(tile).toBeVisible();
+            await expect(tile).toMatchScreenshot("code-block.png", { mask: [page.locator(".mx_MessageTimestamp")] });
+
+            // Edit a code block and assert the edited code block has been correctly rendered
+            await tile.hover();
+            await page.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "Edit" }).click();
+            await page
+                .getByRole("textbox", { name: "Edit message" })
+                .fill("```\nconsole.log('Edited: Hello, world!');\n```");
+            await page.getByRole("textbox", { name: "Edit message" }).press("Enter");
+
+            const newTile = page.locator(".mx_EventTile");
+            await expect(newTile).toMatchScreenshot("edited-code-block.png", {
+                mask: [page.locator(".mx_MessageTimestamp")],
+            });
+        });
     });
 
     test.describe("message sending", { tag: ["@no-firefox", "@no-webkit"] }, () => {

playwright/e2e/user-view/user-view.spec.ts

@@ -19,7 +19,6 @@ test.describe("UserView", () => {
 
         const rightPanel = page.locator("#mx_RightPanel");
         await expect(rightPanel.getByRole("heading", { name: bot.credentials.displayName, exact: true })).toBeVisible();
-        await expect(rightPanel.getByText("1 session")).toBeVisible();
         await expect(rightPanel).toMatchScreenshot("user-info.png", {
             mask: [page.locator(".mx_UserInfo_profile_mxid")],
             css: `

playwright/element-web-test.ts

@@ -7,18 +7,18 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import {
-    expect as baseExpect,
-    type Locator,
-    type Page,
     type ExpectMatcherState,
-    type ElementHandle,
+    type MatcherReturnType,
+    type Page,
+    type Locator,
     type PlaywrightTestArgs,
     type Fixtures as _Fixtures,
 } from "@playwright/test";
-import { sanitizeForFilePath } from "playwright-core/lib/utils";
-import AxeBuilder from "@axe-core/playwright";
-import _ from "lodash";
-import { extname } from "node:path";
+import {
+    type TestFixtures as BaseTestFixtures,
+    expect as baseExpect,
+    type ToMatchScreenshotOptions,
+} from "@element-hq/element-web-playwright-common";
 
 import type { IConfigOptions } from "../src/IConfigOptions";
 import { type Credentials } from "./plugins/homeserver";
@@ -27,71 +27,22 @@ import { Crypto } from "./pages/crypto";
 import { Toasts } from "./pages/toasts";
 import { Bot, type CreateBotOpts } from "./pages/bot";
 import { Webserver } from "./plugins/webserver";
-import { type Options, type Services, test as base } from "./services.ts";
+import { type WorkerOptions, type Services, test as base } from "./services";
 
 // Enable experimental service worker support
 // See https://playwright.dev/docs/service-workers-experimental#how-to-enable
 process.env["PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS"] = "1";
 
-// This is deliberately quite a minimal config.json, so that we can test that the default settings actually work.
-const CONFIG_JSON: Partial<IConfigOptions> = {
-    // The default language is set here for test consistency
-    setting_defaults: {
-        language: "en-GB",
-    },
-
-    // the location tests want a map style url.
-    map_style_url: "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
-
-    features: {
-        // We don't want to go through the feature announcement during the e2e test
-        feature_release_announcement: false,
-    },
-};
+declare module "@element-hq/element-web-playwright-common" {
+    // Improve the type for the config fixture based on the real type
+    export interface Config extends Omit<IConfigOptions, "default_server_config"> {}
+}
 
 export interface CredentialsWithDisplayName extends Credentials {
     displayName: string;
 }
 
-export interface TestFixtures {
-    axe: AxeBuilder;
-    checkA11y: () => Promise<void>;
-
-    /**
-     * The contents of the config.json to send when the client requests it.
-     */
-    config: typeof CONFIG_JSON;
-
-    /**
-     * The displayname to use for the user registered in {@link #credentials}.
-     *
-     * To set it, call `test.use({ displayName: "myDisplayName" })` in the test file or `describe` block.
-     * See {@link https://playwright.dev/docs/api/class-test#test-use}.
-     */
-    displayName?: string;
-
-    /**
-     * A test fixture which registers a test user on the {@link #homeserver} and supplies the details
-     * of the registered user.
-     */
-    credentials: CredentialsWithDisplayName;
-
-    /**
-     * The same as {@link https://playwright.dev/docs/api/class-fixtures#fixtures-page|`page`},
-     * but adds an initScript which will populate localStorage with the user's details from
-     * {@link #credentials} and {@link #homeserver}.
-     *
-     * Similar to {@link #user}, but doesn't load the app.
-     */
-    pageWithCredentials: Page;
-
-    /**
-     * A (rather poorly-named) test fixture which registers a user per {@link #credentials}, stores
-     * the credentials into localStorage per {@link #homeserver}, and then loads the front page of the
-     * app.
-     */
-    user: CredentialsWithDisplayName;
-
+export interface TestFixtures extends BaseTestFixtures {
     /**
      * The same as {@link https://playwright.dev/docs/api/class-fixtures#fixtures-page|`page`},
      * but wraps the returned `Page` in a class of utilities for interacting with the Element-Web UI,
@@ -105,13 +56,11 @@ export interface TestFixtures {
     uut?: Locator; // Unit Under Test, useful place to refer a prepared locator
     botCreateOpts: CreateBotOpts;
     bot: Bot;
-    labsFlags: string[];
     webserver: Webserver;
-    disablePresence: boolean;
 }
 
 type CombinedTestFixtures = PlaywrightTestArgs & TestFixtures;
-export type Fixtures = _Fixtures<CombinedTestFixtures, Services & Options, CombinedTestFixtures>;
+export type Fixtures = _Fixtures<CombinedTestFixtures, Services & WorkerOptions, CombinedTestFixtures>;
 export const test = base.extend<TestFixtures>({
     context: async ({ context }, use, testInfo) => {
         // We skip tests instead of using grep-invert to still surface the counts in the html report
@@ -121,102 +70,12 @@ export const test = base.extend<TestFixtures>({
         );
         await use(context);
     },
-    disablePresence: false,
-    config: {}, // We merge this atop the default CONFIG_JSON in the page fixture to make extending it easier
-    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
-        await context.route(`http://localhost:8080/config.json*`, async (route) => {
-            const json = {
-                ...CONFIG_JSON,
-                ...config,
-                default_server_config: {
-                    "m.homeserver": {
-                        base_url: homeserver.baseUrl,
-                    },
-                    ...config.default_server_config,
-                },
-            };
-            json["features"] = {
-                ...json["features"],
-                // Enable the lab features
-                ...labsFlags.reduce((obj, flag) => {
-                    obj[flag] = true;
-                    return obj;
-                }, {}),
-            };
-            if (disablePresence) {
-                json["enable_presence_by_hs_url"] = {
-                    [homeserver.baseUrl]: false,
-                };
-            }
-            await route.fulfill({ json });
-        });
-        await use(page);
+
+    axe: async ({ axe }, use) => {
+        // Exclude floating UI for now
+        await use(axe.exclude("[data-floating-ui-portal]"));
     },
 
-    displayName: undefined,
-    credentials: async ({ context, homeserver, displayName: testDisplayName }, use, testInfo) => {
-        const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
-        const password = _.uniqueId("password_");
-        const displayName = testDisplayName ?? _.sample(names)!;
-
-        const credentials = await homeserver.registerUser(`user_${testInfo.testId}`, password, displayName);
-        console.log(`Registered test user ${credentials.userId} with displayname ${displayName}`);
-
-        await use({
-            ...credentials,
-            displayName,
-        });
-    },
-    labsFlags: [],
-
-    pageWithCredentials: async ({ page, homeserver, credentials }, use) => {
-        await page.addInitScript(
-            ({ baseUrl, credentials }) => {
-                // Seed the localStorage with the required credentials
-                window.localStorage.setItem("mx_hs_url", baseUrl);
-                window.localStorage.setItem("mx_user_id", credentials.userId);
-                window.localStorage.setItem("mx_access_token", credentials.accessToken);
-                window.localStorage.setItem("mx_device_id", credentials.deviceId);
-                window.localStorage.setItem("mx_is_guest", "false");
-                window.localStorage.setItem("mx_has_pickle_key", "false");
-                window.localStorage.setItem("mx_has_access_token", "true");
-
-                window.localStorage.setItem(
-                    "mx_local_settings",
-                    JSON.stringify({
-                        // Retain any other settings which may have already been set
-                        ...JSON.parse(window.localStorage.getItem("mx_local_settings") || "{}"),
-                        // Ensure the language is set to a consistent value
-                        language: "en",
-                    }),
-                );
-            },
-            { baseUrl: homeserver.baseUrl, credentials },
-        );
-        await use(page);
-    },
-
-    user: async ({ pageWithCredentials: page, credentials }, use) => {
-        await page.goto("/");
-        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
-        await use(credentials);
-    },
-
-    axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }).exclude("[data-floating-ui-portal]"));
-    },
-    checkA11y: async ({ axe }, use, testInfo) =>
-        use(async () => {
-            const results = await axe.analyze();
-
-            await testInfo.attach("accessibility-scan-results", {
-                body: JSON.stringify(results, null, 2),
-                contentType: "application/json",
-            });
-
-            expect(results.violations).toEqual([]);
-        }),
-
     app: async ({ page }, use) => {
         const app = new ElementAppPage(page);
         await use(app);
@@ -244,35 +103,23 @@ export const test = base.extend<TestFixtures>({
     },
 });
 
-// Based on https://github.com/microsoft/playwright/blob/2b77ed4d7aafa85a600caa0b0d101b72c8437eeb/packages/playwright/src/util.ts#L206C8-L210C2
-function sanitizeFilePathBeforeExtension(filePath: string): string {
-    const ext = extname(filePath);
-    const base = filePath.substring(0, filePath.length - ext.length);
-    return sanitizeForFilePath(base) + ext;
+interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
+    includeDialogBackground?: boolean;
+    showTooltips?: boolean;
+    timeout?: number;
 }
 
-export const expect = baseExpect.extend({
-    async toMatchScreenshot(
+type Expectations = {
+    toMatchScreenshot: (
         this: ExpectMatcherState,
         receiver: Page | Locator,
         name: `${string}.png`,
-        options?: {
-            mask?: Array<Locator>;
-            includeDialogBackground?: boolean;
-            showTooltips?: boolean;
-            timeout?: number;
-            css?: string;
-        },
-    ) {
-        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;
+        options?: ExtendedToMatchScreenshotOptions,
+    ) => Promise<MatcherReturnType>;
+};
 
+export const expect = baseExpect.extend<Expectations>({
+    async toMatchScreenshot(receiver, name, options) {
         let css = `
             .mx_MessagePanel_myReadMarker {
                 display: none !important;
@@ -322,21 +169,9 @@ export const expect = baseExpect.extend({
             css += options.css;
         }
 
-        // We add a custom style tag before taking screenshots
-        const style = (await page.addStyleTag({
-            content: css,
-        })) as ElementHandle<Element>;
-
-        const screenshotName = sanitizeFilePathBeforeExtension(name);
-        await baseExpect(receiver).toHaveScreenshot(screenshotName, options);
-
-        await style.evaluate((tag) => tag.remove());
-
-        testInfo.annotations.push({
-            // `_` prefix hides it from the HTML reporter
-            type: "_screenshot",
-            // include a path relative to `playwright/snapshots/`
-            description: testInfo.snapshotPath(screenshotName).split("/playwright/snapshots/", 2)[1],
+        await baseExpect(receiver).toMatchScreenshot(name, {
+            ...options,
+            css,
         });
 
         return { pass: true, message: () => "", name: "toMatchScreenshot" };

playwright/logger.ts

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

playwright/pages/ElementAppPage.ts

@@ -202,4 +202,15 @@ export class ElementAppPage {
         }
         return this.page.locator(`id=${labelledById ?? describedById}`);
     }
+
+    /**
+     * Close the notification toast
+     */
+    public closeNotificationToast(): Promise<void> {
+        // Dismiss "Notification" toast
+        return this.page
+            .locator(".mx_Toast_toast", { hasText: "Notifications" })
+            .getByRole("button", { name: "Dismiss" })
+            .click();
+    }
 }

playwright/plugins/homeserver/dendrite/index.ts

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Options } from "../../../services.ts";
+import { type WorkerOptions } from "../../../services.ts";
 
-export const isDendrite = ({ homeserverType }: Options): boolean => {
+export const isDendrite = ({ homeserverType }: WorkerOptions): boolean => {
     return homeserverType === "dendrite" || homeserverType === "pinecone";
 };

playwright/plugins/homeserver/index.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type ClientServerApi } from "../utils/api.ts";
+import { type ClientServerApi } from "@element-hq/element-web-playwright-common/lib/utils/api.js";
 
 export interface HomeserverInstance {
     readonly baseUrl: string;

playwright/plugins/homeserver/synapse/consentHomeserver.ts

@@ -6,30 +6,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { type SynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
+
 import { type Fixtures } from "../../../element-web-test.ts";
 
 export const consentHomeserver: Fixtures = {
     _homeserver: [
         async ({ _homeserver: container, mailpit }, use) => {
-            container
+            (container as SynapseContainer)
                 .withCopyDirectoriesToContainer([
                     { source: "playwright/plugins/homeserver/synapse/res", target: "/data/res" },
                 ])
+                .withSmtpServer(mailpit)
                 .withConfig({
-                    email: {
-                        enable_notifs: false,
-                        smtp_host: "mailpit",
-                        smtp_port: 1025,
-                        smtp_user: "username",
-                        smtp_pass: "password",
-                        require_transport_security: false,
-                        notif_from: "Your Friendly %(app)s homeserver <noreply@example.com>",
-                        app_name: "Matrix",
-                        notif_template_html: "notif_mail.html",
-                        notif_template_text: "notif_mail.txt",
-                        notif_for_new_users: true,
-                        client_base_url: "http://localhost/element",
-                    },
                     user_consent: {
                         template_dir: "/data/res/templates/privacy",
                         version: "1.0",

playwright/plugins/homeserver/synapse/masHomeserver.ts

@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { MatrixAuthenticationServiceContainer } from "../../../testcontainers/mas.ts";
+import { MatrixAuthenticationServiceContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
+
 import { type Fixtures } from "../../../element-web-test.ts";
 
 export const masHomeserver: Fixtures = {

playwright/plugins/oauth_server/index.ts

@@ -10,8 +10,7 @@ import http from "http";
 import express from "express";
 import { type AddressInfo } from "net";
 import { type TestInfo } from "@playwright/test";
-
-import { randB64Bytes } from "../utils/rand.ts";
+import { randB64Bytes } from "@element-hq/element-web-playwright-common/lib/utils/rand.js";
 
 export class OAuthServer {
     private server?: http.Server;

playwright/plugins/utils/api.ts

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

playwright/plugins/utils/object.ts

@@ -1,16 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-/**
- * Deep copy the given object. The object MUST NOT have circular references and
- * MUST NOT have functions.
- * @param obj - The object to deep copy.
- * @returns A copy of the object without any references to the original.
- */
-export function deepCopy<T>(obj: T): T {
-    return JSON.parse(JSON.stringify(obj));
-}

playwright/plugins/utils/port.ts

@@ -1,19 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import * as net from "net";
-
-export async function getFreePort(): Promise<number> {
-    return new Promise<number>((resolve) => {
-        const srv = net.createServer();
-        srv.listen(0, () => {
-            const port = (<net.AddressInfo>srv.address()).port;
-            srv.close(() => resolve(port));
-        });
-    });
-}

playwright/plugins/utils/rand.ts

@@ -1,13 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import crypto from "node:crypto";
-
-export function randB64Bytes(numBytes: number): string {
-    return crypto.randomBytes(numBytes).toString("base64").replace(/=*$/, "");
-}

playwright/plugins/webserver/index.ts

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as http from "http";
-import { type AddressInfo } from "net";
+import * as http from "node:http";
+import { type AddressInfo } from "node:net";
 
 export class Webserver {
     private server?: http.Server;

playwright/services.ts

@@ -5,113 +5,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { test as base } from "@playwright/test";
-import { type MailpitClient } from "mailpit-api";
-import { Network, type StartedNetwork } from "testcontainers";
-import { PostgreSqlContainer, type StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+import { test as base } from "@element-hq/element-web-playwright-common";
+import {
+    type Services as BaseServices,
+    type WorkerOptions as BaseWorkerOptions,
+} from "@element-hq/element-web-playwright-common/lib/fixtures";
+import { type HomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-import { type SynapseConfig, SynapseContainer } from "./testcontainers/synapse.ts";
-import { Logger } from "./logger.ts";
-import { type StartedMatrixAuthenticationServiceContainer } from "./testcontainers/mas.ts";
-import { type HomeserverContainer, type StartedHomeserverContainer } from "./testcontainers/HomeserverContainer.ts";
-import { MailhogContainer, type StartedMailhogContainer } from "./testcontainers/mailpit.ts";
 import { type OAuthServer } from "./plugins/oauth_server";
-import { DendriteContainer, PineconeContainer } from "./testcontainers/dendrite.ts";
+import { DendriteContainer, PineconeContainer } from "./testcontainers/dendrite";
 import { type HomeserverType } from "./plugins/homeserver";
+import { SynapseContainer } from "./testcontainers/synapse";
 
-export interface TestFixtures {
-    mailpitClient: MailpitClient;
-}
-
-export interface Services {
-    logger: Logger;
-
-    network: StartedNetwork;
-    postgres: StartedPostgreSqlContainer;
-    mailpit: StartedMailhogContainer;
-
-    synapseConfig: SynapseConfig;
-    _homeserver: HomeserverContainer<any>;
-    homeserver: StartedHomeserverContainer;
-    // Set in masHomeserver only
-    mas?: StartedMatrixAuthenticationServiceContainer;
+export interface Services extends BaseServices {
     // Set in legacyOAuthHomeserver only
     oAuthServer?: OAuthServer;
 }
 
-export interface Options {
+export interface WorkerOptions extends BaseWorkerOptions {
     homeserverType: HomeserverType;
 }
 
-export const test = base.extend<TestFixtures, Services & Options>({
-    logger: [
-        // eslint-disable-next-line no-empty-pattern
-        async ({}, use) => {
-            const logger = new Logger();
-            await use(logger);
-        },
-        { scope: "worker" },
-    ],
-    network: [
-        // eslint-disable-next-line no-empty-pattern
-        async ({}, use) => {
-            const network = await new Network().start();
-            await use(network);
-            await network.stop();
-        },
-        { scope: "worker" },
-    ],
-    postgres: [
-        async ({ logger, network }, use) => {
-            const container = await new PostgreSqlContainer()
-                .withNetwork(network)
-                .withNetworkAliases("postgres")
-                .withLogConsumer(logger.getConsumer("postgres"))
-                .withTmpFs({
-                    "/dev/shm/pgdata/data": "",
-                })
-                .withEnvironment({
-                    PG_DATA: "/dev/shm/pgdata/data",
-                })
-                .withCommand([
-                    "-c",
-                    "shared_buffers=128MB",
-                    "-c",
-                    `fsync=off`,
-                    "-c",
-                    `synchronous_commit=off`,
-                    "-c",
-                    "full_page_writes=off",
-                ])
-                .start();
-            await use(container);
-            await container.stop();
-        },
-        { scope: "worker" },
-    ],
-
-    mailpit: [
-        async ({ logger, network }, use) => {
-            const container = await new MailhogContainer()
-                .withNetwork(network)
-                .withNetworkAliases("mailpit")
-                .withLogConsumer(logger.getConsumer("mailpit"))
-                .start();
-            await use(container);
-            await container.stop();
-        },
-        { scope: "worker" },
-    ],
-    mailpitClient: async ({ mailpit: container }, use) => {
-        await container.client.deleteMessages();
-        await use(container.client);
-    },
-
-    synapseConfig: [{}, { scope: "worker" }],
+export const test = base.extend<{}, Services & WorkerOptions>({
     homeserverType: ["synapse", { option: true, scope: "worker" }],
     _homeserver: [
         async ({ homeserverType }, use) => {
-            let container: HomeserverContainer<any>;
+            let container: HomeserverContainer<unknown>;
             switch (homeserverType) {
                 case "synapse":
                     container = new SynapseContainer();
@@ -128,46 +47,12 @@ export const test = base.extend<TestFixtures, Services & Options>({
         },
         { scope: "worker" },
     ],
-    homeserver: [
-        async ({ homeserverType, logger, network, _homeserver: homeserver, synapseConfig, mas }, use) => {
-            if (homeserver instanceof SynapseContainer) {
-                homeserver.withConfig(synapseConfig);
-            }
-            const container = await homeserver
-                .withNetwork(network)
-                .withNetworkAliases("homeserver")
-                .withLogConsumer(logger.getConsumer(homeserverType))
-                .withMatrixAuthenticationService(mas)
-                .start();
 
-            await use(container);
-            await container.stop();
-        },
-        { scope: "worker" },
-    ],
-    mas: [
-        // eslint-disable-next-line no-empty-pattern
-        async ({}, use) => {
-            // we stub the mas fixture to allow `homeserver` to depend on it to ensure
-            // when it is specified by `masHomeserver` it is started before the homeserver
-            await use(undefined);
-        },
-        { scope: "worker" },
-    ],
-
-    context: async (
-        { homeserverType, synapseConfig, logger, context, request, _homeserver, homeserver },
-        use,
-        testInfo,
-    ) => {
+    context: async ({ homeserverType, synapseConfig, context, _homeserver }, use, testInfo) => {
         testInfo.skip(
             !(_homeserver instanceof SynapseContainer) && Object.keys(synapseConfig).length > 0,
             `Test specifies Synapse config options so is unsupported with ${homeserverType}`,
         );
-        homeserver.setRequest(request);
-        await logger.onTestStarted(context);
         await use(context);
-        await logger.onTestFinished(testInfo);
-        await homeserver.onTestFinished(testInfo);
     },
 });