Selenium 4 API for Chrome DevTools

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.

executeCdpCommand: Executes Chrome DevTool Protocol command by passing parameter.
getDevTools: Returns DevTools

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

Set up the ChromeDriver
Get the dev tools using driver.getDevTools()
Create a session in ChromeDriver
Enable the logs in the Console
Add a listener to listen to the logs
Now, Load the AUT

Snippet
‍


package example.test;

import org.testng.annotations.Test;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import java.time.Duration;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v91.log.Log;
import io.github.bonigarcia.wdm.WebDriverManager;

public class CDPViewConsoleLogs {
	public ChromeDriver driver;

	@BeforeClass
	public void setUp() {
	    WebDriverManager.chromedriver().setup();
	    driver = new ChromeDriver();
	    driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
	}

	@AfterClass
	public void afterClass() {
	    driver.quit();
	}

	@Test
	public void viewConsoleLogs() {
	    DevTools devTools = driver.getDevTools();
	    devTools.createSession();
	    devTools.send(Log.enable());

devTools.addListener(Log.entryAdded(), logEntry -> {
		System.out.println("-------------------------------------------");
		System.out.println("Request ID = " + logEntry.getNetworkRequestId());
		System.out.println("URL = " + logEntry.getUrl());
		System.out.println("Source = " + logEntry.getSource());
		System.out.println("Level = " + logEntry.getLevel());
		System.out.println("Text = " + logEntry.getText());
		System.out.println("Timestamp = " + logEntry.getTimestamp());
		System.out.println("-------------------------------------------");
	    });
	    driver.get("https://www.qed42.com/404");
    }
}

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:


package example.test;

import org.testng.annotations.Test;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.AfterClass;
import org.openqa.selenium.By;
import org.openqa.selenium.chrome.ChromeDriver;
import java.time.Duration;
import java.util.HashMap;
import java.util.Map;
import io.github.bonigarcia.wdm.WebDriverManager;

public class CDPEmulateGeolocation {
	public ChromeDriver driver;

	@BeforeClass
	public void setUp() {
	    WebDriverManager.chromedriver().setup();
	    driver = new ChromeDriver();
	    driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
	}

	@AfterClass
	public void afterClass() {
	    driver.quit();
	}

	@Test
	public void emulateGeolocation() {
	    Map coordinates = new HashMap() {
		{
		     put("latitude", 40.7128);
		     put("longitude", -74.0060);
		     put("accuracy", 1);
		 }
	    };
		
	    driver.executeCdpCommand("Emulation.setGeolocationOverride", coordinates);
	    driver.get("https://where-am-i.org/");
		
	    System.out.println("-----GeoLocation----");
	    System.out.println("Location:" + driver.findElement(By.id("address")).getText());
	    System.out.println("Latitude:" +     driver.findElement(By.id("latitude")).getText());
	    System.out.println("Longitude:"+ driver.findElement(By.id("longitude")).getText());
	    System.out.println("--------------------");
       }
}

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

‍


@Test
public void emulateSlowNetwork() {
    devTool.createSession();
    devTool.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
    devTool.send(Network.emulateNetworkConditions(
			false,100,200000,100000,Optional.of(ConnectionType.CELLULAR3G)));
		
    long startTime = System.currentTimeMillis();
    driver.get("https://www.qed42.com");
    long endTime = System.currentTimeMillis();

    System.out.println("Slow Network: Page loaded in " + (endTime - startTime) + "  
milliseconds");
}
	
@Test
public void accessURLNormal() {
    long startTime = System.currentTimeMillis();
    driver.get("https://www.qed42.com");
    long endTime = System.currentTimeMillis();

    System.out.println("Normal Way: Page loaded in " + (endTime - startTime) + " milliseconds");
}

Output

The QED42’s homepage opened in 3295 Milliseconds, the normal way.
With a slow network enabled, the loading time was longer. It finished in 18837 Milliseconds.

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
‍


@Test
public void emulateNetworkOffline() {
    devTool.createSession();
    devTool.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
    devTool.send(Network.emulateNetworkConditions(
                  true, 100, 200000, 100000, Optional.of(ConnectionType.CELLULAR3G)));

    devTool.addListener(loadingFailed(), loadingFailed -> {
        Assert.assertEquals(loadingFailed.getErrorText(), "net::ERR_INTERNET_DISCONNECTED");
    });

   try {
	 driver.get("https://www.qed42.com");
   } catch (WebDriverException exc) {
        System.out.println("Network Offline: " + driver.getCurrentUrl() + " did not load");
   }
}

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‍


@Test
public void loadUntrustedSite() {
    devTool.createSession();
    devTool.send(Security.enable());
    devTool.send(Security.setIgnoreCertificateErrors(true));

    driver.get("https://expired.badssl.com/");
}

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.