Switch to TestContainers for manging services in Playwright (#28860)

* Switch to TestContainers for manging services in Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Flip fixture dependency order Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove mas dep Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update matrix-authentication-service in Playwright tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix SMTP port Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Strip ansi from playwright logs to make them more readable Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Actually do the update Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove access to homeserver.config.baseUrl field in favour of homeserver.baseUrl Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use sane default_server_config and specify server.invalid in the specific tests which demand it Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix mas run Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * break cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * typo Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * prettier Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Wire up basics of dendriteHomeserver Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-01-07 18:11:44 +00:00
parent 66bbb84e56
commit f75d1f5a5e
61 changed files with 1922 additions and 2703 deletions
--- a/playwright/e2e/app-loading/guest-registration.spec.ts
+++ b/playwright/e2e/app-loading/guest-registration.spec.ts
@@ -13,7 +13,9 @@ Please see LICENSE files in the repository root for full details.
 import { expect, test } from "../../element-web-test";

 test.use({
-    startHomeserverOpts: "guest-enabled",
+    synapseConfigOptions: {
+        allow_guest_access: true,
+    },
 });

 test("Shows the welcome page by default", async ({ page }) => {
--- a/playwright/e2e/crypto/backups.spec.ts
+++ b/playwright/e2e/crypto/backups.spec.ts
@@ -9,9 +9,10 @@ Please see LICENSE files in the repository root for full details.
 import { type Page } from "@playwright/test";

 import { test, expect } from "../../element-web-test";
-import { test as masTest, registerAccountMas } from "../oidc";
+import { registerAccountMas } from "../oidc";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { TestClientServerAPI } from "../csAPI";
+import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";

 async function expectBackupVersionToBe(page: Page, version: string) {
    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(5) td")).toHaveText(
@@ -24,22 +25,23 @@ async function expectBackupVersionToBe(page: Page, version: string) {
 // 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 a user an synthesizes an existing login,
 // which is faster but leaves us without crypto set up.
-masTest.describe("Encryption state after registration", () => {
-    masTest.skip(isDendrite, "does not yet support MAS");
+test.describe("Encryption state after registration", () => {
+    test.use(masHomeserver);
+    test.skip(isDendrite, "does not yet support MAS");

-    masTest("Key backup is enabled by default", async ({ page, mailhog, app }) => {
+    test("Key backup is enabled by default", async ({ page, mailhogClient, app }) => {
        await page.goto("/#/login");
        await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhog.api, "alice", "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");

        await app.settings.openUserSettings("Security & Privacy");
        await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
    });

-    masTest("user is prompted to set up recovery", async ({ page, mailhog, app }) => {
+    test("user is prompted to set up recovery", async ({ page, mailhogClient, app }) => {
        await page.goto("/#/login");
        await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhog.api, "alice", "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");

        await page.getByRole("button", { name: "Add room" }).click();
        await page.getByRole("menuitem", { name: "New room" }).click();
@@ -50,57 +52,53 @@ masTest.describe("Encryption state after registration", () => {
    });
 });

-masTest.describe("Key backup reset from elsewhere", () => {
-    masTest.skip(isDendrite, "does not yet support MAS");
+test.describe("Key backup reset from elsewhere", () => {
+    test.use(masHomeserver);
+    test.skip(isDendrite, "does not yet support MAS");

-    masTest(
-        "Key backup is disabled when reset from elsewhere",
-        async ({ page, mailhog, request, masPrepare, homeserver }) => {
-            const testUsername = "alice";
-            const testPassword = "Pa$sW0rD!";
+    test("Key backup is disabled when reset from elsewhere", async ({ page, mailhogClient, request, homeserver }) => {
+        const testUsername = "alice";
+        const testPassword = "Pa$sW0rD!";

-            // there's a delay before keys are uploaded so the error doesn't appear immediately: use a fake
-            // clock so we can skip the delay
-            await page.clock.install();
+        // there's a delay before keys are uploaded so the error doesn't appear immediately: use a fake
+        // clock so we can skip the delay
+        await page.clock.install();

-            await page.goto("/#/login");
-            await page.getByRole("button", { name: "Continue" }).click();
-            await registerAccountMas(page, mailhog.api, testUsername, "alice@email.com", testPassword);
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await registerAccountMas(page, mailhogClient, testUsername, "alice@email.com", testPassword);

-            await page.getByRole("button", { name: "Add room" }).click();
-            await page.getByRole("menuitem", { name: "New room" }).click();
-            await page.getByRole("textbox", { name: "Name" }).fill("test room");
-            await page.getByRole("button", { name: "Create room" }).click();
+        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await page.getByRole("textbox", { name: "Name" }).fill("test room");
+        await page.getByRole("button", { name: "Create room" }).click();

-            // @ts-ignore - this runs in the browser scope where mxMatrixClientPeg is a thing. Here, it is not.
-            const accessToken = await page.evaluate(() => mxMatrixClientPeg.get().getAccessToken());
+        // @ts-ignore - this runs in the browser scope where mxMatrixClientPeg is a thing. Here, it is not.
+        const accessToken = await page.evaluate(() => mxMatrixClientPeg.get().getAccessToken());

-            const csAPI = new TestClientServerAPI(request, homeserver, accessToken);
+        const csAPI = new TestClientServerAPI(request, homeserver, accessToken);

-            const backupInfo = await csAPI.getCurrentBackupInfo();
+        const backupInfo = await csAPI.getCurrentBackupInfo();

-            await csAPI.deleteBackupVersion(backupInfo.version);
+        await csAPI.deleteBackupVersion(backupInfo.version);

-            await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("/discardsession");
-            await page.getByRole("button", { name: "Send message" }).click();
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("/discardsession");
+        await page.getByRole("button", { name: "Send message" }).click();

-            await page
-                .getByRole("textbox", { name: "Send an encrypted message…" })
-                .fill("Message with broken key backup");
-            await page.getByRole("button", { name: "Send message" }).click();
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("Message with broken key backup");
+        await page.getByRole("button", { name: "Send message" }).click();

-            // Should be the message we sent plus the room creation event
-            await expect(page.locator(".mx_EventTile")).toHaveCount(2);
-            await expect(
-                page.locator(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent"),
-            ).toBeVisible();
+        // Should be the message we sent plus the room creation event
+        await expect(page.locator(".mx_EventTile")).toHaveCount(2);
+        await expect(
+            page.locator(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent"),
+        ).toBeVisible();

-            // Wait for it to try uploading the key
-            await page.clock.fastForward(20000);
+        // Wait for it to try uploading the key
+        await page.clock.fastForward(20000);

-            await expect(page.getByRole("heading", { level: 1, name: "New Recovery Method" })).toBeVisible();
-        },
-    );
+        await expect(page.getByRole("heading", { level: 1, name: "New Recovery Method" })).toBeVisible();
+    });
 });

 test.describe("Backups", () => {
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -8,29 +8,10 @@ Please see LICENSE files in the repository root for full details.

 import { Locator, type Page } from "@playwright/test";

-import { test as base, expect, Fixtures } from "../../element-web-test";
+import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "../right-panel/utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";

-const test = base.extend<Fixtures>({
-    // eslint-disable-next-line no-empty-pattern
-    startHomeserverOpts: async ({}, use) => {
-        await use("dehydration");
-    },
-    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);
-    },
-});
-
 const ROOM_NAME = "Test room";
 const NAME = "Alice";

@@ -43,6 +24,24 @@ test.describe("Dehydration", () => {

    test.use({
        displayName: NAME,
+        synapseConfigOptions: {
+            experimental_features: {
+                msc2697_enabled: false,
+                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("Create dehydrated device", async ({ page, user, app }, workerInfo) => {
--- a/playwright/e2e/crypto/migration.spec.ts
+++ b/playwright/e2e/crypto/migration.spec.ts
@@ -9,24 +9,24 @@ Please see LICENSE files in the repository root for full details.
 import path from "path";
 import { readFile } from "node:fs/promises";

-import { expect, Fixtures, test as base } from "../../element-web-test";
-
-const test = base.extend<Fixtures>({
-    // Replace the `user` fixture with one which populates the indexeddb data before starting the app.
-    user: async ({ context, pageWithCredentials: page, credentials }, use) => {
-        await page.route(`/test_indexeddb_cryptostore_dump/*`, async (route, request) => {
-            const resourcePath = path.join(__dirname, new URL(request.url()).pathname);
-            const body = await readFile(resourcePath, { encoding: "utf-8" });
-            await route.fulfill({ body });
-        });
-        await page.goto("/test_indexeddb_cryptostore_dump/index.html");
-
-        await use(credentials);
-    },
-});
+import { expect, test } from "../../element-web-test";

 test.describe("migration", { tag: "@no-webkit" }, function () {
-    test.use({ displayName: "Alice" });
+    test.use({
+        displayName: "Alice",
+
+        // Replace the `user` fixture with one which populates the indexeddb data before starting the app.
+        user: async ({ context, pageWithCredentials: page, credentials }, use) => {
+            await page.route(`/test_indexeddb_cryptostore_dump/*`, async (route, request) => {
+                const resourcePath = path.join(__dirname, new URL(request.url()).pathname);
+                const body = await readFile(resourcePath, { encoding: "utf-8" });
+                await route.fulfill({ body });
+            });
+            await page.goto("/test_indexeddb_cryptostore_dump/index.html");
+
+            await use(credentials);
+        },
+    });

    test("Should support migration from legacy crypto", async ({ context, user, page }, workerInfo) => {
        test.slow();
--- a/playwright/e2e/forgot-password/forgot-password.spec.ts
+++ b/playwright/e2e/forgot-password/forgot-password.spec.ts
@@ -8,6 +8,8 @@ Please see LICENSE files in the repository root for full details.

 import { expect, test } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
+import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
+import { isDendrite } from "../../plugins/homeserver/dendrite";

 const username = "user1234";
 // this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
@@ -15,6 +17,8 @@ const password = "oETo7MPf0o";
 const email = "user@nowhere.dummy";

 test.describe("Forgot Password", () => {
+    test.skip(isDendrite, "not yet wired up");
+    test.use(emailHomeserver);
    test.use({
        config: {
            // The only thing that we really *need* (otherwise Element refuses to load) is a default homeserver.
@@ -25,14 +29,6 @@ test.describe("Forgot Password", () => {
                },
            },
        },
-        startHomeserverOpts: ({ mailhog }, use) =>
-            use({
-                template: "email",
-                variables: {
-                    SMTP_HOST: "host.containers.internal",
-                    SMTP_PORT: mailhog.instance.smtpPort,
-                },
-            }),
    });

    test("renders properly", { tag: "@screenshot" }, async ({ page, homeserver }) => {
--- a/playwright/e2e/login/consent.spec.ts
+++ b/playwright/e2e/login/consent.spec.ts
@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import { test, expect } from "../../element-web-test";
+import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";

 test.describe("Consent", () => {
+    test.use(consentHomeserver);
    test.use({
-        startHomeserverOpts: "consent",
        displayName: "Bob",
    });

--- a/playwright/e2e/login/login.spec.ts
+++ b/playwright/e2e/login/login.spec.ts
@@ -13,6 +13,8 @@ import { doTokenRegistration } from "./utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { selectHomeserver } from "../utils";
 import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
+import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";
+import { legacyOAuthHomeserver } from "../../plugins/homeserver/synapse/legacyOAuthHomeserver.ts";

 const username = "user1234";
 const password = "p4s5W0rD";
@@ -91,7 +93,7 @@ test.describe("Login", () => {
    });

    test.describe("Password login", () => {
-        test.use({ startHomeserverOpts: "consent" });
+        test.use(consentHomeserver);

        let creds: Credentials;

@@ -238,14 +240,7 @@ test.describe("Login", () => {
    // tests for old-style SSO login, in which we exchange tokens with Synapse, and Synapse talks to an auth server
    test.describe("SSO login", () => {
        test.skip(isDendrite, "does not yet support SSO");
-
-        test.use({
-            startHomeserverOpts: ({ oAuthServer }, use) =>
-                use({
-                    template: "default",
-                    oAuthServerPort: oAuthServer.port,
-                }),
-        });
+        test.use(legacyOAuthHomeserver);

        test("logs in with SSO and lands on the home screen", async ({ page, homeserver }) => {
            // If this test fails with a screen showing "Timeout connecting to remote server", it is most likely due to
@@ -259,7 +254,7 @@ test.describe("Login", () => {
    });

    test.describe("logout", () => {
-        test.use({ startHomeserverOpts: "consent" });
+        test.use(consentHomeserver);

        test("should go to login page on logout", async ({ page, user }) => {
            await page.getByRole("button", { name: "User menu" }).click();
@@ -274,8 +269,8 @@ test.describe("Login", () => {
    });

    test.describe("logout with logout_redirect_url", () => {
+        test.use(consentHomeserver);
        test.use({
-            startHomeserverOpts: "consent",
            config: {
                // We redirect to decoder-ring because it's a predictable page that isn't Element itself.
                // We could use example.org, matrix.org, or something else, however this puts dependency of external
--- a/playwright/e2e/login/soft_logout.spec.ts
+++ b/playwright/e2e/login/soft_logout.spec.ts
@@ -11,7 +11,7 @@ import { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { doTokenRegistration } from "./utils";
 import { Credentials } from "../../plugins/homeserver";
-import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { legacyOAuthHomeserver } from "../../plugins/homeserver/synapse/legacyOAuthHomeserver.ts";

 test.describe("Soft logout", () => {
    test.use({
@@ -25,11 +25,6 @@ test.describe("Soft logout", () => {
                },
            },
        },
-        startHomeserverOpts: ({ oAuthServer }, use) =>
-            use({
-                template: "default",
-                oAuthServerPort: oAuthServer.port,
-            }),
    });

    test.describe("with password user", () => {
@@ -58,8 +53,7 @@ test.describe("Soft logout", () => {
    });

    test.describe("with SSO user", () => {
-        test.skip(isDendrite, "does not yet support SSO");
-
+        test.use(legacyOAuthHomeserver);
        test.use({
            user: async ({ page, homeserver }, use) => {
                const user = await doTokenRegistration(page, homeserver);
--- a/playwright/e2e/oidc/index.ts
+++ b/playwright/e2e/oidc/index.ts
@@ -9,57 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { API, Messages } from "mailhog";
 import { Page } from "@playwright/test";

-import { test as base, expect } from "../../element-web-test";
-import { MatrixAuthenticationService } from "../../plugins/matrix-authentication-service";
-import { StartHomeserverOpts } from "../../plugins/homeserver";
-
-export const test = base.extend<{
-    masPrepare: MatrixAuthenticationService;
-    mas: MatrixAuthenticationService;
-}>({
-    // There's a bit of a chicken and egg problem between MAS & Synapse where they each need to know how to reach each other
-    // so spinning up a MAS is split into the prepare & start stage: prepare mas -> homeserver -> start mas to disentangle this.
-    masPrepare: async ({ context }, use) => {
-        const mas = new MatrixAuthenticationService(context);
-        await mas.prepare();
-        await use(mas);
-    },
-    mas: [
-        async ({ masPrepare: mas, homeserver, mailhog }, use, testInfo) => {
-            await mas.start(homeserver, mailhog.instance);
-            await use(mas);
-            await mas.stop(testInfo);
-        },
-        { auto: true },
-    ],
-    startHomeserverOpts: async ({ masPrepare }, use) => {
-        await use({
-            template: "mas-oidc",
-            variables: {
-                MAS_PORT: masPrepare.port,
-            },
-        });
-    },
-    config: async ({ config, startHomeserverOpts, context }, use) => {
-        const issuer = `http://localhost:${(startHomeserverOpts as StartHomeserverOpts).variables["MAS_PORT"]}/`;
-        const wellKnown = {
-            ...config.default_server_config,
-            "org.matrix.msc2965.authentication": {
-                issuer,
-                account: `${issuer}account`,
-            },
-        };
-
-        // Ensure org.matrix.msc2965.authentication is in well-known
-        await context.route("https://localhost/.well-known/matrix/client", async (route) => {
-            await route.fulfill({ json: wellKnown });
-        });
-
-        await use(config);
-    },
-});
-
-export { expect };
+import { expect } from "../../element-web-test";

 export async function registerAccountMas(
    page: Page,
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@@ -6,23 +6,26 @@ 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, expect, registerAccountMas } from ".";
-import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { test, expect } from "../../element-web-test.ts";
+import { registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";

 test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
+    test.use(masHomeserver);
    test.skip(isDendrite, "does not yet support MAS");
    test.slow(); // trace recording takes a while here

-    test("can register the oauth2 client and an account", async ({ context, page, homeserver, mailhog, mas }) => {
-        const tokenUri = `http://localhost:${mas.port}/oauth2/token`;
+    test("can register the oauth2 client and an account", async ({ context, page, homeserver, mailhogClient, mas }) => {
+        const tokenUri = `${mas.baseUrl}/oauth2/token`;
        const tokenApiPromise = page.waitForRequest(
            (request) => request.url() === tokenUri && request.postDataJSON()["grant_type"] === "authorization_code",
        );

        await page.goto("/#/login");
        await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhog.api, "alice", "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhogClient, "alice", "alice@email.com", "Pa$sW0rD!");

        // Eventually, we should end up at the home screen.
        await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
@@ -49,7 +52,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
        await newPage.close();

        // Assert logging out revokes both tokens
-        const revokeUri = `http://localhost:${mas.port}/oauth2/revoke`;
+        const revokeUri = `${mas.baseUrl}/oauth2/revoke`;
        const revokeAccessTokenPromise = page.waitForRequest(
            (request) => request.url() === revokeUri && request.postDataJSON()["token_type_hint"] === "access_token",
        );
--- a/playwright/e2e/register/email.spec.ts
+++ b/playwright/e2e/register/email.spec.ts
@@ -7,20 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */

 import { test, expect } from "../../element-web-test";
+import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";

 test.describe("Email Registration", async () => {
    test.skip(isDendrite, "not yet wired up");
-
+    test.use(emailHomeserver);
    test.use({
-        startHomeserverOpts: ({ mailhog }, use) =>
-            use({
-                template: "email",
-                variables: {
-                    SMTP_HOST: "host.containers.internal",
-                    SMTP_PORT: mailhog.instance.smtpPort,
-                },
-            }),
        config: ({ config }, use) =>
            use({
                ...config,
@@ -40,7 +33,7 @@ test.describe("Email Registration", async () => {
    test(
        "registers an account and lands on the use case selection screen",
        { tag: "@screenshot" },
-        async ({ page, mailhog, request, checkA11y }) => {
+        async ({ page, mailhogClient, request, checkA11y }) => {
            await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
            // Hide the server text as it contains the randomly allocated Homeserver port
            const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
@@ -57,7 +50,7 @@ test.describe("Email Registration", async () => {

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

-            const messages = await mailhog.api.messages();
+            const messages = await mailhogClient.messages();
            expect(messages.items).toHaveLength(1);
            expect(messages.items[0].to).toEqual("alice@email.com");
            const [emailLink] = messages.items[0].text.match(/http.+/);
--- a/playwright/e2e/register/register.spec.ts
+++ b/playwright/e2e/register/register.spec.ts
@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import { test, expect } from "../../element-web-test";
+import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";

 test.describe("Registration", () => {
+    test.use(consentHomeserver);
    test.use({
-        startHomeserverOpts: "consent",
        config: {
            // The only thing that we really *need* (otherwise Element refuses to load) is a default homeserver.
            // We point that to a guaranteed-invalid domain.
--- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts
+++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts
@@ -7,21 +7,31 @@ Please see LICENSE files in the repository root for full details.
 */

 import { Page, Request } from "@playwright/test";
+import { GenericContainer, StartedTestContainer, Wait } from "testcontainers";

 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
 import type { Bot } from "../../pages/bot";
-import { ProxyInstance, SlidingSyncProxy } from "../../plugins/sliding-sync-proxy";

 const test = base.extend<{
-    slidingSyncProxy: ProxyInstance;
+    slidingSyncProxy: StartedTestContainer;
    testRoom: { roomId: string; name: string };
    joinedBot: Bot;
 }>({
-    slidingSyncProxy: async ({ context, page, homeserver }, use) => {
-        const proxy = new SlidingSyncProxy(homeserver.config.dockerUrl, context);
-        const proxyInstance = await proxy.start();
-        const proxyAddress = `http://localhost:${proxyInstance.port}`;
+    slidingSyncProxy: async ({ logger, network, postgres, page, homeserver }, use, testInfo) => {
+        const container = await new GenericContainer("ghcr.io/matrix-org/sliding-sync:v0.99.3")
+            .withNetwork(network)
+            .withExposedPorts(8008)
+            .withLogConsumer(logger.getConsumer("sliding-sync-proxy"))
+            .withWaitStrategy(Wait.forHttp("/client/server.json", 8008))
+            .withEnvironment({
+                SYNCV3_SECRET: "bwahahaha",
+                SYNCV3_DB: `user=${postgres.getUsername()} dbname=postgres password=${postgres.getPassword()} host=postgres sslmode=disable`,
+                SYNCV3_SERVER: `http://homeserver:8008`,
+            })
+            .start();
+
+        const proxyAddress = `http://${container.getHost()}:${container.getMappedPort(8008)}`;
        await page.addInitScript((proxyAddress) => {
            window.localStorage.setItem(
                "mx_local_settings",
@@ -31,8 +41,8 @@ const test = base.extend<{
            );
            window.localStorage.setItem("mx_labs_feature_feature_sliding_sync", "true");
        }, proxyAddress);
-        await use(proxyInstance);
-        await proxy.stop();
+        await use(container);
+        await container.stop();
    },
    // Ensure slidingSyncProxy is set up before the user fixture as it relies on an init script
    credentials: async ({ slidingSyncProxy, credentials }, use) => {