THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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.
