Modern way of Web Testing with Puppeteer

Puppeteer

In this article, we will look at how can we create the Puppeteer framework from scratch with a well-known Page object model feature which supports re-usability in the framework and data-driven using JSON which supports faster data reading capabilities and parameterization of our data.

What is Puppeteer in short?

Puppeteer is an open-source Node.js library developed by Google with wide support for almost any action in Google’s Chrome browser. The basic idea is an API at the high level that allows us to automate actions in either of the Google browsers, Chrome and Chromium.

• To use Puppeteer we need to Install NodeJS and Puppeteer.
• NodeJS can be installed from here
• Once you install NodeJS we need to install puppeteer as an npm module as below

npm i puppeteer

Let's dive in with the framework creation…

Step 1- Create the page as LoginPage.js in the framework as Following in the pages folder

const puppeteer = require('puppeteer');
class LoginPage {
 async typeUserName(page, text) {
  await page.type('[id="user-name"]', text)
 }
 async typePassword(page, text) {
  await page.type('[id="password"]', text)
 }
 async clickLogin(page) {
  await page.click('[id="login-button"]')
 }
}
module.exports = LoginPage;

Step 2 - Next create the page as LogoutPage.js as following in the pages folder

const puppeteer = require('puppeteer');
//On login click on Logout using burger button and click logout
class LogoutPage {
  async clickburgerbutton(page) {
    const [burgerbutton] = await page.$x("//div[@id='menu_button_container']/div/div[3]/div/button");
    if (burgerbutton) {
      await burgerbutton.click();
    }
  }
async clicklogoutbutton(page) {
await page.waitForTimeout(1000); // time for scrolling or we can wait for selector
    const [logoutbutton] = await page.$x("//a[contains(text(),'Logout')]");
    if (logoutbutton) {
      await logoutbutton.click();
    }
  }
}
module.exports = LogoutPage;

Step 3 - We will be using JSON file to parameterize our data and achieve data-driven. I have stored all the data in the following JSON file under the data folder

{
    "url": "https://www.saucedemo.com/",
    "username": "standard_user",
    "password": "secret_sauce"
}

Step 4 - Import both the classes generated in step1 and step2 into executor.js file in test cases folder

const puppeteer = require('puppeteer');
const LoginPage = require('../Pages/LoginPage');
const LogoutPage = require('../Pages/LogoutPage');
var data = require('../data/data.json');
var logoutPage = new LogoutPage();
var loginPage = new LoginPage();
(async () => {
 //Launch Browser with headless as false
 const browser = await puppeteer.launch({ headless: false })
 const page = await browser.newPage();
 //Read data from Json and open URL
 await page.goto(data.url);
//Enter User Name,Password and click on login
 await loginPage.typeUserName(page, data.username);
 await loginPage.typePassword(page, data.password);
 await loginPage.clickLogin(page);
 await page.screenshot({ path: 'PostLoginPage.png' });
 await logoutPage.clickburgerbutton(page);
 await logoutPage.clicklogoutbutton(page);
 await browser.close();
}
)();

Step 5 - The framework is done and it can be run either in headless mode true or false as mentioned in step 4. On completion of all steps, your folder structure will look as below

Folder structure of framework

Step 6 - The test case can be executed as ‘node testcaselogin.js’ in the terminal window. On executing it will open the URL, enter credentials and take a screenshot of the post-login window.