Stabilise flaky playwright tests (#32601)

* Stabilise flaky playwright tests

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

* Stabilise flaky tests screenshotting CIDER pills

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

---------

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

playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -30,6 +30,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
     const app = new ElementAppPage(page);
     await app.client.createRoom({ name: "Test Room" });
     await app.viewRoomByName("Test Room");
+    await expect(page).toHaveURL(/\/#\/room\//);
 
     // Navigate away
     await page.goto("about:blank");

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

@@ -36,7 +36,6 @@ test.describe("Roles & Permissions room settings tab", () => {
 
         // Change the role of Alice to Moderator (50)
         await combobox.selectOption("Moderator");
-        await expect(combobox).toHaveValue("50");
 
         // Should display a modal to warn that we are demoting the only admin user
         const modal = await page.locator(".mx_Dialog", {
@@ -49,6 +48,7 @@ test.describe("Roles & Permissions room settings tab", () => {
         const respPromise = page.waitForRequest("**/state/**");
         await applyButton.click();
         await respPromise;
+        await expect(combobox).toHaveValue("50");
 
         // Reload and check Alice is still Moderator (50)
         await page.reload();

playwright/e2e/widgets/permissions-dialog.spec.ts

@@ -36,7 +36,7 @@ const DEMO_WIDGET_HTML = `
     </html>
 `;
 
-test.describe("Widger permissions dialog", () => {
+test.describe("Widget permissions dialog", () => {
     test.use({
         displayName: "Mike",
     });
@@ -88,7 +88,7 @@ test.describe("Widger permissions dialog", () => {
             // open the room
             await app.viewRoomByName(ROOM_NAME);
 
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            axe.disableRules(["color-contrast", "nested-interactive"]); // XXX: Inheriting colour contrast issues from room view.
             await expect(axe).toHaveNoViolations();
             await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
                 "widget-capabilites-prompt.png",

playwright/element-web-test.ts

@@ -136,6 +136,10 @@ export const expect = baseExpect.extend<Expectations>({
                 border-color: var(--cpd-color-fuchsia-1200) !important;
                 color: white !important;
             }
+            span.mx_Pill:not([style*="--avatar-letter: ''"])::before {
+                background: var(--cpd-color-fuchsia-1200) !important;
+                color: white !important;
+            }
             .mx_ReplyChain {
                 border-left-color: var(--cpd-color-blue-1200) !important;
             }