logo logo

Next Generation Front End Testing using WebDriver and DevTools: Part 1

Chrome DevTools

Back in 2017, Google has announced Multi-client remote debugging support on Chrome v63 and above. Multi-client remote debugging support opens up interesting opportunities for integrating other tools with DevTools. Multi-client support enables multiple chrome extensions to use chrome debugger API on the same tab.

The debugger in Chrome is a standalone client implementation of the Chrome Dev Tools Protocol. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. Protocol Monitor in Chrome Developer Tools displays the underlying requests and responses happening over the DevTools protocol.


The Chrome DevTools Protocol (CDP) allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers. Chromium-based browsers have the DevTools Protocol built-in. Non-Chromium based browsers like Firefox, Safari, etc use adapters to make use of opportunities that CDP provides. DevTools Protocol is officially documented and maintained here. These APIs provide a wide range of opportunities like JavaScript debugging, Emulate Network Conditions, etc.

Selenium 4 alpha versions come up with the much-anticipated native support for Chrome Dev Protocol landed via the “DevTools” interface.

Initializing DevTools Session:


Emulate GeoLocation:

Applications do have different sets of functionalities on geographic locations or certain application works only on certain geographic locations. Emulating the geo-locations for developing or testing the applications are a huge concern at times. Setting the Geo-Location is easier using chrome dev tools protocol now. 

set Geo Location

setGeolocationOverride event under the Emulation domain overrides GeoLocation position with user-provided latitude, longitude, and accuracy. Loading a web application post this will emulate user-provided Geo-Location in it. 

Network Responses:

Traditionally, we mock API responses using separate toolsets. Chrome dev tools help capture API responses on the fly for the request that web application makes.

To test, we need to enable the Network domain using the enable method. This enables tracing and helps the client to monitor network events.


To validate the response received from backed, we need to use responseReceived method which captures HTTP responses whenever it is available.

Emulate Network Conditions:

We can emulate different network types (i.e) connection types like cellular2g, cellular3g, cellular4g, ethernet, etc using emulateNetworkConditions event under the Network domain with different latency and throughput.


Application Cookies:

Modern-day applications do capture a lot of user’s behavior, authentication information, etc in form of cookie information in browsers. It is important to check any sensitive information is present in the cookie or not. Doing this check manually against every action or the navigation user perform in the application is painful.

To retrieve all the cookie information set by application in the browser, we use getAllCookies method under the Network domain.


clearBrowserCookies does clear all the cookies that the application has saved. 

Sample code snippets are available here.

As we’ve seen, Chrome DevTools which is one of the most useful web developer tools, allows you to get comprehensive information about the page and requests. In the next part of our tutorial, we will discuss mocking the network responses, capturing performance metrics, emulating devices, timezones, etc… Check it out here! 😉


About the author

Srinivasan Sekar

Srinivasan Sekar is a Lead Consultant at ThoughtWorks. He loves contributing to Open Source. He is an Appium Member and Selenium Contributor as well. He worked extensively on testing various Mobile and Web Applications. He specializes in building automation frameworks. He has also spoken at various conferences including SeleniumConf, AppiumConf, SLASSCOM, BelgradeTestConf, QuestForQualityConf, and FOSDEM.

Leave a Reply