Fix more flaky playwright tests (#29007)

* Group systemic playwright flakes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix more flaky tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix another flake 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> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix more flakes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix skip tests being wrong Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-01-17 11:08:49 +00:00
parent 7d30413178
commit e42ee727b4
14 changed files with 104 additions and 65 deletions
@@ -13,6 +13,14 @@ import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { Layout } from "../../../src/settings/enums/Layout";
 import { ElementAppPage } from "../../pages/ElementAppPage";

+// Find and click "Reply" button
+const clickButtonReply = async (tile: Locator) => {
+    await expect(async () => {
+        await tile.hover();
+        await tile.getByRole("button", { name: "Reply", exact: true }).click();
+    }).toPass();
+};
+
 test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
    test.use({
        displayName: "Hanako",
@@ -222,8 +230,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {

            // Find and click "Reply" button on MessageActionBar
            const tile = page.locator(".mx_EventTile_last");
-            await tile.hover();
-            await tile.getByRole("button", { name: "Reply", exact: true }).click();
+            await clickButtonReply(tile);

            // Reply to the player with another audio file
            await uploadFile(page, "playwright/sample-files/1sec.ogg");
@@ -251,18 +258,12 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {

            const tile = page.locator(".mx_EventTile_last");

-            // Find and click "Reply" button
-            const clickButtonReply = async () => {
-                await tile.hover();
-                await tile.getByRole("button", { name: "Reply", exact: true }).click();
-            };
-
            await uploadFile(page, "playwright/sample-files/upload-first.ogg");

            // Assert that the audio player is rendered
            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();

-            await clickButtonReply();
+            await clickButtonReply(tile);

            // Reply to the player with another audio file
            await uploadFile(page, "playwright/sample-files/upload-second.ogg");
@@ -270,7 +271,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            // Assert that the audio player is rendered
            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();

-            await clickButtonReply();
+            await clickButtonReply(tile);

            // Reply to the player with yet another audio file to create a reply chain
            await uploadFile(page, "playwright/sample-files/upload-third.ogg");
@@ -81,6 +81,7 @@ test.describe("Create Knock Room", () => {

        const spotlightDialog = await app.openSpotlight();
        await spotlightDialog.filter(Filter.PublicRooms);
+        await spotlightDialog.search("Cyber");
        await expect(spotlightDialog.results.nth(0)).toContainText("Cybersecurity");
    });
 });
@@ -284,6 +284,7 @@ test.describe("Knock Into Room", () => {

        const spotlightDialog = await app.openSpotlight();
        await spotlightDialog.filter(Filter.PublicRooms);
+        await spotlightDialog.search("Cyber");
        await expect(spotlightDialog.results.nth(0)).toContainText("Cybersecurity");
        await spotlightDialog.results.nth(0).click();

@@ -58,6 +58,16 @@ async function editMessage(page: Page, message: Locator, newMsg: string): Promis
    await editComposer.press("Enter");
 }

+const screenshotOptions = (page?: Page) => ({
+    mask: page ? [page.locator(".mx_MessageTimestamp")] : undefined,
+    // Hide the jump to bottom button in the timeline to avoid flakiness
+    css: `
+        .mx_JumpToBottomButton {
+            display: none !important;
+        }
+    `,
+});
+
 test.describe("Message rendering", () => {
    [
        { direction: "ltr", displayName: "Quentin" },
@@ -79,9 +89,10 @@ test.describe("Message rendering", () => {
                    await page.goto(`#/room/${room.roomId}`);

                    const msgTile = await sendMessage(page, "Hello, world!");
-                    await expect(msgTile).toMatchScreenshot(`basic-message-ltr-${direction}displayname.png`, {
-                        mask: [page.locator(".mx_MessageTimestamp")],
-                    });
+                    await expect(msgTile).toMatchScreenshot(
+                        `basic-message-ltr-${direction}displayname.png`,
+                        screenshotOptions(page),
+                    );
                },
            );

@@ -89,14 +100,17 @@ test.describe("Message rendering", () => {
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "/me lays an egg");
-                await expect(msgTile).toMatchScreenshot(`emote-ltr-${direction}displayname.png`);
+                await expect(msgTile).toMatchScreenshot(`emote-ltr-${direction}displayname.png`, screenshotOptions());
            });

            test("should render an LTR rich text emote", async ({ page, user, app, room }) => {
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "/me lays a *free range* egg");
-                await expect(msgTile).toMatchScreenshot(`emote-rich-ltr-${direction}displayname.png`);
+                await expect(msgTile).toMatchScreenshot(
+                    `emote-rich-ltr-${direction}displayname.png`,
+                    screenshotOptions(),
+                );
            });

            test("should render an edited LTR message", async ({ page, user, app, room }) => {
@@ -106,9 +120,10 @@ test.describe("Message rendering", () => {

                await editMessage(page, msgTile, "Hello, universe!");

-                await expect(msgTile).toMatchScreenshot(`edited-message-ltr-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
+                await expect(msgTile).toMatchScreenshot(
+                    `edited-message-ltr-${direction}displayname.png`,
+                    screenshotOptions(page),
+                );
            });

            test("should render a reply of a LTR message", async ({ page, user, app, room }) => {
@@ -122,32 +137,37 @@ test.describe("Message rendering", () => {
                ]);

                await replyMessage(page, msgTile, "response to multiline message");
-                await expect(msgTile).toMatchScreenshot(`reply-message-ltr-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
+                await expect(msgTile).toMatchScreenshot(
+                    `reply-message-ltr-${direction}displayname.png`,
+                    screenshotOptions(page),
+                );
            });

            test("should render a basic RTL text message", async ({ page, user, app, room }) => {
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "مرحبا بالعالم!");
-                await expect(msgTile).toMatchScreenshot(`basic-message-rtl-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
+                await expect(msgTile).toMatchScreenshot(
+                    `basic-message-rtl-${direction}displayname.png`,
+                    screenshotOptions(page),
+                );
            });

            test("should render an RTL emote", async ({ page, user, app, room }) => {
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "/me يضع بيضة");
-                await expect(msgTile).toMatchScreenshot(`emote-rtl-${direction}displayname.png`);
+                await expect(msgTile).toMatchScreenshot(`emote-rtl-${direction}displayname.png`, screenshotOptions());
            });

            test("should render a richtext RTL emote", async ({ page, user, app, room }) => {
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "/me أضع بيضة *حرة النطاق*");
-                await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`);
+                await expect(msgTile).toMatchScreenshot(
+                    `emote-rich-rtl-${direction}displayname.png`,
+                    screenshotOptions(),
+                );
            });

            test("should render an edited RTL message", async ({ page, user, app, room }) => {
@@ -157,9 +177,10 @@ test.describe("Message rendering", () => {

                await editMessage(page, msgTile, "مرحبا بالكون!");

-                await expect(msgTile).toMatchScreenshot(`edited-message-rtl-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
+                await expect(msgTile).toMatchScreenshot(
+                    `edited-message-rtl-${direction}displayname.png`,
+                    screenshotOptions(page),
+                );
            });

            test("should render a reply of a RTL message", async ({ page, user, app, room }) => {
@@ -173,9 +194,10 @@ test.describe("Message rendering", () => {
                ]);

                await replyMessage(page, msgTile, "مرحبا بالعالم!");
-                await expect(msgTile).toMatchScreenshot(`reply-message-trl-${direction}displayname.png`, {
-                    mask: [page.locator(".mx_MessageTimestamp")],
-                });
+                await expect(msgTile).toMatchScreenshot(
+                    `reply-message-trl-${direction}displayname.png`,
+                    screenshotOptions(page),
+                );
            });
        });
    });
@@ -35,10 +35,10 @@ test.describe("Pinned messages", () => {
                mask: [tile.locator(".mx_MessageTimestamp")],
                // Hide the jump to bottom button in the timeline to avoid flakiness
                css: `
-                .mx_JumpToBottomButton {
-                    display: none !important;
-                }
-            `,
+                    .mx_JumpToBottomButton {
+                        display: none !important;
+                    }
+                `,
            });
        },
    );
@@ -89,8 +89,7 @@ class Helpers {
        await expect(dialog.getByText(title, { exact: true })).toBeVisible();
        await expect(dialog).toMatchScreenshot(screenshot);

-        const handle = await this.page.evaluateHandle(() => navigator.clipboard.readText());
-        const clipboardContent = await handle.jsonValue();
+        const clipboardContent = await this.app.getClipboard();
        await dialog.getByRole("textbox").fill(clipboardContent);
        await dialog.getByRole("button", { name: confirmButtonLabel }).click();
        await expect(dialog).toMatchScreenshot("default-recovery.png");
@@ -53,7 +53,7 @@ test.describe("Recovery section in Encryption tab", () => {

    test(
        "should change the recovery key",
-        { tag: "@screenshot" },
+        { tag: ["@screenshot", "@no-webkit"] },
        async ({ page, app, homeserver, credentials, util, context }) => {
            await verifySession(app, "new passphrase");
            const dialog = await util.openEncryptionTab();
@@ -81,7 +81,7 @@ test.describe("Recovery section in Encryption tab", () => {
        },
    );

-    test("should setup the recovery key", { tag: "@screenshot" }, async ({ page, app, util }) => {
+    test("should setup the recovery key", { tag: ["@screenshot", "@no-webkit"] }, async ({ page, app, util }) => {
        await verifySession(app, "new passphrase");
        await util.removeSecretStorageDefaultKeyId();

@@ -84,7 +84,7 @@ test.describe("Spaces", () => {

            // Copy matrix.to link
            await page.getByRole("button", { name: "Share invite link" }).click();
-            expect(await app.getClipboardText()).toEqual(`https://matrix.to/#/#lets-have-a-riot:${user.homeServer}`);
+            expect(await app.getClipboard()).toEqual(`https://matrix.to/#/#lets-have-a-riot:${user.homeServer}`);

            // Go to space home
            await page.getByRole("button", { name: "Go to my first room" }).click();
@@ -177,7 +177,7 @@ test.describe("Spaces", () => {
        const shareDialog = page.locator(".mx_SpacePublicShare");
        // Copy link first
        await shareDialog.getByRole("button", { name: "Share invite link" }).click();
-        expect(await app.getClipboardText()).toEqual(`https://matrix.to/#/#space:${user.homeServer}`);
+        expect(await app.getClipboard()).toEqual(`https://matrix.to/#/#space:${user.homeServer}`);
        // Start Matrix invite flow
        await shareDialog.getByRole("button", { name: "Invite people" }).click();

@@ -38,11 +38,13 @@ export const test = base.extend<{
    room1Name: "Room 1",
    room1: async ({ room1Name: name, app, user, bot }, use) => {
        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await bot.awaitRoomMembership(roomId);
        await use({ name, roomId });
    },
    room2Name: "Room 2",
    room2: async ({ room2Name: name, app, user, bot }, use) => {
        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await bot.awaitRoomMembership(roomId);
        await use({ name, roomId });
    },
    msg: async ({ page, app, util }, use) => {
@@ -1195,6 +1195,7 @@ test.describe("Timeline", () => {
            });

            await sendImage(app.client, room.roomId, NEW_AVATAR);
+            await app.timeline.scrollToBottom();
            await expect(page.locator(".mx_MImageBody").first()).toBeVisible();

            // Exclude timestamp and read marker from snapshot