JS Puppeteer wait for page load to complete

Question

After seeing this youtube video using puppeteer I got inspired to play a bit around with it. But I seem to have made the wrong choice of a website as a starter project.

const puppeteer = require('puppeteer')
;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('http://www.produktresume.dk/AppBuilder/search?page=0')
  page.once('load', () => {
    const drugs = page
      .evaluate(() =>
        [...document.querySelectorAll('div.entity-link')].map(item => item)
      )
      .catch(err => console.log(err))
    console.log(drugs[0])
  })

  await browser.close()
})()

I have googled around and lost track of the different things I have tried..

My perception of my problem is that I don't call the evaluate at the right time - when the page is loaded.

Is `page.evaluate()` an `async` (promise) method? If so, within the context of `page.once('load')` event handler, that may be the source of the problem — woozyking, Oct 11 '18 at 20:56
add `page.once` before `page.goto` and add `await` on the call of `page.evaluate` — kip, Oct 11 '18 at 21:07
Does this answer your question? [Puppeteer wait for all images to load then take screenshot](https://stackoverflow.com/questions/46160929/puppeteer-wait-for-all-images-to-load-then-take-screenshot) — MathKimRobin, Sep 04 '20 at 15:48
@MathKimRobin I have marked an answer as the solution already — Norfeldt, Sep 04 '20 at 16:09
Yes I know, but it was more for indicates to future readers that this question is probably a duplicate of https://stackoverflow.com/questions/46160929/puppeteer-wait-for-all-images-to-load-then-take-screenshot. And that they can have complementary info there — MathKimRobin, Sep 05 '20 at 14:36

score 8 · Accepted Answer · answered Oct 11 '18 at 22:13

There is absolutely no need to use page.on('load') to find if page loaded.

You can use the,

waitUntil option on .goto call.
waitForSelector function for specific selector.

Usage,

await page.goto('http://www.produktresume.dk/AppBuilder/search?page=0', {waitUntil: 'networkidle0'});
await page.waitForSelector("#wrapper"); // Found on the page source code, wait for this to appear
// the rest is just as usual
const drugs = await page
.evaluate(() =>
 [...document.querySelectorAll('div.entity-link')].map(item => item)
)
.catch(err => console.log(err))
console.log(drugs[0])

Make sure to use await for the .evaluate call.

JS Puppeteer wait for page load to complete

1 Answers1

Linked