Fix flaky Cypress test cypress/e2e/widgets/stickers.spec.ts (#11440)

* Fix tests choosing the wrong room by matching on exact room name in viewRoomByName

* Allow either of the two different URLs for thumbnails in sticker test

* Find room by looking inside Rooms for something with the right text

* Check for the download URL of a thumbnail only, which will appear after the thumbnail 404s

* Click the title div instead of the contained span, to avoid clicking something potentially off-screen

* Find by label text because that works when room list is folded

* Find room by title because label text is different

* Attempt to allow opening room by name in all needed cases

Author: andybalaam

cypress/e2e/widgets/stickers.spec.ts

@@ -86,10 +86,10 @@ function expectTimelineSticker(roomId: string) {
     // Make sure it's in the right room
     cy.get(".mx_EventTile_sticker > a").should("have.attr", "href").and("include", `/${roomId}/`);
 
-    // Make sure the image points at the sticker image
-    cy.get<HTMLImageElement>(`img[alt="${STICKER_NAME}"]`)
-        .should("have.attr", "src")
-        .and("match", /thumbnail\/somewhere\?/);
+    // Make sure the image points at the sticker image. We will briefly show it
+    // using the thumbnail URL, but as soon as that fails, we will switch to the
+    // download URL.
+    cy.get<HTMLImageElement>(`img[alt="${STICKER_NAME}"][src*="download/somewhere"]`).should("exist");
 }
 
 describe("Stickers", () => {

cypress/support/views.ts

@@ -23,11 +23,11 @@ declare global {
     namespace Cypress {
         interface Chainable {
             /**
-             * Opens the given room by name. The room must be visible in the room list.
-             * It uses a start-anchored regexp to accommodate for room tiles for unread rooms containing additional
-             * context in their aria labels, e.g. "Room name 3 unread messages."
+             * Opens the given room by name. The room must be visible in the
+             * room list, but the room list may be folded horizontally, and the
+             * room may contain unread messages.
              *
-             * @param name The room name to find and click on/open.
+             * @param name The exact room name to find and click on/open.
              */
             viewRoomByName(name: string): Chainable<JQuery<HTMLElement>>;
 
@@ -65,10 +65,20 @@ declare global {
 }
 
 Cypress.Commands.add("viewRoomByName", (name: string): Chainable<JQuery<HTMLElement>> => {
-    return cy
-        .findByRole("treeitem", { name: new RegExp("^" + name) })
-        .should("have.class", "mx_RoomTile")
-        .click();
+    // We look for the room inside the room list, which is a tree called Rooms.
+    //
+    // There are 3 cases:
+    // - the room list is folded:
+    //     then the aria-label on the room tile is the name (with nothing extra)
+    // - the room list is unfolder and the room has messages:
+    //     then the aria-label contains the unread count, but the title of the
+    //     div inside the titleContainer equals the room name
+    // - the room list is unfolded and the room has no messages:
+    //     then the aria-label is the name and so is the title of a div
+    //
+    // So by matching EITHER title=name OR aria-label=name we find this exact
+    // room in all three cases.
+    return cy.findByRole("tree", { name: "Rooms" }).find(`[title="${name}"],[aria-label="${name}"]`).first().click();
 });
 
 Cypress.Commands.add("viewRoomById", (id: string): void => {