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
This commit is contained in:
Andy Balaam 2023-08-25 12:04:56 +01:00 committed by GitHub
parent 9d417cea7c
commit c6d9228f94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 12 deletions

View file

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

View file

@ -23,11 +23,11 @@ declare global {
namespace Cypress { namespace Cypress {
interface Chainable { interface Chainable {
/** /**
* Opens the given room by name. The room must be visible in the room list. * Opens the given room by name. The room must be visible in the
* It uses a start-anchored regexp to accommodate for room tiles for unread rooms containing additional * room list, but the room list may be folded horizontally, and the
* context in their aria labels, e.g. "Room name 3 unread messages." * 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>>; viewRoomByName(name: string): Chainable<JQuery<HTMLElement>>;
@ -65,10 +65,20 @@ declare global {
} }
Cypress.Commands.add("viewRoomByName", (name: string): Chainable<JQuery<HTMLElement>> => { Cypress.Commands.add("viewRoomByName", (name: string): Chainable<JQuery<HTMLElement>> => {
return cy // We look for the room inside the room list, which is a tree called Rooms.
.findByRole("treeitem", { name: new RegExp("^" + name) }) //
.should("have.class", "mx_RoomTile") // There are 3 cases:
.click(); // - 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 => { Cypress.Commands.add("viewRoomById", (id: string): void => {