Selenium4: A Peek into Chrome DevTools

Photo by Shahadat Rahman on Unsplash

Selenium 4 has added native support for Chrome DevTools APIs. With these new APIs, we can now monitor and intercept HTTP requests and HTTP responses, simulate network speed, basic authentication, validate and clear application cookies and cache, accessing console logs and performance metrics, and a lot more.

We will initialize devtools session and webdriver before starting the test

Monitoring HTTP Requests

To monitor the request we need to pass the event Network.requestWillBeSent to the listener. This event is fired when the page is about to send an HTTP request.

After this, we use a listener to listen to the various HTTP requests being sent, their request headers, post body, URL, etc.

Let’s see some sample code:

Intercepting HTTP Response

Fore intercepting the response we will be using Network.responseReceived event. This fired when the HTTP response is available, with this we can listen to URL, response headers, response code, etc. To get the response body use the method Network.getResponseBody

Emulate Network Speed

Many people use web applications from handheld devices such as iPads, mobile phones which are connected to wifi or cellular network. It's important to test the application under different network speeds.

Register Basic Auth

With devtools we can now handle the authentication directly, for this we need to use the method Network.setExtraHTTPHeaders.

Block URLs

We can block certain URLs from loading while the webpage loads.

Validating Cookies

With chrome dev tools API we can play around with browser cookies. We can clear browser cookies, delete all cookies, get and set cookie or cookies.

There are other methods also for cookies:

1. Network.deleteCookies : Deletes browser cookies with matching name and URL or domain/path pair.
2. Network.getCookies : Returns all browser cookies for the current URL. Depending on the backend support, will return detailed cookie information in the cookies field.
3. Network.setCookie : Sets a cookie with the given cookie data.
4. Network.setCookies : Sets given cookies.

Override User-Agent

Sometimes, we want to test mobile web apps and that’s where UserAgent comes into play. We can change our browser to a mobile browser by providing a mobile user agent.

Load Insecure Sites

With the DevTools we can ignore SSL security warnings.

Capture Console Logs

When the application is opened, the console error logs published by the application are captured.

Simulate Device Dimension

Web applications are built for a variety of platforms and devices like phones, tablets, laptops of various dimensions. As a tester, we should check the responsiveness of the application in different dimensions.

We can use the method Emulation.setDeviceMetricsOverride and pass it to the devTools.send(). This method requires 12 parameters of which 4 are mandatory and 8 optional. By using the executeCdpCommand() we can pass the 4 mandatory params ignoring the 8 optional.

Mocking Geo Location

There are many scenarios where we need to test certain location-based functionality like offers, location-based prices, etc. For these, we can mock the location using DevTools API.

Performance Metrics

With DevTools we can get performance metrics while running automation tests.

These are only a few examples, Chrome DevTools API provides a lot more utilities that can be used to enhance the automation tests.

Keep Exploring !!!

The full project and more sample tests can be found on my github.