EP 8: Selenium 4 : Advanced features of Chrome DevTools

Oct 08, 2023

In today’s newsletter we are going to discuss

Selenium 4 has added native support for Chrome DevTools. Chrome DevTools is a debugging tools built directly into the Google Chrome browser.
It provides developers with a comprehensive suite of tools for inspecting, debugging, profiling, and optimizing web applications.

Geo Location can be Mocked in Selenium 4 using Dev Tools.
In below example, the Network.setGeolocationOverride method is used to mock the geolocation coordinates. The latitude is set to 52.5200, the longitude to 13.4050, and the accuracy to 100 meters. You can adjust these values according to your testing needs.
As shown in below example, even though I am browsing from USA, I am able to set my location as Berlin, Germany.

Why it is important to test this?
Simulate how the application behaves in different locations without physically moving.
We can ensure these features function correctly across various locations.
Applications may display different content or language based on the user's location. Mocking geolocation helps with this.
Let’s see some sample code:
And here is the video of the output

Emulating Network Speed allows us to test application performs under various network conditions such as 2G, 3G etc.
In the below example, the network conditions are emulated to be slow 3G with a latency of 100ms, download speed of 100kbps, upload speed of 500kbps.

Why it is important to test this?
Slow network conditions can reveal bottlenecks in your application's performance.
Users from different parts of the world might have varying network speeds and conditions.

Let’s see some sample code:

And here is the video of the output

Emulating device dimensions in Selenium using Chrome DevTools Protocol (CDP) allows you to test how a website looks and behaves on different devices.
In this example below, Emulation.setDeviceMetricsOverride(width, height, deviceScaleFactor,…) is used to set the device metrics and orientation. You can adjust the width, height, device scale factor, mobile mode, and orientation according to your testing requirements.
And here is the video of the output

Validating cookies using Chrome DevTools ensures that users are properly authenticated and authorized to access application.
In the example below, code enables the Network domain to intercept network requests, navigates to a website, and retrieves cookies using the Chrome DevTools Protocol. You can then validate the cookie names, values, and other attributes as needed.

Why it is important to test this?
By validating cookies, you can ensure that sessions are correctly created, maintained, and terminated, providing a seamless user experience.
Validating cookies allows testers to confirm that specific user states are maintained across different actions.

Let’s see some sample code

And here is the video of the output

Capturing Console Logs provide valuable information about error messages and stack trace.
The devTools.addListener(Console.messageAdded(), ...) captures messages added to the console and prints them.

Why it is important to test this ?
- Javascript /Ajax errors might not be visible in UI.
- Monitoring Security Vulnerabilities.
- Capture Cross browser behavior.

Let’s see some sample code
And here is the video of the output

You can find code of this newsletter issue at this GitHub Repository

Let’s Connect on Social Media

Connect with me on LinkedIn (6.8K+ Followers) and Twitter.

QA Automation Newsletter by Dhara