'Playwright: How to loop scroll down or show more or page down in a lazy loading page

I am trying to perform a controlled scroll on the home feed of a lazy loading website (similar to LinkedIn.com). But playwright does not support auto-scroll. So I have used the following methods:

Find the "Show more results" button and click it

await page.locator('button:has-text("Show more results")').click();

The issue in this method is that the click goes on an endless loop and times out after default 30 seconds. If I set timeout:0 then it doesn't time out, it goes on for an infinite loop.

While trying to control the click with waitForSelectoras shown below:

for (let i = 0; i < 20; i++) {
     let loadMore = await page.waitForSelector(('button:has-text("Show more results")');
     await loadMore.click({delay: 1000, timeout: 0});
}

It throws Element is not attached to DOM error. Log as below:

elementHandle.click: Element is not attached to the DOM
=========================== logs ===========================
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
  performing click action
  <html lang="en" class="theme theme--mercado artdeco os…>…</html> intercepts pointer events
retrying click action, attempt #1
  waiting for element to be visible, enabled and stable
============================================================

The only possible way which could see working is:

for (let i = 0; i < 20; i++) {
    await page.keyboard.down('PageDown');
}

Any suggestions on better controlled scroll with Playwright library would be helpful :) Thank you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Playwright: How to loop scroll down or show more or page down in a lazy loading page

Sources

Related Questions