diff --git a/frontend/e2e/helpers.ts b/frontend/e2e/helpers.ts index 0b1b3c6c..78dd0c80 100644 --- a/frontend/e2e/helpers.ts +++ b/frontend/e2e/helpers.ts @@ -13,19 +13,24 @@ export async function gotoPage(page: Page, id: string): Promise { } /** - * 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 { 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; }