How to run UI Automation Testing using Puppeteer

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

In this clause, you will memorize what Puppeteer is, how it benefits ui automation examination, and how to run UI mechanisation testing with Puppeteer.

What is Headless Browser Testing?

Headless Browsers play a major office in CI/CD, as these web browsers furnish automated control of the web page without any graphic exploiter interface (GUI). This permit the quizzer to do on the web coating using a command-line interface without prove 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 quicker results yet with a eminent bulk of test cases, with due consistency and truth, which helps save time and resources.

What is a Puppeteer fabric?

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

Developed by Google, Puppeteer is a Node library provide a high-level API for controlling headless Chrome throughChrome 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 examination:

• Web Scraping and Inspection:Puppeteer allows testers to grate site and inspect web applications by render screenshots and PDFs of pages while performing various user action.
• Testing Single Page Applications (SPA):Puppeteer can act as a crawler for SPAs, enabling Server-Side Rendering (SSR) to return pre-rendered content, which is utilitarian for SEO and testing content visibility.
• Automated Browser Tasks: It supports automation of browser-specific actions like DOM manipulation, form compliance, and keyboard input, streamlining automated UI testing for Chrome or Chromium browser.
• Performance Diagnosis: Puppeteer can bewitch timeline traces to diagnose performance issues. This helps analyze runtime and page load prosody for performance optimization.
• Chrome Extension Testing: It enables tester to evaluate how Chrome Extensions interact with the web application, expand test coverage to include propagation compatibility.

How to set up Puppeteer for UI Automation Testing

Before exploring how to indite, let ’ s realize how to set up Puppeteer. Since Puppeteer is a Node-based library, one of the requirement for setting it up is the installation of Node. First of all, the requirement mentioned below get 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 theNodeJS and npmare correctly installed, inscribe the following commands:

$ node -v $ npm -v

Setting up Puppeteer

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

npm i puppeteer

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

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

npm i puppeteer-core

How to write a test using Puppeteer

Once Puppeteer is set up, write the test script use JavaScript. The next codification is saved in the file puppeteertest.js

Here ’ s the scenario to be automated:

• Launch browserstack.comon the browser
• Create a screenshot asbrowserstack.png
• Create a PDF asbrowserstack.pdf

const puppeteer = require ('puppeteer '); (async () = & gt; {const browser = await puppeteer.launch (); const page = await browser.newPage (); await page.goto ('https: //browserstack.com '); {waitUntil: 'networkidle2 ',}); look page.screenshot ({route: '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 book participate the following command:

node puppeteertest.js

Results

Here ’ s how the screenshot of the browserstack.com would seem in thepng and pdf files as remark 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 playscript.

It can come in handy for testers seem to automatize UI task with minimal manual scripting.

Steps to Run Automated UI Tests with Puppeteer Recorder

Step 1. Install Puppeteer Recorder Extension

Search for & # 8220; Puppeteer Recorder & # 8221; 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 & gt; Inspect).
• Then, observe the Puppeteer Recorder tab and click ‘ Start Recording ’.
• Perform the craved UI actions (e.g., click buttons, navigate pages etc.)

Step 4. Stop and Export the Script

• Click Stop Recording erst 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 install.
• Create a project leaflet and install Puppeteer:

npm init -y npm install puppeteer

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

node test.js

Puppeteer vs Selenium: When to use which?

• Puppeteer is lots easier to set up as compared to and has an event-driven architecture, which makes synchronization easier than Selenium.
• Performing actions such as descriptor submission, keyboard remark, can be easily automatize in Puppeteer using Chrome DevTools.
• Puppeteer can be used for as it can be used to record runtime and cargo performances, which can not be done in case of Selenium.
• Moreover, the quizzer can also control how the web coating under tryout interacts with other Chrome extensions with Puppeteer. Through the, the quizzer 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 expect drivers for browsers to perform testing. Thus, for applications with Headless architecture, Puppeteer is more useful for machine-driven testing than Selenium.
• However, Selenium supports a turgid range of browsers and device, while Puppeteer is determine to Chrome and Chromium, while Puppeteer Firefox is withal in procession. Thus, in cases of Selenium is the good bet.

Conclusion

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

on local servers with, even for without compromise on the protection aspect. By mix with BrowserStack, automated UI testing using Puppeteer become more effective due to the availability of over 3500+ real devices, which helps ensure consistent UX of the website across a large figure of device.

Useful Resources for Puppeteer

Understanding Puppeteer:

Tools Comparisons:

Related Guides