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.

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.

Puppeteer Login Test example

Puppeteer Login example