test(e2e): click only a channel link that is the element hit at its centre
A card inside the viewport can still sit under the chrome above the scroller (the update banner); the covered click made Playwright scroll and retry, moving the feed the scroll-restore test then measured. webkit failed 3 in 24 before, 0 in 48 after.
This commit is contained in:
+13
-8
@@ -13,19 +13,24 @@ export async function gotoPage(page: Page, id: string): Promise<void> {
|
||||
}
|
||||
|
||||
/**
|
||||
* Click a channel link that is currently WITHIN the viewport — what a real user does. Never use
|
||||
* `.first()` for this after scrolling: the first rendered card lives in the virtualizer's overscan
|
||||
* ABOVE the viewport, so Playwright would scroll it into view to click it, moving the scroll
|
||||
* position — fatal to any test that then asserts on where the feed was. Returns false if none found.
|
||||
* Click a channel link a real user can actually SEE and hit. Never use `.first()` for this after
|
||||
* scrolling: the first rendered card lives in the virtualizer's overscan ABOVE the viewport, so
|
||||
* Playwright would scroll it into view to click it, moving the scroll position — fatal to any test
|
||||
* that then asserts on where the feed was. Being inside the viewport is not enough either: a card
|
||||
* can sit under the page chrome above the scroller (the update banner, the toolbar band), and the
|
||||
* covered click makes Playwright scroll and retry — the same move (E32 S2: webkit failed 3 in 24).
|
||||
* So the link must be the element hit at its own centre. Returns false if none found.
|
||||
*/
|
||||
export async function clickVisibleChannelLink(page: Page): Promise<boolean> {
|
||||
const links = page.getByTestId("video-card-channel").filter({ visible: true });
|
||||
const viewport = page.viewportSize();
|
||||
const height = viewport?.height ?? 800;
|
||||
const count = await links.count();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const box = await links.nth(i).boundingBox();
|
||||
if (box && box.y >= 0 && box.y + box.height <= height) {
|
||||
const hittable = await links.nth(i).evaluate((el) => {
|
||||
const r = el.getBoundingClientRect();
|
||||
const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
|
||||
return hit !== null && el.contains(hit);
|
||||
});
|
||||
if (hittable) {
|
||||
await links.nth(i).click();
|
||||
return true;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user