Reading list Switch to dark mode

    UI testing using Puppeteer

    Updated 16 July 2021

    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??

    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)

    Start your headless eCommerce
    now.
    Find out More

    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("[email protected]");
        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 :-

    abcd

    filled.png will look like below image :-

    filled

    That’s all regarding UI testing using Puppeteer.

    Thanks for reading this blog 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home