Puppeteer Login Test example

Puppeteer is a nodejs library that is used to test webpages in a headless browser. It opens chromium in a headless browser.

Create a Directory puppeteertest

mkdir puppeteertest
cd puppeteertest

First, Create a nodejs project using the below command.

npm init -y

this creates a nodejs project with the required basic configuration.

Install puppeteer dependency

npm install puppeteer --save

It installs the puppeteer into a node project.

create a test.js file and add js code to it.

Let’s see some use cases examples.

Puppeteer Login example

This is an example of the below steps.

  • First, Launch a headless browser with headless: false, and launch the browser
const browser = await puppeteer.launch({
  headless: false,
});
  • Next, opening a new page in the browser
const page = await browser.newPage();
  • opens login page, with the given login URL
const url = "https://www.domain.com/login";
await page.goto(url);
  • The login page is loaded, Now Enter the login username and password

To select input fields, use selectors with id or type, or class.

// use this line to select with an id of the username field
//await page.type('#name', 'username'); or
await page.type("input[type=text]", "username");

// use this line to select with an id of the pwd field
// await page.type('#pwd', 'password'); or
await page.type("input[type=password]", "password");
  • Next, Click on submit button using the id or type selector
// use this line if the button contains the id
//await page.click('#submitBtn');
// use this line to select with button type
await page.click("button[type=submit]");
  • Next, wait for the next page to load using
// wait for login authentication result
await page.waitForNavigation();
  • Close the browsers
// Close test
await browser.close();
const puppeteer = require("puppeteer");

//create a function for login test
async function logintest() {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();
  const url = "https://www.domain.com/login";
  await page.goto(url);
  // use this line to select with an id of the username field
  //await page.type('#name', 'username'); or
  await page.type("input[type=text]", "username");

  // use this line to select with an id of the pwd field
  // await page.type('#pwd', 'password'); or
  await page.type("input[type=password]", "password");
  // use this line if the button contains the id
  //await page.click('#submitBtn');
  // use this line to select with button type
  await page.click("button[type=submit]");

  // wait for login authentication result
  await page.waitForNavigation();
  console.log("Navigate to New Page URL:", page.url());

  // Close test
  await browser.close();
}
logintest();

Next, run the code using the node command.

node test.js

It opens a headless browser and runs a login test, finally closes the browser.