Getting Started With Puppeteer

Let’s head on to a headless Chrome Node API, Puppeteer! The Google Chrome team’s Puppeteer provides a high-level API for administrative purposes. It allows us to assist a Chrome or any Chrome DevTools Protocol-based browser in real-time. It also helps perform general activities, much like in a real browser. We’ll try out Google Puppeteer and demonstrate various capabilities by combining them to take Puppeteer testing to the next level. 

Let’s look at what Puppeteer is and why it’s essential in today’s web development before we get into how to utilize it for end-to-end testing.

What is E2E Testing, and Why Does It Matter?

End-to-end testing is a process for determining whether an application’s flow is working as intended from beginning to end. E2E tests detect system dependencies and guarantee that the correct information delivers across different system components and systems. E2E testing, in effect, automates the process of simulating what a user may do when interacting with a program or browser. It makes sure the program runs smoothly.

As web applications get more complicated and feature-rich, it becomes increasingly difficult for development teams to manually test every piece of functionality each time a new feature is ready to deploy. Designing an E2E testing framework takes the burden and continual effort of assessing functionality off people’s shoulders and places it in the hands of machines that can move far faster than humans and repeat tests accurately every time.

Google Puppeteer: Everything You Need to Know

Puppeteer is too easy to start. It’s simple since the Chrome DevTools team voluntarily provides a version of the headless Chrome portion, known as Chromium, with each release of Puppeteer guaranteeing that it works every time.

You may use Puppeteer to: 

• Scrape websites 
• Make PDFs of websites crawl a SPA generate screenshots of webpages with SVG and Canvas (single-page application) 
• Visit online pages and extract information using the standard DOM API to create pre-rendered content (server-side rendering). 
• Automate the submission of forms 
• Automate performance analysis and UI testing in the same way as Cypress does with Chrome extensions.

Installation Requirements for Puppeteer 

You’ll need basic familiarity with JavaScript, ES6+, and Node.js before you can start with Puppeteer. You must install the most recent version of Node.js. Also, to be noted precisely, Puppeteer requires at least the Node v6.4.0 version. To begin, we’ll need to download and install one of Puppeteer’s packages. Some of them include:

1. Library Package

The library package comprises Puppeteer-core, a minimalistic library that works with any browser that supports the DevTools protocol without needing to install Chromium. It’s handy when we don’t need to utilize a downloaded version of Chromium, such as when using this library in a project that communicates with a browser remotely. Execute the ‘npm install puppeteer-core’ command to install.

2. Product Package

Puppeteer, a significant package stacked on top of puppeteer-core, is a complete browser automation solution. Run ‘npm install puppeteer’ to install Puppeteer.

Browser That Interacts 

As previously said, Puppeteer is nothing more than a Chrome DevTools Protocol API. That’s why Puppeteer’s ecosystem includes ways to start a new Chromium instance and connect to an existing one.

Getting the browser started and connecting Chromium

The most straightforward approach to interacting with the browser is to use Puppeteer to launch a Chromium instance. The launch method begins by creating a sample and connecting Puppeteer to it. After fixing the issue, it returns a Promise, and you get a browser instance that represents our initialized instance. 

The connect method establishes a connection between Puppeteer and the instance we just created. All we have to do now is supply the WebSocket endpoint for our illustration. On the other hand, the Chrome launcher only demonstrates how to make an instance. If you have the necessary WebSocket endpoint, you may connect an example in whatever way you like.

Role of Browser Context

Consider what would happen if, instead of constructing a browser instance each time, we could use the same one but partition it into numerous distinct sessions that are all part of the same shared browser. Browser Contexts are a session type that enables you to do precisely that. When you establish a browser instance, it comes with a default context; however, multiple browser contexts construct as needed.

Besides showing how to access each context, we also need to know that the only method to end the default context is to close the browser instance, which also completes all of the browser’s contexts—for example, granting more permissions without affecting the rest of the browser.

Headful Mode

Compared to the headless mode, which primarily uses the command line, the headful mode opens the browser with a graphical user interface throughout the instruction. Headless mode is best suited to situations that don’t require or support a graphical user interface, in case you were wondering. One of the essential aspects of Puppeteer is that we can achieve practically anything without using our minds.

Debugging: Look for Potential Errors.

