logo logo

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

main post image

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.

chromedevtools

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:

Initialisationdevtools

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.

validateNetworkResponse

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.

emulateNetworkConditions

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.

validateCookies

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… Stay Tuned! 😉

 

Avatar

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.

Join TestProject Community

Get full access to the world's first cloud-based, open source friendly testing community. Enjoy TestProject's end-to-end test automation Platform, Forum, Blog and Docs - All for FREE.

Join Us Now  

Leave a Reply

Join TestProject Newsletter

Join a 20K community of readers! Always stay up-to-date with all the latest test automation trends, best practice and tips shared by leading software testing community experts across the globe!

FacebookLinkedInTwitterEmail