Powerful Synergy of Puppeteer and Chrome DevTools

1. What is Puppeteer

Puppeteer is a NodeJS library developed by Google which provides a high-level API to control Chromium over the DevTools Protocol. Puppeteer communicates with the Chromium browser using the Chrome DevTools Protocol (CDP). Use it to automate anything in the browser, from request interception to generating PDFs and taking screenshots.

2. What is Chrome DevTools

Chrome DevTools Protocol (CDP) is a remote debugging protocol (API). Chrome DevTools uses CDP to help you inspect the browser’s state, control its behavior, and collect debugging information. CDP provides a programmatic way to interact with the Chrome browser’s developer tools, allowing developers and testers to communicate with a running Chrome browser to control browser behavior, capture network requests, log console messages, monitor network traffic, and much more.

3. Request interception

3.1. What is Request Interception

Request Interception is a powerful feature in browser automation tools that allows you to intercept, block, modify, and even fulfill network requests made by a web page before they are sent to the server. So request interception is extremely helpful in some following cases:

• If your app loads numerous unnecessary resources that are not relevant to functionality such as advertisement, analytics scripts… you can intercept and abort them to speed up test execution.
• Testing user authentication
• Mocking and Stubbing External Dependencies
• Tracking and Analyzing Network Activity

3.2. Enable Request Interception

Once request interception is enabled, every request will stall unless it’s continued, responded or aborted.

await page.setRequestInterception(true);

An example of enable request interception without implementing any continue, respond or abort request. All requests will be intercepted and nothing is sent.

Example of enable request interception and log all the information needed then continue request

Note: By default Puppeteer will raise a Request is already handled! exception if request.abort(), request.continue(), or request.respond() are called after any of them have already been called. So it’s crucial to always check the resolution status using request.isInterceptResolutionHandled() before calling abort/continue/respond

3.3. Block Requests

Another powerful aspect of request interception is the ability to block specific requests based on certain conditions.

In this example I blocked all requests that have resource type is image

3.4. Modify Requests

Puppeteer enables you to customize headers, alter request methods, or adjust the request payload before they are sent.

In above example:

• I fill valid username and password in Login page via GUI
• Then click Login button
• Use puppeteer to intercept request that URL includes “GenerateToken” and update request body with invalid credential

You can take full screenshot

Or capture a screenshot of a specific element

This feature allows you to generate PDF file from web page or HTML contents using:

File will be created in report folder

Puppeteer’s PDF generation in automation testing provides a powerful mechanism for:

• Generating test reports
• Capturing full rendered state, including dynamic content
• Print style testing

6. Conclusion

Puppeteer’s robust request interception API grants developers/tester granular control over the browser’s network layer, enabling the dynamic modification of HTTP headers, the selective interception and blocking of resource requests, thereby facilitating intricate orchestration of automated web interactions and comprehensive testing scenarios.