Introduction to Chrome DevTools

Chrome DevTools is a set of tools built directly into Chromium-based browsers like Chrome, Opera, and Microsoft Edge to help developers debug and investigate websites.

With Chrome DevTools, developers have deeper access to the website and are able to:

  • Inspect Elements in the DOM
  • Edit elements and CSS
  • Check and monitor the site’s performance
  • Mock geolocations of the user
  • Mock networks speeds
  • Capture HTTP requests
  • Execute and debug JavaScript
  • View console logs

Selenium 4 Chrome DevTools APIs

In the previous post of the Selenium 4, we discussed some of the new features in Selenium 4. In this post, we will discuss one of the most important features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol). This addition to the framework provides a much greater control over the browser used for testing.

Selenium 4 has added native support for Chrome DevTools APIs. With these new APIs, our tests can now:

  • Capture and monitor the network traffic and performance
  • Mock geolocations for location-aware testing, localization, and internationalization
  • Change the device mode and exercise the responsiveness of the application

Selenium 4 introduces the new ChromiumDriver class, which includes two methods to access Chrome DevTools: getDevTools() and executeCdpCommand().

The getDevTools() method returns the new DevTools object which allows you to send() the built-in Selenium commands for CDP. These commands are wrapper methods that make it cleaner and easier to invoke CDP functions.

The executeCdpCommand() method also allows you to execute CDP methods but in a more raw sense. It does not use the wrapper APIs but instead allows you to directly pass in a Chrome DevTools command and the parameters for that command.

Simulating Device Mode

Today, most applications can respond to the needs of end users from a variety of platforms and devices, such as mobile phones, tablets, wearable devices, desktops.

As testers, we may want to place the application in different dimensions to trigger the responsiveness of the application.

The CDP command can modify the measurement of the device by using Emulation.setDeviceMetricsOverride.

Simulate Network Speed

Many users access web applications through handheld devices connected to WiFi or cellular networks. It is very common that the network signal is very weak, so the Internet connection speed is slow.

It may be important to test the behavior of an application when the Internet connection is slow or intermittent offline.

The CDP command to fake a network connection via Network.emulateNetworkConditions.

Mocking Geolocation

It is difficult to test application location based features such as different quotes, currencies, tax rules, freight, and date/time formats for different geographic locations. Because infrastructure for all of these physical geographic locations is not a viable solution.

By simulating the geographical location, we can cover all the above scenes and more.

The CDP command to fake a geolocation is Emulation.setGeolocationOverride.

Capture HTTP Requests

With DevTools we can capture the HTTP requests the application is invoking and access the method, data, headers and lot more.

Lets see how to capture the HTTP requests, the URI and the request method with the sample code.

The CDP command to start capturing the network traffic is Network.enable.

Copy to Clipboard

Access Console logs

We all rely on logs for debugging and analysing the failures. While testing and working on an application with specific data or specific conditions, logs help us in debugging and capturing the error messages, giving more insights that are published in the Console tab of the Chrome DevTools.

We can capture the console logs through our Selenium scripts by calling the CDP Log commands as demonstrated below.

Copy to Clipboard

Capturing Performance Metrics

Today, when we build software iteratively at such a high speed, we should also aim at iteratively detecting performance bottlenecks. Poorly performing websites and slow loading pages can make customers unhappy.

The CDP command to capture performance metrics is Performance.enable.

Basic Authentication

Interacting with browser popups is not supported in Selenium, as it is only able to engage with DOM elements. This poses a challenge for pop-ups such as authentication dialogs.

We can bypass this by using the CDP APIs to handle the authentication directly with DevTools.

The CDP command to set additional headers for the requests is Network.setExtraHTTPHeaders.

Conclusion

As you can see, Selenium becomes more powerful with the addition of the CDP API. Now we can enhance testing to capture HTTP network traffic, collect performance metrics, handle authentication, and simulate geographic location, time zone, and device patterns. And anything else that might happen in Chrome devools.

In the next post of this series, We’ll talk about the native automated testing framework using CDP – Puppeter