Async function using setInterval in Puppeteer’s evaluate function doesn’t execute properly

  javascript, node.js, puppeteer, reactjs

When I try to execute the following async function inside of an evaluate function via React, it fails. Here’s the function code:

await page.evaluate(async () => {
      return new Promise(resolve => {
        let totalHeight = 0
        const distance = 500

        const timer = setInterval(() => {
          const scrollHeight = 10509
          window.scrollBy(0, distance)
          totalHeight += distance

          if (totalHeight >= scrollHeight) {
            clearInterval(timer)
            resolve()
          }
        }, 100)
      })
    })

I had a look through https://github.com/puppeteer/puppeteer/issues/1665 and tried the suggested fix which was to wrap the async code in backticks like so:

await page.evaluate(`async () => {
      return new Promise(resolve => {
        let totalHeight = 0
        const distance = 500

        const timer = setInterval(() => {
          const scrollHeight = 10509
          window.scrollBy(0, distance)
          totalHeight += distance

          if (totalHeight >= scrollHeight) {
            clearInterval(timer)
            resolve()
          }
        }, 100)
      })
    }`)

The function works but exits early i.e. the browser doesn’t scroll to the bottom of the page and instead extracts only the initial values on page load.

When I run the code in Node it works well, all the target rows are extracted, however when I run via my React app, it only extracts the initial values.

Any ideas why the function fails to behave as expected and possible solutions?

Source: Ask Javascript Questions

LEAVE A COMMENT