[BUG] scrollIntoViewIfNeeded keeps scrolling thru table even after it scrolled until the element

[InduKrish]

System info

• Playwright Version: 1.36.2
• Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]
• Browser: [All, Chromium, Firefox, WebKit]
• Other info:

Source code

I have a table and i have to scroll to the element that matches a specific station then click on kebab menu.
I added scrollIntoViewIfNeeded() to scroll until station is visible and it scrolled ,
However although the scrolling is done and the station is visible, it continues to scroll.
After i added page.waitForTimeOut(6000) it stopped scrolling and clicked on kebab menu as expected.

I don't want to have static timeout in the test, but not sure why scrollIntoViewIfNeeded keeps scrolling even after the element become visible.

uniqueCrewBase>............... -------- ["MCO","LAS","MDW","PHX"]

 for (const awardingTableRow of await awardingTable.all()) {

            const awardingBase = await actor.attemptsTo(Read.text().fromRowById(/td-IFVacationAwardingBaseStatuses-base/, awardingTableRow));
            let awardingBaseText = await awardingBase.textContent();
            const awardingStatus = await actor.attemptsTo(Read.text().fromRowById(/td-IFVacationAwardingBaseStatuses-status/, awardingTableRow));

            if (uniqueCrewBase.includes(await awardingBase.textContent())) {
                await expect(awardingStatus).toHaveText('Invalid');
                console.log('Index base.......  ' + awardingBaseText + '    ' + awardingTableRow)

                await page.keyboard.press('End');
                let base5 = await page.locator('text=\'' + awardingBaseText + '\'')
                await base5.scrollIntoViewIfNeeded();   ---> scrolling until station is visible

        **//if i remove timeout, it keeps scrolling. with timeout, it is able to click on kebab menu**
                await page.waitForTimeout(6000). 
                console.log("awardingBaseText:" + awardingBaseText);

                await page
                    .getByRole("row")
                    .filter({hasText: awardingBaseText})
                    .getByRole('button', {name: "kebab-menu"})
                    .click();

                await page
                    .getByRole("row")
                    .filter({hasText: awardingBaseText})
                    .getByRole('menuitem', {name: "Re-award Base"})
                    .click();

                await page.getByTestId('save').click();        
}
}

without page.waitForTimeout(6000), it is unable to click.

[aslushnikov]

@InduKrish the log states that there's some element that intercepts pointer events, thus Playwright tries to scroll the element so that nothing is over it.

I'd recommend checking the trace of the test and figuring out what exactly overlays the element.

[InduKrish]

checked trace, looks like scroll bar is overlaying kebab menu, can you please advise how to wait for scrollbar to disappear? intercepts pointer events error which clicking on kebab menu - looks like scroll bar is overlaying kebab menu, want to wait for scroll bar to disappear before clicking on kebab menu,

Can you please advise how to wait for the scroll bar to disappear? scroll bar dynamically appears on our UI, when user scrolls thru the page then it disappears.

waiting for getByRole(‘row’).filter({ hasText: ‘LAS’ }).getByRole(‘button’, { name: ‘kebab-menu’ })
locator resolved to …
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling

…

intercepts pointer events retrying click action, attempt #1 waiting for element to be visible, enabled and stable element is visible, enabled and stable scrolling into view if needed done scrolling

…

intercepts pointer events retrying click action, attempt #2 (edited)

[aslushnikov]

Can you please advise how to wait for the scroll bar to disappear? scroll bar dynamically appears on our UI, when user scrolls thru the page then it disappears.

@InduKrish So it looks like the scroll bar actually overlays the click area - so your users wouldn't be able to click the button as well. This looks like a bug on the website that should be fixed!

[yury-s]

Closing as part of the triage process. Please create a new issue with a detailed reproducible example if you still face the issue.