How to use Selenium’s Chrome DevTools Protocol?

Chrome DevTools is a useful tool to grab vital information while testing a web application on Chrome browser. However, when the testing happens using automated test scripts, we can’t retrieve Chrome DevTools important details like console’s log messages, Network, Page Performance and etc.

In Selenium 4, we are going to get Chrome DevTools Protocol (CDP) which helps to get DevTools’ properties such as Application Cache, Fetch, Network, Performance, Profiler, Resource Timing, Security and Target CDP domains etc.

In this blog article, you will learn how to execute Chrome DevTools Protocol commands using Selenium 4.

Selenium 4 (Alpha) Maven Dependancy

Selenium 4 is yet to be released. However, we have 7 alpha versions. Use the below maven dependancy in POM xml.

<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.0.0-alpha-5</version>
</dependency>

Setting Network Conditions

Sometimes you may have to test your website or web application in different network conditions. You can set custom upload and download throughput in Chrome DevTools manually to test a web application in a desired network condition.

In Selenium, you can do this using the below code.

ChromeDriver driver = new ChromeDriver();

CommandExecutor executor = driver.getCommandExecutor();
         
//Set the conditions
Map<String, Object> map = new HashMap<String, Object>();
map.put("offline", false);
map.put("latency", 5);
map.put("download_throughput", 5000);
map.put("upload_throughput", 5000);
 
Response response = executor.execute(new Command(driver.getSessionId(),"setNetworkConditions", ImmutableMap.of("network_conditions", ImmutableMap.copyOf(map))));
 
driver.get("http://google.com");

However, using Selenium’s Chrome DevTools Protocol, you can do it elegantly.

Refer the below code which uses Selenium 4 Chrome DevTools Protocol implementation.

DevTools devTools = driver.getDevTools();
devTools.createSessionIfThereIsNotOne();
devTools.clearListeners();

devTools.send(Network.emulateNetworkConditions(false, 5, 5000, 5000, Optional.of(ConnectionType.NONE)));

Clearing Browser Cookies and Cache

Cache creates temporary files and it eats RAM. If you want to clear browser cache using Chrome DevTools, you can try the below code.

DevTools devTools = driver.getDevTools();
devTools.send(Network.clearBrowserCache());

For clearing cookies:

devTools.send(Network.clearBrowserCookies());

Fetching Performance Metrics

In DevTools, you can analyse page’s runtime performance in Performance tab. Using CDP, you can fetch performance metrics in automation testing. Refer the below snippet.

devTools.send(Performance.setTimeDomain(Performance.SetTimeDomainTimeDomain.TIMETICKS));
devTools.send(Performance.enable());

driver.get("https://google.com");

List<Metric> metrics = devTools.send(Performance.getMetrics());


for (Metric metric:metrics) {
	System.out.println(metric.getName());
	System.out.println(metric.getValue());
}

devTools.send(Performance.disable());

Listening Console Log Entries

Monitoring Chrome console log entires while testing a web application manually is a cumbersome task. In Selenium 4, you can listen the log entires easily.

The below code listens 404 error.

devTools.send(Log.enable());

devTools.addListener(Log.entryAdded(), logEntry -> {
System.out.println(logEntry.getText().contains("404"));
        });

driver.get("https://codoid.com/fafafafsasf");

In Conclusion

We, as an automation testing services company, are happy to explore the new features of Selenium 4. Controlling and capturing Chrome DevTools is great value add for automation testing.