Quality Engineering・4 min read・Last update on May 9, 2023

# Selenium 4 API for Chrome DevTools

 

 

 

 ![Selenium 4 API for Chrome DevTools](/sites/default/files/remediation-media/64e5de71b92eee0391a3e868_Selenium_204_20API_20for_20Chrome_20DevTools.avif) 

 



 

   Table of contents  - [How does Chrome Debugging Protocol work?](#how-does-chrome-debugging-protocol-work)
- [View Console Logs](#view-console-logs)
- [Emulate Geolocation](#emulate-geolocation)
- [Network Conditions](#network-conditions)
- [Emulate Offline](#emulate-offline)
- [Certificate Error Website](#certificate-error-website)
- [Conclusion](#conclusion)
 
  

 

[Chrome DevTools Protocol](https://chromedevtools.github.io/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

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/7f86e469945907726e62adc7.png.webp?itok=IypP7IVs)   ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/4312dddf808c554348aa3e7a.png.webp?itok=imroG_oK)   ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/ba3aacf07d97c1967c8ad3ef.png.webp?itok=fFUX5H9X) 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

1. Set up the ChromeDriver
2. Get the dev tools using driver.getDevTools()
3. Create a session in ChromeDriver
4. Enable the logs in the Console
5. Add a listener to listen to the logs
6. 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

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_700w_webp/public/c3-body-media/e939ec6b01f07bf2624ddf96.png.webp?itok=5vjvD0Yb) ### 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

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/5f46342802f9329ab677aadc.png.webp?itok=n_aSSQnz) ### 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.

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/b6a400d6f131be809ea6af4e.png.webp?itok=grnU9bPC) ### 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

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_500w_webp/public/c3-body-media/3c33c93ac9c059a19ec602ba.png.webp?itok=yN-ByV3N) ### 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.

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_600w_webp/public/c3-body-media/3d0a31ebab2d0ff0fad6df4b.png.webp?itok=PfCpPTmQ) #### 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.

  ![Selenium 4 Chrome DevTools](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/795c7ad99e492c2928597623.png.webp?itok=BEDywbqG) The sample codes are available at the GitHub repository [here](https://github.com/sonamchaturvedi28/selenium4_codes).

### 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.

 



Written by

Sonam Chaturvedi

QA Technical Lead

 

 

 

 

 

 

 ## We'd love to talk about your business objectives

 [ Contact Us  ](/contact)