Chrome DevTools Protocol (CDP) is the new API feature in Selenium 4. DevTools is a short form of Developer Tools. With Selenium 4, QA Engineers can leverage Chrome and Microsoft Edge’s debugging protocol to debug, simulate poor network conditions and emulate geolocation for automation testing. This API would help to identify and resolve critical issues of the web pages with ease.
How does Chrome Debugging Protocol work?
In Selenium 4, both ChromeDriver class and EdgeDriver class extend ChromiumDriver class. ChromiumDriver class extends RemoteWebDriver class. ChromiumDriver class provides 2 methods executeCdpCommand and getDevTools, to control DevTools in Chrome and Microsoft Edge.
DevTools is a class that provides various methods to handle developer options, such as createSession, addListener, close and send.
Let’s see how we can view console logs, enable network conditions, emulate geolocation and ignore certificate warnings using Chrome DevTools Protocol.
View Console Logs
We can view console messages logged by the browser and get details of the error using the new APIs. This would help us to identify the root cause of the issue. The DevTools in Selenium 4 provides a way to listen to 4 log levels: Verbose, Info, Warnings and Errors.
Let’s consider we need console logs for QED42’s 404 pages. Here, we cannot get the dev tools using the WebDriver instance. Either, we need to cast the WebDriver object to ChromeDriver using ((ChromeDriver) driver).getDevTools or create a ChromeDriver object.
Steps
Snippet
Output
Emulate Geolocation
Sometimes, applications have different features across different locations. Using DevTools, we can emulate geolocation by making the browser be in a different location. This is known as geolocation testing.
Emulation.setGeolocationOverride command of CDP is used to override the location and it takes latitude, longitude and accuracy as parameters.
Below is the snippet to override the current location to New York City:
Output
Network Conditions
When testing an application, we need to think about users with a slow internet connection. Chrome DevTools Protocol provides Network.emulateNetworkConditions command to emulate different network conditions. This command takes 5 parameters - offline, latency, downloadThroughput, uploadThroughput and ConnectionType. ConnectionType can be BLUETOOTH, 2G, 3G, 4G, WIFI, ETHERNET and NONE.
Emulate Slow Internet Connection
Let’s write test scripts to emulate slow internet connection and to compare application loading time between slow network and normal mode.
Snippet
Output
Emulate Offline
Some applications have the functionality to support continuing working offline. Applications can be offline due to many reasons such as bad weather, power outage, etc. Let’s see how we can make the Network offline.
Snippet
Output
Certificate Error Website
Sometimes, you visit websites with SSL issues and browsers give a security warning message. In order to access such websites, you need to approve that you want to continue accessing the website. With Chrome DevTools Protocol, we can ignore these security warnings and load the page.
We will use https://expired.badssl.com/, which generates such security warnings.
Snippet
Output
The chrome browser skips the warning and loads the site.
The sample codes are available at the GitHub repository here.
Conclusion
With Selenium 4, you can use the Chrome DevTools API to test the application by emulating geolocation and varying network connections. This makes the automation tests more flexible by opening possibilities of customization and emulation.