Improvements to Playwright test infrastructure (#12260)

* Move mailhog fixture to element-web-test.ts

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

* Remove spurious debug log

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

* Lazily set up ElementAppPage subfixtures to avoid conflicting on network routing

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

* Update playwright/e2e/crypto/utils.ts

---------

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

playwright/e2e/crypto/utils.ts

@@ -36,9 +36,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 export async function waitForVerificationRequest(client: Client): Promise<JSHandle<VerificationRequest>> {
     return client.evaluateHandle((cli) => {
         return new Promise<VerificationRequest>((resolve) => {
-            console.log("~~");
             const onVerificationRequestEvent = async (request: VerificationRequest) => {
-                console.log("@@", request);
                 await request.accept();
                 resolve(request);
             };

playwright/e2e/register/email.spec.ts

@@ -15,20 +15,12 @@ limitations under the License.
 */
 
 import { test, expect } from "../../element-web-test";
-import { MailHogServer } from "../../plugins/mailhog";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Email Registration", async () => {
     test.skip(isDendrite, "not yet wired up");
 
     test.use({
-        // eslint-disable-next-line no-empty-pattern
-        mailhog: async ({}, use) => {
-            const mailhog = new MailHogServer();
-            const instance = await mailhog.start();
-            await use(instance);
-            await mailhog.stop();
-        },
         startHomeserverOpts: ({ mailhog }, use) =>
             use({
                 template: "email",

playwright/element-web-test.ts

@@ -24,7 +24,7 @@ import type { IConfigOptions } from "../src/IConfigOptions";
 import { Credentials, Homeserver, HomeserverInstance, StartHomeserverOpts } from "./plugins/homeserver";
 import { Synapse } from "./plugins/homeserver/synapse";
 import { Dendrite, Pinecone } from "./plugins/homeserver/dendrite";
-import { Instance } from "./plugins/mailhog";
+import { Instance, MailHogServer } from "./plugins/mailhog";
 import { ElementAppPage } from "./pages/ElementAppPage";
 import { OAuthServer } from "./plugins/oauth_server";
 import { Crypto } from "./pages/crypto";
@@ -86,7 +86,7 @@ export const test = base.extend<
         user: CredentialsWithDisplayName;
         displayName?: string;
         app: ElementAppPage;
-        mailhog?: { api: mailhog.API; instance: Instance };
+        mailhog: { api: mailhog.API; instance: Instance };
         crypto: Crypto;
         room?: { roomId: string };
         toasts: Toasts;
@@ -234,6 +234,14 @@ export const test = base.extend<
         await use(bot);
     },
 
+    // eslint-disable-next-line no-empty-pattern
+    mailhog: async ({}, use) => {
+        const mailhog = new MailHogServer();
+        const instance = await mailhog.start();
+        await use(instance);
+        await mailhog.stop();
+    },
+
     slidingSyncProxy: async ({ page, user, homeserver }, use) => {
         const proxy = new SlidingSyncProxy(homeserver.config.dockerUrl);
         const proxyInstance = await proxy.start();

playwright/pages/ElementAppPage.ts

@@ -24,9 +24,23 @@ import { Spotlight } from "./Spotlight";
 export class ElementAppPage {
     public constructor(public readonly page: Page) {}
 
-    public settings = new Settings(this.page);
-    public client: Client = new Client(this.page);
-    public timeline: Timeline = new Timeline(this.page);
+    // We create these lazily on first access to avoid calling setup code which might cause conflicts,
+    // e.g. the network routing code in the client subfixture.
+    private _settings?: Settings;
+    public get settings(): Settings {
+        if (!this._settings) this._settings = new Settings(this.page);
+        return this._settings;
+    }
+    private _client?: Client;
+    public get client(): Client {
+        if (!this._client) this._client = new Client(this.page);
+        return this._client;
+    }
+    private _timeline?: Timeline;
+    public get timeline(): Timeline {
+        if (!this._timeline) this._timeline = new Timeline(this.page);
+        return this._timeline;
+    }
 
     /**
      * Open the top left user menu, returning a Locator to the resulting context menu.