How to run 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 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 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:

• Launch browserstack.com on the browser
• Create a screenshot as browserstack.png
• Create a PDF as browserstack.pdf

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?

• Puppeteer is much easier to set up as compared to Selenium 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.

By integrating Puppeteer with BrowserStack, QAs can expand test coverage by running cross browser Puppeteer tests in parallel through 100+ real desktop browsers on the cloud. Simply sign up for free and start testing. 

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.

Run your Puppeteer tests on local servers with BrowserStack Local, even for private websites behind a proxy without compromising on the security aspect. By integrating with BrowserStack, automated UI testing using Puppeteer becomes more effective due to the availability of over 100+ real devices, which helps ensure consistent UX of the website across a large number of devices.