UI testing using Puppeteer

Puppeteer is emerging as one of the prominent automation testing tool developed around DevTools protocol. It is a Node library which provides a high-level API to control Chrome.

Puppeteer provide the headless browser functionality by default. We can also configure the Puppeteer to run non-headless Chrome. The only drawback with Puppeteer is that it works for Chrome only.

Now, what is headless browsing??

A headless browser is a web browser without a graphical user interface.

Headless browsers provide automated control over a web page in an environment similar to popular web browsers, but are executed via a command-line interface. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, colour, font selection and execution of Javascript and AJAX which are usually not available when using other testing methods.

Setting up the project and Installing Puppeteer

1. First create a folder. (here we are creating folder named contactpage)

2. Go to the terminal run,

npm init -y

This will generate a package.json for managing project dependencies.

3. Then for installing puppeteer run

npm i puppeteer

4. Finally open the folder and create your first script. (here we are creating file name as contact.js)

Note:- Puppeteer requires at least Node v6.4.0, but we use async/await which is only supported in Node v7.6.0 or greater.

Testing a Contact Form using Puppeteer

Here we are going to test a contact form in the url “https://webkul.com/blog/request-quote/” .

Firstly we will import the Puppeteer library in our script  :-

const puppeteer = require('puppeteer');

Then we will visit the site and save the screenshots of blank Contact page, form field with data and message after submitting the form. The script for the same is written below :-

const puppeteer = require('puppeteer');
const chromeOptions = {
    executablePath:'google-chrome',
    slowMo: 10,
 };

  (async function main() {
    const browser = await puppeteer.launch(chromeOptions);
    const page = await browser.newPage();
    await page.setViewport({width:1535, height:756});
    await page.goto('https://webkul.com/blog/request-quote/');
    await page.screenshot({path:'contactus.png'});
    await page.waitFor('.wpcf7-form');
    const name= await page.waitForXPath("/html/body/div[1]/div/div/div/form/p[1]/label/span/input");
    await name.type("testing");
    const email= await page.waitForXPath("/html/body/div[1]/div/div/div/form/p[2]/label/span/input");
    await email.type("test@webkul.com");
    const subject= await page.waitForXPath('/html/body/div[1]/div/div/div/form/p[3]/label/span/input');
    await subject.type("Regular testing the contacts page");
    const message= await page.waitForXPath("/html/body/div[1]/div/div/div/form/p[4]/label/span/textarea");
    await message.type("Regular testing the contacts page with puppeteer");
    await page.screenshot({path:'filled.png'});
    await page.waitFor(2000);
    const button = await page.waitForSelector(".wpcf7-submit");
    await button.click();
    await page.waitFor(2000);
    await page.waitForSelector('.wpcf7-mail-sent-ok');
    await page.screenshot({path:"submitmessage.png"});
    await browser.close();
  })()

To see chrome running we just need to include below mention line in the above code under chromeOptions :-

const chromeOptions = {
    headless:false
 };

For running the script we just need to go to the terminal and run following command:-

node contact.js

This will generate the screenshots in the contactpage folder as shown in the below image :-

filled.png will look like below image :-

That’s all regarding UI testing using Puppeteer.

Thanks for reading this blog 🙂