How to ensure Puppeteer waits for page load after form submission?

Other Questions Puppeteer
1

I’m trying to get Puppeteer to wait for a page to load after submitting a form. Here’s what I’ve got so far:

await page.click('button[type=submit]');

// Need help here
// Don't want to use a fixed delay
await page.screenshot({path: 'result.png'});

I know using await page.waitFor(1000) works, but it’s not reliable. Sometimes the page loads faster, sometimes slower. Is there a better way to make sure the new page is fully loaded before taking the screenshot? I’ve heard about waitForNavigation() but I’m not sure how to use it correctly. Any suggestions would be really helpful! I want to make sure my script captures the right content every time.

2

I’ve encountered this issue before, and the solution that worked best for me was using waitForSelector(). Here’s what you can try:

await page.click('button[type=submit]');
await page.waitForSelector('selector-on-new-page', { timeout: 5000 });
await page.screenshot({path: 'result.png'});

Replace ‘selector-on-new-page’ with an element that’s guaranteed to be present on the page after submission. This method is more robust than fixed delays and works well even with varying load times. Just ensure you choose a reliable selector that appears consistently on the new page.

3

I’ve been using Puppeteer for a while now, and I’ve found that combining waitForNavigation() with waitForNetworkIdle() works wonders for these situations. Here’s what I typically do:

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

await page.screenshot({path: 'result.png'});

This approach ensures that not only has the navigation occurred, but also that there are no more than 0 network connections for at least 500 ms before proceeding. It’s been pretty reliable in my experience, even with dynamic content loading. Just keep in mind that if your page has constant background requests, you might need to adjust the networkidle0 to networkidle2 instead.

Also, don’t forget to add proper error handling. Sometimes pages can timeout or fail to load, so wrapping this in a try-catch block can save you a lot of headaches down the line.

4

hey laura219, try using await Promise.all([page.waitForNavigation(), page.click('button[type=submit]')]); before snapping. it waits for both the click and the page to load completely. way more reliable than fixed delays. hope this helps ya out!