Fix some flaky playwright tests

Signed-off-by: Michael Telatynski <[email protected]>

playwright/e2e/audio-player/audio-player.spec.ts

@@ -253,7 +253,6 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             // Find and click "Reply" button
             const clickButtonReply = async () => {
-                await tile.scrollIntoViewIfNeeded();
                 await tile.hover();
                 await tile.getByRole("button", { name: "Reply", exact: true }).click();
             };

playwright/e2e/composer/RTE.spec.ts

@@ -79,9 +79,8 @@ test.describe("Composer", () => {
                     // Enter some more text, then send the message
                     await page.getByRole("textbox").pressSequentially("this is the spoiler text ");
                     await page.getByRole("button", { name: "Send message" }).click();
-                    // Check that a spoiler item has appeared in the timeline and locator the spoiler command text
-                    await expect(page.locator("button.mx_EventTile_spoiler")).toBeVisible();
-                    await expect(page.getByText("this is the spoiler text")).toBeVisible();
+                    // Check that a spoiler item has appeared in the timeline and contains the spoiler text
+                    await expect(page.locator("button.mx_EventTile_spoiler")).toHaveText("this is the spoiler text");
                 });
             });
         });

playwright/e2e/read-receipts/high-level.spec.ts

@@ -11,6 +11,8 @@ Please see LICENSE files in the repository root for full details.
 import { customEvent, many, test } from ".";
 
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
+    test.slow();
+
     test.describe("Ignored events", () => {
         test("If all events after receipt are unimportant, the room is read", async ({
             roomAlpha: room1,

playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts

@@ -37,7 +37,9 @@ test.describe("Roles & Permissions room settings tab", () => {
         // Change the role of Alice to Moderator (50)
         await combobox.selectOption("Moderator");
         await expect(combobox).toHaveValue("50");
+        const respPromise = page.waitForRequest("**/state/**");
         await applyButton.click();
+        await respPromise;
 
         // Reload and check Alice is still Moderator (50)
         await page.reload();

playwright/e2e/spotlight/spotlight.spec.ts

@@ -125,7 +125,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(room1Name);
         await resultLocator.first().click();
-        expect(page.url()).toContain(room1Id);
+        await expect(page).toContainUrl(`#/room/${room1Id}`);
         await expect(roomHeaderName(page)).toContainText(room1Name);
     });
 
@@ -139,7 +139,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator.first()).toContainText(room1Name);
         await expect(resultLocator.first()).toContainText("View");
         await resultLocator.first().click();
-        expect(page.url()).toContain(room1Id);
+        await expect(page).toContainUrl(`#/room/${room1Id}`);
         await expect(roomHeaderName(page)).toContainText(room1Name);
     });
 
@@ -153,7 +153,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator.first()).toContainText(room2Name);
         await expect(resultLocator.first()).toContainText("Join");
         await resultLocator.first().click();
-        expect(page.url()).toContain(room2Id);
+        await expect(page).toContainUrl(`#/room/${room2Id}`);
         await expect(page.locator(".mx_RoomView_MessageList")).toHaveCount(1);
         await expect(roomHeaderName(page)).toContainText(room2Name);
     });
@@ -168,7 +168,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator.first()).toContainText(room3Name);
         await expect(resultLocator.first()).toContainText("View");
         await resultLocator.first().click();
-        expect(page.url()).toContain(room3Id);
+        await expect(page).toContainUrl(`#/room/${room3Id}`);
         await page.getByRole("button", { name: "Join the discussion" }).click();
         await expect(roomHeaderName(page)).toHaveText(room3Name);
     });

playwright/element-web-test.ts

@@ -378,4 +378,51 @@ export const expect = baseExpect.extend({
 
         return { pass: true, message: () => "", name: "toMatchScreenshot" };
     },
+
+    /**
+     * Check if the URL of the page contains the expected string.
+     * Will wait for the URL to contain the expected string if it doesn't.
+     * @param receiver The page to check the URL of
+     * @param expected The expected substring to expect in the URL
+     */
+    async toContainUrl(this: ExpectMatcherState, receiver: Page, expected: string) {
+        let pass = true;
+
+        if (!receiver.url().includes(expected)) {
+            try {
+                await receiver.waitForURL(`**${expected}**`);
+            } catch {
+                pass = false;
+            }
+        }
+
+        if (pass) {
+            try {
+                expect(receiver.url()).toContain(expected);
+            } catch {
+                pass = false;
+            }
+        }
+
+        const actual = receiver.url();
+        const message = pass
+            ? () =>
+                  this.utils.matcherHint("toContainUrl", undefined, undefined, { isNot: this.isNot }) +
+                  "\n\n" +
+                  `Expected URL to contain: ${this.utils.printExpected(expected)}\n` +
+                  `URL is: ${actual}`
+            : () =>
+                  this.utils.matcherHint("toContainUrl", undefined, undefined, { isNot: this.isNot }) +
+                  "\n\n" +
+                  `Expected URL to contain: ${this.utils.printExpected(expected)}\n` +
+                  `URL is: ${actual}`;
+
+        return {
+            message,
+            pass,
+            name: "toContainUrl",
+            expected,
+            actual,
+        };
+    },
 });