How to run UI Automation Testing using Puppeteer

UI Automation Testing using Puppeteer

With software business requirements expanding with time, software development has moved to technologies like headless architecture for implementing Continuous Integration and Continuous Delivery (CI/CD) in the Software Development Lifecycle.

Through CI/CD pipelines, businesses can continuously improve their software products through continuous development, testing, and deployments of advanced features. CI/CD helps businesses make release cycles dynamic, giving end-users the latest software version on a regular basis without affecting their normal functioning.

What is a Headless Browser Testing?

Headless Browsers play a major role in CI/CD, as these web browsers provide automated control of the web page without any graphical user interface (GUI). This allows the tester to perform automation testing on the web application using a command-line interface without testing the whole site by performing actions through the GUI.

Headless Browser Testing speeds up the QA process, which is required in CI/CD, where quick feedback is required to ensure the high performance of the application. It generates faster results even with a high volume of test cases, with due consistency and accuracy, which helps save time and resources.

What is a Puppeteer framework?

Puppeteer framework is one such framework that offers Headless Browser Testing for Google Chrome. It allows the tester to perform the actions on the Chrome browser using commands in JavaScript.

Developed by Google, Puppeteer is a Node library providing a high-level API for controlling headless Chrome through Chrome DevTools Protocol. This DevTools Protocol offers tools to the instrument, debug, inspect, and profile the Chromium or Chrome browsers.

Uses of Puppeteer in UI Automation Testing

Puppeteer can be used to scrape websites and inspect web applications by generating screenshots and PDFs of the pages while performing actions on the application for testing. It also allows the testers to act as crawlers for Single Page Applications (SPA), where it can generate pre-rendered content through Server-Side Rendering (SSR).

Moreover, Puppeteer is used for performing browser-specific tasks such as accessing web pages using DOM API, automating form submissions, keyboard inputs, etc. which are helpful in performing automated UI testing for Chrome or Chromium browsers.

Puppeteer can also diagnose performance-related issues by capturing a timeline trace of the web application under test, where the runtime and load performances of the web application can be recorded for analysis.

Through Puppeteer, the tester can also widen test coverage by testing the support of Chrome Extensions for the web application.

How to set up Puppeteer for UI Automation Testing

Before exploring how to write Puppeteer tests, let’s understand how to set up Puppeteer. Since Puppeteer is a Node-based library, one of the prerequisites for setting it up is the installation of Node. First of all, the prerequisites mentioned below have to be met for setting up the Puppeteer framework.

Prerequisites for Puppeteer

• Install NodeJS
• Install npm

npm install -g npm

To check if the NodeJS and npm are correctly installed, enter the following commands:

$ node -v
$ npm -v

Setting up Puppeteer

• Install Puppeteer using npm, by entering the following command:

npm i puppeteer

• Install Puppeteer-Core, using npm, by entering the following command. Puppeteer-Core is a lightweight version of Puppeteer, a library that interacts with any browser through DevTools Protocol remotely, without actually installing the browser.

npm i puppeteer-core

How to write a test using Puppeteer

Once Puppeteer is set up, write the test script using JavaScript. The following code is saved in the file puppeteertest.js

Here’s the scenario to be automated:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://browserstack.com');{

   waitUntil: 'networkidle2',

});

await page.screenshot({ path: 'browserstack.png' });

await page.pdf({ path: 'browserstack.pdf', format: 'A4' });

await browser.close();

})();

Running the Test Script on Command Line

To execute the above test script enter the following command:

node puppeteertest.js

Results

Here’s how the screenshot of the browserstack.com would look in the png and pdf files as mentioned in the test scenario:

PNG of browserstack.com (browserstack.png)

PDF of browserstack.com (browserstack.pdf)

Puppeteer vs Selenium: When to use which?

Here are the core differences between Puppeteer and Selenium.

• Puppeteer is much easier to set up as compared to and has an event-driven architecture, which makes synchronization easier than Selenium.
• Performing actions such as form submission, keyboard inputs, can be easily automated in Puppeteer using Chrome DevTools.
• Puppeteer can be used for performance testing as it can be used to record runtime and load performances, which cannot be done in case of Selenium.
• Moreover, the tester can also check how the web application under test interacts with other Chrome extensions with Puppeteer. Through the Interactive Session feature, the tester can control the Puppeteer test while executing it on the remote browser.
• Puppeteer can execute tests in Headless mode. This is not possible with Selenium, which requires drivers for browsers to perform testing. Thus, for applications with Headless architecture, Puppeteer is more useful for automated testing than Selenium.
• However, Selenium supports a large range of browsers and devices, while Puppeteer is limited to Chrome and Chromium, while Puppeteer Firefox is still in progress. Thus, in cases of cross browser testing Selenium is the best bet.

Test automation is crucial for testers to keep up with the growing demands of faster delivery and optimal software quality. Puppeteer automation testing allows testers to achieve precisely this, through headless browser testing, thus leading to the creation of better applications in shorter durations.

Originally published at https://www.browserstack.com.