Fix flakiness in playwright tests (#12512)

* Remove redundant option

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

* Stabilise app download dialog screenshot test

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

* Try to stabilise user menu opening in playwright tests

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

* Stabilise one-to-one-chat.spec.ts

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

* Stabilise kick.spec.ts

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

* Iterate

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

* Discard changes to playwright/element-web-test.ts

---------

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

playwright/e2e/login/overwrite_login.spec.ts

@@ -47,7 +47,6 @@ test.describe("Overwrite login action", () => {
         }, clientCredentials);
 
         // It should be now another user!!
-        const newUserMenu = await app.openUserMenu();
+        await expect(page.getByText("Welcome BOB")).toBeVisible();
-        await expect(newUserMenu.getByText(bobRegister.userId)).toBeVisible();
     });
 });

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -45,6 +45,7 @@ test.describe("1:1 chat room", () => {
         await expect(
             page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile").getByText(user2.displayName),
         ).not.toBeVisible();
+        await page.waitForTimeout(500); // avoid race condition with routing
 
         // open new 1:1 chat room
         await page.goto(`/#/user/${user2.userId}?action=chat`);

playwright/e2e/user-onboarding/user-onboarding-new.spec.ts

@@ -45,7 +45,17 @@ test.describe("User Onboarding (new user)", () => {
         await expect(
             page.getByRole("dialog").getByRole("heading", { level: 1, name: "Download Element" }),
         ).toBeVisible();
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot(
+            "User-Onboarding-new-user-app-download-dialog-1.png",
+            {
+                // Set a constant bg behind the modal to ensure screenshot stability
+                css: `
+                    .mx_AppDownloadDialog_wrapper {
+                        background: black;
+                    }
+                `,
+            },
+        );
     });
 
     test("using find friends action should increase progress", async ({ page, homeserver }) => {

playwright/pages/settings.ts

@@ -25,8 +25,9 @@ export class Settings {
      * Open the top left user menu, returning a Locator to the resulting context menu.
      */
     public async openUserMenu(): Promise<Locator> {
-        await this.page.getByRole("button", { name: "User menu" }).click();
         const locator = this.page.locator(".mx_ContextualMenu");
+        if (await locator.locator(".mx_UserMenu_contextMenu_header").isVisible()) return locator;
+        await this.page.getByRole("button", { name: "User menu" }).click();
         await locator.waitFor();
         return locator;
     }