[Question] Is it possible to scroll element into view until it's visible and can be clicked?

[nadavkaner]

I have a use case in which I have a side nav that is scrollable and there is a fixed overlay element (the black rectangle in the image) that can hide items that clickable in the side nav:

I'm trying in my test to click on the "Test 2" link but it's hidden by the overlay and I don't see a way to scroll it into view until it visible and can be clicked, I tried to use scrollIntoViewIfNeeded that doesn't work.
Is there an existing API that can help in this case to scroll to the element until it visible and can be clicked?

Thanks!

[pavelfeldman]

Typically, click will scroll the element into view. But in your case, it seems like the overlay is still covering the item? You could page.evaluate(() => document.body.scrollTop = ...) or document.documentElement.scrollTop = ... manually, depending on where your scroll bar is.

[nadavkaner]

Right, the overlay is still covering the item. I can do the scroll manually but probably it will tend to break more easily if the UI or data changed.

[pavelfeldman]

As per @dgozman, we should now be alternating scroll into view strategy in order to address your issue. Are you on the latest Playwright?

[dgozman]

See issue #3105. Should be fixed in Playwright v1.8.0.

[pavelfeldman]

Yay! @nadavkaner, closing as per above, please feel free to open a new issue if it did not do the trick!