How to run UI Automation Testing using Puppeteer

With Puppeteer, you can easily create and run automated UI tests to validate the functionality, performance, and behavior of web applications in a controlled browser environment. This makes it a powerful tool for end-to-end testing of modern web apps.

In this article, you will learn what Puppeteer is, how it benefits ui automation testing, and how to run UI automation testing with Puppeteer.

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

Here are the beneficial uses of Puppeteer in UI automation testing:

• Web Scraping and Inspection: Puppeteer allows testers to scrape websites and inspect web applications by generating screenshots and PDFs of pages while performing various user actions.
• Testing Single Page Applications (SPA): Puppeteer can act as a crawler for SPAs, enabling Server-Side Rendering (SSR) to generate pre-rendered content, which is useful for SEO and testing content visibility.
• Automated Browser Tasks: It supports automation of browser-specific actions like DOM manipulation, form submissions, and keyboard inputs, streamlining automated UI testing for Chrome or Chromium browsers.
• Performance Diagnosis: Puppeteer can capture timeline traces to diagnose performance issues. This helps analyze runtime and page load metrics for performance optimization.
• Chrome Extension Testing: It enables testers to evaluate how Chrome Extensions interact with the web application, expanding test coverage to include extension compatibility.

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

Here are the prerequisites to set up 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();

})();

Talk to an Expert

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)

How to Run Automated UI Tests with Puppeteer Recorder

Here’s a step-by-step guide on how to run automated UI tests using Puppeteer Recorder. A Puppeteer Recorder is a Chrome DevTools extension that records browser interactions and generates Puppeteer scripts.

It can come in handy for testers looking to automate UI tasks with minimal manual scripting.

Steps to Run Automated UI Tests with Puppeteer Recorder

Step 1. Install Puppeteer Recorder Extension

Search for “Puppeteer Recorder” in the Chrome Webstore and click Add to Chrome. Then, confirm the installation.

Step 2. Open the Target Web Application

Launch Chrome and navigate to the web application you want to test.

Step 3. Start Recording

• Open Chrome DevTools (Right-click > Inspect).
• Then, find the Puppeteer Recorder tab and click ‘Start Recording’.
• Perform the desired UI actions (e.g., click buttons, navigate pages etc.)

Step 4. Stop and Export the Script

• Click Stop Recording once done.
• Click Export Script and download the generated Puppeteer script (.js file).

Step 5. Run the Script Using Node.js

• Ensure that Node.js is installed.
• Create a project folder and install Puppeteer:

npm init -y

npm install puppeteer

• Save the exported script inside your project
• Run the test using:

node test.js

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.

Conclusion

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 3500+ real devices, which helps ensure consistent UX of the website across a large number of devices.

Try BrowserStack Now

Useful Resources for Puppeteer

Understanding Puppeteer:

• Puppeteer Framework Tutorial: Basics and Setup
• How to start with Puppeteer Debugging
• How to install and setup Puppeteer with npm (NodeJS)
• Puppeteer Type Command: How to type a text in input box in Puppeteer
• Cross Browser Testing in Puppeteer: Tutorial
• Understanding Puppeteer Headless
• How to run UI Automation Testing using Puppeteer
• How to capture Lazy Loading Images for Visual Regression Testing in Puppeteer
• How to use Proxy in Puppeteer?
• How to run Tests in Puppeteer with Firefox
• How to Perform Visual Regression Puppeteer
• Handling Alerts and Popups in Puppeteer
• Pyppeteer Tutorial: Guide to Puppeteer in Python (with Examples)

Tools Comparisons:

• Puppeteer vs Selenium: Core Differences
• Cypress vs Selenium vs Playwright vs Puppeteer: Core Differences
• Cypress vs Puppeteer: Core Differences
• Playwright vs Puppeteer: Which to choose in 2024?
• Top 10 Puppeteer Alternatives