Read More
Read More
Menu Close

    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)

    Start your headless eCommerce
    now.
    Read More

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

    abcd

    filled.png will look like below image :-

    filled

    That’s all regarding UI testing using Puppeteer.

    Thanks for reading this blog 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top