[BUG] scrollIntoView does not work when covered by sticky header in Chromium

Context:

• Playwright Version: 1.2.1
• Operating System: Ubuntu Bionic (docker image)
• Node version: 12.18.0 (ubuntu) / 12.16.2 (win)
• Browser: HeadlessChrome/85.0.4182.0 (ubuntu)

Hello, guys. I am working on puppeteer -> playwright migration and faced an issue that did not happen with puppeteer, but happens with playwright for some reason.

I have a list of items, one of them is partially visible. Header overlaps it. I pointed my mouse over it and it’s highlighted at the moment:

I use simple click with the only one parameter click count = 1. No other flags are set.

According to this doc: position <Object> A point to click relative to the top-left corner of element padding box. If not specified, clicks to some visible point of the element.

PW should click to some visible point of the element. But it does not happen:

Timeout 30000ms exceeded during page.click.
===================== page.click logs =====================
[api] waiting for selector "[data-test-id^="Nav.Country.222"]"
[api]   selector resolved to visible <div tabindex="0" role="button" aria-disabled="false"…>…</div>
[api] attempting page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action

I used https://chrome.google.com/webstore/detail/coordinates/bpflbjmbfccblbhlcmlgkajdpoiepmkd to check the coordinates and it seems that PW selects coordinates of invisible part. I am not 100% sure, because I was not able to reproduce the issue on Windows in debug mode, but it happens often with docker tests.

I’ll be happy to provide some additional info for you, just let me know.

Update: As a workaround I added one scroll into view for the element to be sure that it’s fully visible and ready for clicks. But it would be nice to have a permanent solution.

[dgozman]

My guess would be that target element [data-test-id^="Nav.Country.222"] is actually covered by some other element that receives the input. If that’s the case, pass force to click on the overlay element instead.

await page.click('[data-test-id^="Nav.Country.222"]', { force: true });

If this is not the case, the repro script would be very welcome 😄

[dgozman]

@DJ-Glock Thank you for the snippet! I can repro this in Chromium, but not Firefox or WebKit. It seems like Chromium is unable to scroll the target into view from under the sticky header.