Port remaining login.spec.ts & soft_logout.spec.ts tests from Cypress to Playwright (#11917)

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

playwright/element-web-test.ts

@@ -16,12 +16,14 @@ limitations under the License.
 
 import { test as base, expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
+import _ from "lodash";
 
 import type mailhog from "mailhog";
 import type { IConfigOptions } from "../src/IConfigOptions";
-import { HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
+import { Credentials, HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
 import { Synapse } from "./plugins/synapse";
 import { Instance } from "./plugins/mailhog";
+import { OAuthServer } from "./plugins/oauth_server";
 
 const CONFIG_JSON: Partial<IConfigOptions> = {
     // This is deliberately quite a minimal config.json, so that we can test that the default settings
@@ -47,9 +49,16 @@ export const test = base.extend<
     TestOptions & {
         axe: AxeBuilder;
         checkA11y: () => Promise<void>;
+        // The contents of the config.json to send
         config: typeof CONFIG_JSON;
+        // The options with which to run the `homeserver` fixture
         startHomeserverOpts: StartHomeserverOpts | string;
         homeserver: HomeserverInstance;
+        oAuthServer: { port: number };
+        user: Credentials & {
+            displayName: string;
+        };
+        displayName?: string;
         mailhog?: { api: mailhog.API; instance: Instance };
     }
 >({
@@ -57,7 +66,7 @@ export const test = base.extend<
     config: CONFIG_JSON,
     page: async ({ context, page, config, crypto }, use) => {
         await context.route(`http://localhost:8080/config.json*`, async (route) => {
-            const json = { ...config };
+            const json = { ...CONFIG_JSON, ...config };
             if (crypto === "rust") {
                 json["features"] = {
                     ...json["features"],
@@ -66,6 +75,7 @@ export const test = base.extend<
             }
             await route.fulfill({ json });
         });
+
         await use(page);
     },
 
@@ -79,6 +89,49 @@ export const test = base.extend<
         await use(await server.start(opts));
         await server.stop();
     },
+    // eslint-disable-next-line no-empty-pattern
+    oAuthServer: async ({}, use) => {
+        const server = new OAuthServer();
+        const port = server.start();
+        await use({ port });
+        server.stop();
+    },
+
+    displayName: undefined,
+    user: async ({ page, homeserver, displayName: testDisplayName }, use) => {
+        const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
+        const username = _.uniqueId("user_");
+        const password = _.uniqueId("password_");
+        const displayName = testDisplayName ?? _.sample(names)!;
+
+        const credentials = await homeserver.registerUser(username, password, displayName);
+        console.log(`Registered test user ${username} with displayname ${displayName}`);
+
+        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");
+
+                // Ensure the language is set to a consistent value
+                window.localStorage.setItem("mx_local_settings", '{"language":"en"}');
+            },
+            { baseUrl: homeserver.config.baseUrl, credentials },
+        );
+        await page.goto("/");
+
+        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+        await use({
+            ...credentials,
+            displayName,
+        });
+    },
 
     axe: async ({ page }, use) => {
         await use(new AxeBuilder({ page }));
@@ -98,4 +151,4 @@ export const test = base.extend<
 
 test.use({});
 
-export { expect } from "@playwright/test";
+export { expect };