Migrate timeline.spec.ts from Cypress to Playwright (#12025)

* Migrate timeline.spec.ts from Cypress to Playwright

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

* Monospace font for timestamps

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

* More expects

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

* delint

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

---------

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

playwright.config.ts

@@ -26,7 +26,10 @@ export default defineConfig<TestOptions>({
         ignoreHTTPSErrors: true,
         video: "retain-on-failure",
         baseURL,
-        permissions: ["clipboard-write", "clipboard-read"],
+        permissions: ["clipboard-write", "clipboard-read", "microphone"],
+        launchOptions: {
+            args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
+        },
         trace: "on-first-retry",
     },
     webServer: {

playwright/element-web-test.ts

@@ -250,6 +250,10 @@ export const expect = baseExpect.extend({
                 .mx_ReplyChain {
                     border-left-color: var(--cpd-color-blue-1200) !important;
                 }
+                /* Use monospace font for timestamp for consistent mask width */
+                .mx_MessageTimestamp {
+                    font-family: Inconsolata !important;
+                }
                 ${options?.css ?? ""}
             `,
         })) as ElementHandle<Element>;

playwright/pages/ElementAppPage.ts

@@ -105,6 +105,14 @@ export class ElementAppPage {
         return this.page.locator(`${panelClass} .mx_MessageComposer`);
     }
 
+    /**
+     * Get the composer input field
+     * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+     */
+    public getComposerField(isRightPanel?: boolean): Locator {
+        return this.getComposer(isRightPanel).locator("[contenteditable]");
+    }
+
     /**
      * Open the message composer kebab menu
      * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
@@ -155,4 +163,10 @@ export class ElementAppPage {
         await spotlight.open();
         return spotlight;
     }
+
+    public async scrollToBottom(page: Page): Promise<void> {
+        await page
+            .locator(".mx_ScrollPanel")
+            .evaluate((scrollPanel) => scrollPanel.scrollTo(0, scrollPanel.scrollHeight));
+    }
 }

playwright/pages/client.ts

@@ -28,6 +28,8 @@ import type {
     IRoomDirectoryOptions,
     KnockRoomOpts,
     Visibility,
+    UploadOpts,
+    Upload,
 } from "matrix-js-sdk/src/matrix";
 import { Credentials } from "../plugins/homeserver";
 
@@ -293,6 +295,46 @@ export class Client {
         }, options);
     }
 
+    /**
+     * @param {string} name
+     * @param {module:client.callback} callback Optional.
+     * @return {Promise} Resolves: {} an empty object.
+     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     */
+    public async setDisplayName(name: string): Promise<{}> {
+        const client = await this.prepareClient();
+        return client.evaluate(async (cli: MatrixClient, name) => cli.setDisplayName(name), name);
+    }
+
+    /**
+     * @param {string} url
+     * @param {module:client.callback} callback Optional.
+     * @return {Promise} Resolves: {} an empty object.
+     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     */
+    public async setAvatarUrl(url: string): Promise<{}> {
+        const client = await this.prepareClient();
+        return client.evaluate(async (cli: MatrixClient, url) => cli.setAvatarUrl(url), url);
+    }
+
+    /**
+     * Upload a file to the media repository on the homeserver.
+     *
+     * @param {object} file The object to upload. On a browser, something that
+     *   can be sent to XMLHttpRequest.send (typically a File).  Under node.js,
+     *   a Buffer, String or ReadStream.
+     */
+    public async uploadContent(file: Buffer, opts?: UploadOpts): Promise<Awaited<Upload["promise"]>> {
+        const client = await this.prepareClient();
+        return client.evaluate(
+            async (cli: MatrixClient, { file, opts }) => cli.uploadContent(new Uint8Array(file), opts),
+            {
+                file: [...file],
+                opts,
+            },
+        );
+    }
+
     /**
      * Boostraps cross-signing.
      */