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 casespull/28217/head
parent
9d417cea7c
commit
c6d9228f94
|
@ -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", () => {
|
||||
|
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in New Issue