When coding, we should be aware of the many debugging options accessible. You may find Puppeteer troubleshooting hints in the manual. Look at the following fundamentals:

1. Examining how the browser works 

We should analyze how our code communicates with the browser and what displays on the screen. With the help of the headful mode, which we’re already familiar with, we can do this. Beyond that, since the browser is open, we can easily see the operational instructions, thanks to the function ‘slowMo,’ which slows Puppeteer down as it executes each process.

2. In-browser debugging of the application code 

If you wish to debug the program in the browser that is now open, you must launch the DevTools and generally begin debugging as you do. It’s important to remember that using DevTools immediately puts the browser in headless mode and opens the DevTools. Furthermore, you may use; ‘waitForTarget’ to keep the browser process alive until terminating explicitly.

Some of you might be asking if it’s possible to put the browser to sleep for a certain period, so the first approach is simply a function that resolves a promise when’setTimeout’ completes. On the other hand, the second technique is more superficial but requires a page instance.

3. Troubleshooting the Puppeteer-based process 

Puppeteer operates in a Node.js process that is entirely separate from the browser process, as we all know. As an outcome, debugging it should approach as if it were a standard Node.js application. It doesn’t matter if you connect to Puppeteer via an inspector client or ndb (a Node.js improved debugging experience supported by Chrome DevTools); the key is to insert the breakpoints just before Puppeteer’s operation. It’s also possible to programmatically add them using the debugger; command.

Puppeteer’s Other Fascinating Characteristics

There are additional important aspects to emphasize in addition to debugging Puppeteer. Puppeteer may run as a serverless application or in a Docker container. It can intercept network requests, collect performance statistics, and test them with a Chrome plugin. Run code on a website by emulating Chrome on a mobile device. Several other things are available to be used by the Puppeteer. The Google team is working enough to make it helpful to developers in various ways.

The Puppeteer’s Interacting Page

Well, since the Puppeteer is connected to a browser instance that, as previously said, represents our browser instance, we can create a single page or a series of pages. Page is a class representing a single tab in the browser or the backdrop of an addon. As you might expect, this class contains valuable methods and events for interacting with the page, such as choosing elements, getting information, waiting for items, and many more.

Use of Code Coverage 

Chrome 59 introduces the code coverage tool, allowing you to see how much code is utilized compared to the loaded code. You can minimize the amount of dead code and, as a result, lower the time it takes for pages to load. We can programmatically manage the same functionality using Puppeteer. You can ask Puppeteer to collect coverage statistics for JavaScript and CSS files until the website is loaded. Following that, you may need to define the function ‘calculateUsedBytes’ for examining the coverage data and calculating how many bytes uses depending on the coverage. 

Performance Evaluation

One goal of website performance measurement is to examine how a page performs during load and runtime to make it quicker. Let’s look at how you can utilize Puppeteer to track the performance of your pages.

1. Metrics for analyzing load time

The function ‘Window.performance’ may access the Navigation Timing Web API, which gives information and metrics about page navigation and load events. If evaluate receives a function that produces a non-serializable value, the ‘evaluate’ function will eventually return undefined. So, remember to stringify ‘window.performance’ while evaluating. 

2. Metrics-based analysis of runtime

Unlike load time, Puppeteer provides a nice API for runtime metrics. JSHeapUsedSize represents the page’s actual memory consumption. The output of Performance.getMetrics, which is part of the Chrome DevTools Protocol, may be seen in the result.

3. Using tracing to examine browser activity

Chromium Tracing is a profiling tool for Chrome that allows you to see what the browser is doing behind the scenes, focusing on every thread, tab, and process. Regardless of this, it is visible in Chrome DevTools’ Timeline window. Puppeteer, which, as you might assume, uses the Chrome DevTools Protocol, also has this tracing functionality.

LambdaTest is a platform that which allows you to use Puppeteer to run headless tests on the world’s fastest and most powerful test automation cloud for testing website which is engineered to grow easily. You can test on over 3000 different browsers and versions, including non-headless Chrome and Chromium.

Wrapping Up:-

A Puppeteer is a sophisticated tool created by the Google DevTools team to make headless, automated browser testing much more effortless. It requires less set up to start, the syntax is more intuitive, and it has applications beyond testing websites during development. Puppeteer does give a convenient and efficient API and a great abstraction, so we don’t have to worry about the subtle details while working with it.