Selenium 4 has finally arrived with a bunch of features, which are very helpful for testers. Chrome Dev Tools Protocol is one of the features which Selenium 4 is providing. There are several major features such as Relative Locators, Screenshot options, W3C protocol, etc in Selenium 4.
Selenium 4 is supporting Chrome Dev Tools Protocol (CDP), To understand what Chrome Dev Tools Protocol is, we need to first understand what Chrome Dev Tool is.
What is Chrome Dev Tool?
Developer Tools are available in all modern browsers, Developer Tools allow us to perform many operations. As the name indicates it is a tool for developers which helps to analyse and debug.
Chrome Developer Tool is available for Chrome and Chromium-based browser you can invoke this developer tool by using keyboard shortcut CTRL + SHIFT + I or F12, you can also invoke from User interface in Chrome Browser.
Navigate to the hamburger menu located in the top right corner (also called as keytab menu, dot-dot-dot, 3 vertical dots menu) and Choose More tools, then click on Developer Tools.
Once you click on this the Chrome developer tool opens up
What are the Advantageous of Chrome Developer Tools?
Inspect the Element / Elements Tab
Inspect Element is most used, inspect elements provides the DOM tree representation, with this we can create XPath, CSS Selector, etc. later we can use it in our automation.
Toggle Device
The toggle Device option in Chrome Dev Tools helps verify the responsiveness of the screen, for example, if we need to know how our webpage looks on Mobile Devices like iPhone, Android, etc. It even allows us to set our pixel range height and width of the screen this option helps verify the responsiveness of any website.
Performance
Performance tab allows us to analyze the performance when the webpage is running, once you start recording the performance, it shows the performance metrics such as loading, rendering, painting, etc. It also gives us the summary in graph representation.
Console
The console tab in Chrome Dev Tools shows any errors in the webpage or console logs that are related to the webpage. Console tab provides interactive console that can be used for querying DOM elements.
Sources
The sources tab in Chrome Dev Tool helps us with script files that are required for our pages, images that are loaded, and the right part shows the debugger options which are helpful in JavaScript debugging.
Network
The network tab is one of the important Chrome Dev Tools Tab which holds all the request and response sequences, which includes requests made for assets, scripts, etc. on clicking the specific network request shows the all information which are related to that such as headers, URL, request type, parameters, query string (if any) If your webpage is requesting for any API we can see the response for the API as well. The network also provides the option to change the network mode to offline, connection bandwidth to 2G, 3G, 4G network speed, etc.
Memory
The Chrome Dev Tools in the memory tab provides information related to how the page is using memory, we can analyze memory leaks. It allows profiling with three options Heap Snapshot, Allocation instrumentation on Timeline and Allocation Sampling.
Application
The Application Tab in Chrome Dev Tools helps us by providing information related to sessions, cookies, manifest files, service worker information, etc. We can modify, add new cookies as well.
Security
The Security Tab in Chrome Dev Tools Provides information such as HTTPS Certificate data, connection-related information, and other resources security information.
LightHouse
Lighthouse is newly introduced, which captures the website performance such as Performance metrics, Accessibility Compliance, Best Practices, SEO related information this can be performed with an optional desktop or Mobile.
That’s a lot, we have gone through each tab of the Chrome Dev Tools at a very glance, but you can do much more than that, That’s how powerful the chrome developer tools is. But we have done all these operations manually by navigating to the tab, clicking on options. Now think if we can get control over devtools programmatically and we can control these options in our automation tests. That’s what Chrome DevTools Protocol is, let us look into it.
Chrome Dev Tools Protocol
Chrome Dev Tools Protocol helps instrument, inspect, debug and profile chrome browser and chromium-based browsers. Chrome DevTools Protocol is often called CDP. The Chrome Dev Tools is an API that provides features to perform operations on dev tools programmatically by calling those API methods. The CDP is not standardized, and CDP can differ from version to version. CDP is not recommended for testing since the API is very unstable.
Since Selenium 4 supports CDP you can use CDPs inside your tests, as mentioned earlier CDP is very unstable. Selenium is working with browser providers to make it stable. As a first step Selenium introduced W3C standard Webdriver BiDi API’s which is consistent but it is still under progress and it can take some more time.
The CDP methods are broadly divided into multiple domains such as Browser, Debugger, DOM, etc. Selenium 4 provides access to these Chrome DevTools Protocols. If you are using Selenium 4 you can intercept the network, access Console Logs, easily with this option.
How to use Chrome Dev Tools Protocol in Selenium 4
Selenium 4 provides two methods namely
- send()
- executeCDPCommand()
both the commands are used for Chrome DevTools Protocol interaction but there are differences.
What is the difference between Selenium 4 send() and executeCDPcommnad()?
send(): The selenium has written a wrapper to chrome devTools protocol, internally it makes the call to chrome dev tools protocol commands, org.openqa.selenium.devtools package provides this option. Selenium has done this considering future of this feature. Selenium might consider this for other browsers as well in the future. So the wrapper send() should be your first choice when you interact with dev tools.
executeCdpCommand(): The executeCdpCommand() method is available directly from ChromiumDriver, It doesn’t use any selenium wrapper. Only if you want to bypass selenium implementation of CDP commands then you should consider this. Since you are calling The executeCdpCommand() method it requires more work while sending parameters.
Emulate Device using Chrome DevTools Protocol in Selenium 4
Chrome DevTools Protocol has a dedicated documentation page where they have documented all the available APIs. Device Emulation is, Changing the page width, height, viewport, etc. For example, If we want to test our website responsiveness in Mobile like how page looks in Mobile then we want to change the viewport, width, height, etc.
You need to follow below steps to perform Emulation in Chrome.
Initialize driver instance.
To get access to Chrome DevTools Protocol we need to initialize the ChromeDriver first. We can initialize like below.
ChromeDriver driver = new ChromeDriver(); // Create driver instance
Using Driver instance create an instance of DevTools.
DevTools devTool = driver.getDevTools(); // Create devTool instance
Now you have got the DevTools instance, to access the CDP we need to create a session for the same.
devTool.createSession();
To perform any operation on CDP all the above steps remains the same, that is
- Initialize Chrome Driver
- Create DevTools Instance
- Create Session
Now, we need to change the screen size, i.e Emulation, CDP has documented available methods for Emulcation domain, in our case, it is setDeviceMetricsOverride.
The setDeviceMetricsOverride has many paraments some are optional and some are mandatory. Selenium CDP integration provides similar methods.
If you hover on the setDeviceMetricsOverride method in eclipse, it will show the method signature, we can see here, there are many parameters but only width, height, deviceScaleFactor, mobile is mandatory all others are optional.
Example: Method Signature (Hover on the method to see the method signature in eclipse)
Command<Void> org.openqa.selenium.devtools.v94.emulation.Emulation.setDeviceMetricsOverride(
Integer width,
Integer height,
Number deviceScaleFactor,
Boolean mobile,
Optional<Number> scale,
Optional<Integer> screenWidth,
Optional<Integer> screenHeight,
Optional<Integer> positionX,
Optional<Integer> positionY,
Optional<Boolean> dontSetVisibleSize,
Optional<ScreenOrientation> screenOrientation,
Optional<Viewport> viewport,
Optional<DisplayFeature> displayFeature
)
Considering above Syntax, we can call the method like below.
devTool.send(Emulation.setDeviceMetricsOverride(
500,
600,
50,
true,
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty()
));
Java, provides utility called Optional.empty(), where we can pass the empty parameters for non-mandatory fields.
Once you call the CDP command you can navigate to the website using below line of code
driver.get("https://courses.rahulshettyacademy.com/courses");
Putting everything together
Example: Chrome Device Emulation with Chrome DevTools Protocol (CDP) in Selenium 4
import java.util.Optional;
import org.junit.Test;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v94.emulation.Emulation;
public class EmulateDevice {
@Test
public void emulateDeviceWithSend() throws InterruptedException {
System.setProperty("webdriver.chrome.driver", "your chromedriver path");
ChromeDriver driver = new ChromeDriver(); // Create driver instance
DevTools devTool = driver.getDevTools(); // Create devTool instance
devTool.createSession();
devTool.send(Emulation.setDeviceMetricsOverride(
500,
600,
50,
true,
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty(),
Optional.empty()
));
driver.get("https://courses.rahulshettyacademy.com/courses");
Thread.sleep(10000);
}
}
When you execute the test, output looks like below in browser
Output: Chrome Device Emulation in Selenium 4
You can see that the screen size has become smaller. The test can be written to validate all these scenarios. Like clicking on the menu, navigating to different pages, etc.
As mentioned before in this article we have two commands send() and executeCdpCommand().
The above example uses the send command, let’s see how can we do the same thing from executeCdpCommand()
Chrome Device Emulation with executeCdpCommand() in Selenum 4
The executeCdpCommand() is provided by the driver, so we need to create the driver
ChromeDriver driver = new ChromeDriver(); // Create driver instance
Next, The executeCdpCommand() takes two arguments command and hashmap.
The command is in our case its “Emulation.setDeviceMetricsOverride”, If you refer to the CDP document, we can see the mandatory parameters are width, height, deviceScaleFactor, mobile, there are many other metrics but those are optional.
So, send() methods made everything ready for you but executeCdpCommand() you need to do it on your own, that means you need to create HashMap with all the required fields
The code looks like below.
driver.executeCdpCommand("Emulation.setDeviceMetricsOverride",Map.of(
"width", 500,
"height", 600,
"deviceScaleFactor", 50,
"mobile", true
));
In the above code, We are using Map.of() method to create HashMap directly, you can also consider using HashMap as an instance and add one by one with put() method.
Considering above two examples, both the example does the same thing but second example using executeCdpCommand() calls the CDP to command directly without using any selenium wrapper, as mentioned earlier in this article, the CDP is very unstable so selenium always recommends using send() method over the executeCdpCommand() method.
Let’s look at a few more examples of CDP.
Accessing Console Logs with Selenium 4 CDP Command
As we need to capture the Console Logs, we need to know which API call should be made.
Chrome DevTools Protocol has a dedicated documentation page where they have documented all the available APIs. For our example, they have documented accessing Log Entries on the same page.
To access Chrome Console Logs in Selenium we need to do two things
- Enable Logs
- Use Log.EntryAdded to iterate over the Console Logs.
Enabling logs can be done in one simple line of code that is.
devTool.send(Log.enable()); // Enable logs to capture console logs
We need add listener to Log.entryAdded() event to capture console logs.
devTool.addListener(Log.entryAdded(), logEntry -> {
System.out.println("Log Text : " + logEntry.getText());
System.out.println("Log Level : " + logEntry.getLevel());
System.out.println("Log Source : " + logEntry.getSource());
System.out.println("URL : " + logEntry.getUrl().toString());
});
Considering the above code
We are adding Listener to Log.entryAdded() event, once we add that, we will be able to access Log Text, Log Level, Log Source, URL is the array of Optional we are converting that to string.
Finally, add the navigation step to navigate to that particular website.
driver.get("https://courses.rahulshettyacademy.com/courses");
Putting Everything together
Example: Capture Console Logs using Chrome DevTools Protocol in Selenium 4
import org.junit.Test;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v94.log.Log;
public class ConsoleLogs {
@Test
public void getConsoleLogs() {
System.setProperty("webdriver.chrome.driver", "your driver path");
ChromeDriver driver = new ChromeDriver(); // Create driver instance
DevTools devTool = driver.getDevTools(); // Create devTool instance
devTool.createSession();
devTool.send(Log.enable()); // Enable logs to capture console logs
devTool.addListener(Log.entryAdded(), logEntry -> {
System.out.println("Log Text : " + logEntry.getText());
System.out.println("Log Level : " + logEntry.getLevel());
System.out.println("Log Source : " + logEntry.getSource());
System.out.println("URL : " + logEntry.getUrl().toString());
});
driver.get("https://courses.rahulshettyacademy.com/courses");
}
}
Once you execute the test with Selenium 4 you get the below output.
Output: Chrome Console Logs in Selenium 4
Getting Browser Version and User-Agent in CDP Selenium 4
The Browser domain provides Browser.getVersion() command which returns many browser related information such as browser version, user agent etc. Selenium 4 supports all these using Chrome DevTools Protocol (CDP) like below
Example : Capture Browser Agent, Browser Version using CDP in Selenium 4
package selenium4.selenium;
import org.junit.Test;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v94.browser.Browser;
import org.openqa.selenium.devtools.v94.browser.Browser.GetVersionResponse;
public class BrowserVersion
{
@Test
public void getConsoleLogs() {
System.setProperty("webdriver.chrome.driver","Path to chromdriver");
ChromeDriver driver = new ChromeDriver();
DevTools devtools = driver.getDevTools();
devtools.createSession();
GetVersionResponse browser = devtools.send(Browser.getVersion());
System.out.println("Browser Version => "+browser.getProduct());
System.out.println("User Agent => "+browser.getUserAgent());
}
}
There are many options available with the CDP commands, we have mentioned few which helps you to learn and explore more about Chrome DevTools Protocol.
Rahul Shetty Academy is providing world-class training in various test automation tools, courses are always updated. There are many modern tools for test automation, courses designed for every single tool from scratch which helps to gain expertise in such tools.
Author: Ganesh Hegde | LinkedIn
Ganesh Hegde is an experienced Quality Assurance Engineer/SDET, he has experience in various tools such as Selenium, Cypress, Protractor, Playwright, TestCafe, WebdriverIO. He is also passionate about Technical Content Writing and Blogging.