Waiting for Puppeteer to load after submitting the form

Question

I submit the form using the following code, and I want Puppeteer to wait for the page to load after the form is submitted.

await page.click("button[type=submit]"); //how to wait until the new page loads before taking screenshot? // i don't want this: // await page.waitFor(1*1000); //← unwanted workaround await page.screenshot({path: 'example.png'}); 

How to wait for a page to load using a puppeteer?

Answer 1

You can expect asynchronous navigation to avoid null redirection,

 await Promise.all([ page.click("button[type=submit]"), page.waitForNavigation({ waitUntil: 'networkidle0' }), ]); 

This will help you if page.click is already starting navigation.

Answer 2

 await page.waitForNavigation(); 

Answer 3

According to the official documentation , you should use:

page.waitForNavigation (options)

• options < Object > Navigation options that can have the following properties:
  • timeout < number > The maximum navigation time in milliseconds, by default 30 seconds, pass 0 to disable the timeout. The default value can be changed using the page.setDefaultNavigationTimeout (timeout) method .
  • waitUntil < string | Array < string >> When it is believed that navigation is successful, the default is load . Given an array of event strings, navigation is considered successful after all events have been triggered. Events may be:
    • load - consider navigation completed when the load event occurs.
    • domcontentloaded - consider navigation completed when the DOMContentLoaded event is a DOMContentLoaded event.
    • networkidle0 - consider navigation complete if within no less than 500 ms no more than 0 network connections.
    • networkidle2 - navigation is considered to be completed if no more than 2 network connections exist for at least 500 ms.
• returns: < Promise <[? Response] >> Promise, which is resolved in response to the main resource. In the case of multiple redirects, navigation is allowed with the response of the last redirect. In the case of switching to another binding or navigation due to the use of the History API, navigation will be allowed with null .

Readability:

You can use page.waitForNavigation() to wait for a page to navigate:

 await page.waitForNavigation(); 

Spectacle:

But since page.waitForNavigation() is a shortcut to page.mainFrame().waitForNavigation() , we can use the following to slightly improve performance:

 await page._frameManager._mainFrame.waitForNavigation(); 

Answer 4

I know it's too late to answer that. This may be useful for those who receive an exception during the execution of waitForNavigation .

(node: 14531) UnhandledPromiseRejectionWarning: TimeoutError: Navigation timed out: Exceeded 30,000 ms in Promise.then (/home/user/nodejs/node_modules/puppeteer/lib/LifecycleWatcher.js:142:21) in - ASYNC - frame. (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:111:15) in Page.waitForNavigation (/home/user/nodejs/node_modules/puppeteer/lib/Page.js:649:49) on the page , (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:112:23) in /home/user/nodejs/user/puppeteer/example7.js:14:12 in

The correct code that worked for me as shown below.

 await page.click('button[id=start]', {waitUntil: 'domcontentloaded'}); 

Similarly, if you are going to a new page, the code should look like this:

 await page.goto('here goes url', {waitUntil: 'domcontentloaded'}); 

Answer 5

 await Promise.all([ page.click(selectors.submit), page.waitForNavigation({ waitUntil: 'networkidle0' }), ]); 

This will be the first priority to use, since it expects the completion of the entire network and assumes that this is done when you have no more than 0 network calls in 500 ms.

You can also use

 await page.waitForNavigation({ waitUntil: 'Load' }} 

or you can use

 await page.waitForResponse(response => response.ok()) 

this function can also be used in different places, since it allows you to continue only if all calls are successful, that is, when all the response statuses are in order, i.e. (200-299)

Answer 6

Sometimes even using await page.waitForNavigation() still leads to Error: Execution context was destroyed, most likely because of a navigation.

In my case, this was because the page was redirected several times. The API says that by default the waitUntil option is Load - this required me to wait for each redirect to go over (3 times). Using only one instance of page.waitForNavigation with the waitUntil networkidle2 option waitUntil well in my case:

 await button.click(); await page.waitForNavigation({waitUntil: 'networkidle2'}); 

Finally, the API suggests using Promise.All to prevent race conditions. I did not need this, but provided this for completeness:

 await Promise.all([button.click(), page.waitForNavigation({waitUntil:'networkidle2'})]) 

If all else fails, you can use page.waitForSelector as recommended for the problem with gupub Puppeteer - or in my case, page.waitForXPath()