mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-30 15:01:43 +01:00
Code Issues Projects Releases Wiki Activity

Fix flaky scrolling (#30329)

Browse Source 
There are two potential problems here:
1. mouse.scroll returns before the scroll is completed
2. visibility check does not check if the element is actually in the
   viewport.

I've added a helper function to make it easier to scroll to the end of
an infinite list.
This commit is contained in:
R Midhun Suresh 2025-07-16 20:40:05 +05:30 committed by GitHub
parent 0e37fea9f5
commit dc2060fc7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
View File

@ -49,8 +49,7 @@ test.describe("Room list", () => {
// Put focus on the room list // Put focus on the room list
await roomListView.getByRole("gridcell", { name: "Open room room29" }).click(); await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
// Scroll to the end of the room list // Scroll to the end of the room list
await page.mouse.wheel(0, 1000); await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
await expect(roomListView).toMatchScreenshot("room-list-scrolled.png"); await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
}); });
@ -120,10 +119,8 @@ test.describe("Room list", () => {
// Put focus on the room list // Put focus on the room list
await roomListView.getByRole("gridcell", { name: "Open room room28" }).click(); await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
while (!(await roomItem.isVisible())) { // Scroll to the end of the room list
// Scroll to the end of the room list await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
await page.mouse.wheel(0, 1000);
}
// The room decoration should have the muted icon // The room decoration should have the muted icon
await expect(roomItem.getByTestId("notification-decoration")).toBeVisible(); await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@ -144,7 +141,7 @@ test.describe("Room list", () => {
// Put focus on the room list // Put focus on the room list
await roomListView.getByRole("gridcell", { name: "Open room room29" }).click(); await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
// Scroll to the end of the room list // Scroll to the end of the room list
await page.mouse.wheel(0, 1000); await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible(); await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
await roomListView.getByRole("gridcell", { name: "Open room room0" }).click(); await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();

22
playwright/pages/ElementAppPage.ts
View File

@ -213,4 +213,26 @@ export class ElementAppPage {
.getByRole("button", { name: "Dismiss" }) .getByRole("button", { name: "Dismiss" })
.click(); .click();
} }
/**
* Scroll an infinite list to the bottom.
* @param list The element to scroll
*/
public async scrollListToBottom(list: Locator): Promise<void> {
// First hover the mouse over the element that we want to scroll
await list.hover();
const needsScroll = async () => {
// From https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
const fullyScrolled = await list.evaluate(
(e) => Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1,
);
return !fullyScrolled;
};
// Scroll the element until we detect that it is fully scrolled
do {
await this.page.mouse.wheel(0, 1000);
} while (await needsScroll());
}
} }