Puppeteer Page Load navigation waiting example

Puppeteer is a Node.js library utilized for webpage testing within a headless browser environment. It launches Chromium in a headless mode.

Frrst, Create a Directory puppeteertest

mkdir puppeteertest
cd puppeteertest

Next, create a Node.js project using the following command

npm init -y

This command sets up a Node.js project with the necessary basic configuration.

Then, install the Puppeteer dependency using

npm install puppeteer --save

This command installs Puppeteer into the Node.js project.

Afterward, create a test.js file and add JavaScript code to test it.

Now, let’s explore some example use cases.

#How to open and close a web page in Puppeteer

Below is an example demonstrating how to open and close a web page using Puppeteer.

• Create a headless browser with headless: false,
• and launch the browser using puppeteer launch() method.
• Create a new page using browser.newPage().
• Navigate to a URL using the page.
• Close the browser using browser.close();

const puppeteer = require('puppeteer');
async function test() {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  const url = "https://developer.chrome.com/en/";
  page.waitForSelector('img')
      .then(() => console.log('First URL with image: ' + url));

  await page.goto(currentURL);
  await browser.close();
}
test();

By running this file with the provided command and headless: base option, you can observe the browser running in a separate window.

node test.js

#How to Search and Submit a Form in Puppeteer

Below is an example demonstrating open a browser, search using keywords and how to submit a form and close using Puppeteer:

Find CSS Selector details of a webpage We have an amazon.in the website, Right click on the browser. First, find out below the selectors

• For the search box class twotabsearchtextbox
• Submit button has nav-search-submit-button

The following are steps to submit a form.

• Open a browser in a headless state by setting headless: false options.
• Launch the browser using puppeteer.launch().
• Create a new tab on the browser page.
• Navigate to the Amazon site using page.goto().
• Identify selectors. In this case, we’ve used ID selectors on the Amazon website.
• To emulate the typing in the text box, First, select the textbox using selectors. id selector used by appending # to selector and type to text

await page.type('#twotabsearchtextbox', 'mobile ');

• Click on the search button. Use page.click() with the ID selector
• #nav-search-submit-button to initiate a click on the button, loading the results on the same page.
• Wait for the page to load for 4 seconds using the waitForTimeout function.
• Finally, close the browser.

const puppeteer = require('puppeteer');
async function test() {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  const url= "https://www.amazon.in/";
  page.waitForSelector('img')
    .then(() => console.log('Found image: ' + url));
  await page.goto(url);
  await page.type('#twotabsearchtextbox', 'mobile ');
  await page.click('#nav-search-submit-button');
  await page.waitForTimeout(4000); // wait for 4 seconds

  await browser.close();

}
test();

#Puppeteer Waits for Page Load After Form Submit

We have seen the page load process wait for specified timeout configured using page.waitForTimeout.

It’s not advisable to rely on fixed timeouts for page load completion. Instead, Puppeteer provides methods to wait for specific conditions indicating page readiness.

In this section, we’ll explore how Puppeteer waits for the page to load after submitting a form.

How to know if the result page is loaded or not?

There are multiple ways we can know

• Using page.waitForNavigation(options) This method waits for navigation events to occur based on specified options.

  Options are default empty and contain the below attributes

  • timeout : Time to wait for navigation to complete
  • waitUntil :

    • load - Navigation is complete when the load event is fired.

    • documentLoaded - Similar to when DOMContentLoaded event is fired.

    • networkidle0 : Navigation is considered complete when there are zero network connections

    • networkidle2 : Navigation is considered complete when there are no more than 2 network connections.

  We can use one the way based on your “bash await page.waitForNavigation({waitUntil: ‘load’}); await page.waitForNavigation({waitUntil: ‘documentLoaded’}); await page.waitForNavigation({waitUntil: ‘networkidle0’}); await page.waitForNavigation({waitUntil: ‘networkidle2’});

• using waitForSelector This method waits for an element matching the specified selector to be added to the DOM.

await page.waitForSelector(".selector", { visible: true });

Here is a complete example

const puppeteer = require('puppeteer');
async function test() {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  const url= "https://www.amazon.in/";
  page.waitForSelector('img')
  .then(() => console.log('Found image: ' + url));

  await page.goto(currentURL);

  await page.type('#twotabsearchtextbox', 'mobile ');
  await page.click('#nav-search-submit-button');
  await page.waitForNavigation({ waitUntil: 'load' })

  //await page.waitForNavigation({waitUntil: 'load'});
  // await page.waitForNavigation({waitUntil: 'documentLoaded'});
  //await page.waitForNavigation({waitUntil: 'networkidle0'});
  //await page.waitForNavigation({waitUntil: 'networkidle2'});
  //await page.waitForSelector(".selector", { visible: true });

  console.log('page loaded')

  await browser.close();

}
test();

This example demonstrates how to wait for page load after form submission using Puppeteer, ensuring a more reliable testing process.