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
|
// 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", () => {
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in New Issue