Menu Close
    Hire us Request quote Reading list Switch to dark mode

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

    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,


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

    3. Then for installing puppeteer run


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


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


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


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


    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 🙂

     

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close