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.<\/p>\n

\n<\/ins>\n<\/div>\n

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.<\/p>\n

What is Chrome Dev Tool?<\/h3>\n
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.<\/p>\n
Chrome Developer Tool is available for Chrome and Chromium-based browser you can invoke this developer tool by using keyboard shortcut CTRL + SHIFT + I<\/strong> or F12<\/strong>, you can also invoke from User interface in Chrome Browser.<\/p>\n
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.<\/p>\n
$\"\"$ <\/p>\n
Once you click on this the Chrome developer tool opens up<\/p>\n
$\"\"$ <\/p>\n

What are the Advantageous of Chrome Developer Tools?<\/h3>\n
Inspect the Element \/ Elements Tab<\/h5>\n
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.<\/p>\n
Toggle Device<\/h5>\n
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.<\/p>\n
Performance<\/h5>\n
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.<\/p>\n
Console<\/h5>\n
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.<\/p>\n
Sources<\/h5>\n
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.<\/p>\n
Network<\/h5>\n
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.<\/p>\n
Memory<\/h5>\n
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.<\/p>\n
Application<\/h5>\n
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.<\/p>\n
Security<\/h5>\n
The Security Tab in Chrome Dev Tools Provides information such as HTTPS Certificate data, connection-related information, and other resources security information.<\/p>\n
LightHouse<\/h5>\n
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.<\/p>\n
That\u2019s 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\u2019s 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\u2019s what Chrome DevTools Protocol is, let us look into it.<\/p>\n
Chrome Dev Tools Protocol<\/h3>\n
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.<\/p>\n
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\u2019s which is consistent but it is still under progress and it can take some more time.<\/p>\n
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.<\/p>\n
How to use Chrome Dev Tools Protocol in Selenium 4<\/h3>\n
Selenium 4 provides two methods namely<\/p>\n
\n
send()<\/li>\n
executeCDPCommand()<\/li>\n<\/ul>\n
both the commands are used for Chrome DevTools Protocol interaction but there are differences.<\/p>\n
What is the difference between Selenium 4 send() and executeCDPcommnad()?<\/h3>\n
send():<\/strong> 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.<\/p>\n
executeCdpCommand():<\/strong> The executeCdpCommand() method is available directly from ChromiumDriver, It doesn\u2019t 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.<\/p>\n
Emulate Device using Chrome DevTools Protocol in Selenium 4<\/h3>\n
Chrome DevTools Protocol<\/a> has a dedicated documentation page<\/a> 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.<\/p>\n
You need to follow below steps to perform Emulation in Chrome.<\/p>\n
Initialize driver instance.<\/strong><\/p>\n
To get access to Chrome DevTools Protocol we need to initialize the ChromeDriver first. We can initialize like below.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
ChromeDriver driver = new ChromeDriver(); \/\/ Create driver instance<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Using Driver instance create an instance of DevTools.<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
DevTools devTool = driver.getDevTools(); \/\/ Create devTool instance<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Now you have got the DevTools instance, to access the CDP we need to create a session for the same.<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
devTool.createSession();<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
To perform any operation on CDP all the above steps remains the same, that is<\/p>\n
\n
Initialize Chrome Driver<\/li>\n
Create DevTools Instance<\/li>\n
Create Session<\/li>\n<\/ul>\n
Now, we need to change the screen size, i.e Emulation, CDP has documented available methods for Emulcation domain<\/a>, in our case, it is setDeviceMetricsOverride.<\/strong><\/p>\n
The setDeviceMetricsOverride<\/strong> has many paraments some are optional and some are mandatory. Selenium CDP integration provides similar methods.<\/p>\n
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.<\/p>\n
Example: Method Signature (Hover on the method to see the method signature in eclipse)<\/strong><\/p>\n
Command<Void> org.openqa.selenium.devtools.v94.emulation.Emulation.setDeviceMetricsOverride(<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Integer width,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Integer height,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Number deviceScaleFactor,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Boolean mobile,<\/p>\n
Optional<Number> scale,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Integer> screenWidth,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Integer> screenHeight,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Integer> positionX,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Integer> positionY,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Boolean> dontSetVisibleSize,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<ScreenOrientation> screenOrientation,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<Viewport> viewport,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Optional<DisplayFeature> displayFeature<\/p>\n
)<\/p>\n
Considering above Syntax, we can call the method like below.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
devTool.send(Emulation.setDeviceMetricsOverride(<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 500,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 600,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 50,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 true,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty()<\/span><\/p>\n
));<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Java, provides utility called Optional.empty(), where we can pass the empty parameters for non-mandatory fields.<\/p>\n
Once you call the CDP command you can navigate to the website using below line of code<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
driver.get(“https:\/\/courses.rahulshettyacademy.com\/courses”);<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Putting everything together<\/strong><\/p>\n
Example: Chrome Device Emulation with Chrome DevTools Protocol (CDP) in Selenium 4<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
import java.util.Optional;<\/span><\/p>\n
import org.junit.Test;<\/span><\/p>\n
import org.openqa.selenium.chrome.ChromeDriver;<\/span><\/p>\n
import org.openqa.selenium.devtools.DevTools;<\/span><\/p>\n
import org.openqa.selenium.devtools.v94.emulation.Emulation;<\/span><\/p>\n
public class EmulateDevice {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 @Test<\/span><\/p>\n
public void emulateDeviceWithSend() throws InterruptedException {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 System.setProperty(“webdriver.chrome.driver”, “your chromedriver path”);<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 ChromeDriver driver = new ChromeDriver(); \/\/ Create driver instance<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 DevTools devTool = driver.getDevTools(); \/\/ Create devTool instance<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 devTool.createSession();<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 devTool.send(Emulation.setDeviceMetricsOverride(<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 500,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 600,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 50,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 true,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty(),<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Optional.empty()<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 ));<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 driver.get(“https:\/\/courses.rahulshettyacademy.com\/courses”);<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 Thread.sleep(10000);<\/span><\/p>\n
}<\/span><\/p>\n
}<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
When you execute the test, output looks like below in browser<\/p>\n
Output: Chrome Device Emulation in Selenium 4<\/strong><\/p>\n
$\"\"$ <\/p>\n
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.<\/p>\n
As mentioned before in this article we have two commands send() and executeCdpCommand().<\/p>\n
The above example uses the send command, let\u2019s see how can we do the same thing from executeCdpCommand()<\/p>\n
Chrome Device Emulation with executeCdpCommand() in Selenum 4<\/h3>\n
The executeCdpCommand() is provided by the driver, so we need to create the driver<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
ChromeDriver driver = new ChromeDriver(); \/\/ Create driver instance<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Next, The executeCdpCommand() takes two arguments command<\/strong> and hashmap<\/strong>.<\/p>\n
The command is in our case its \u201cEmulation.setDeviceMetricsOverride<\/strong>\u201d, If you refer to the CDP document<\/a>, we can see the mandatory parameters are width, height, deviceScaleFactor, mobile, there are many other metrics but those are optional.<\/p>\n
So, send() methods made everything ready for you but \u00a0executeCdpCommand() you need to do it on your own, that means you need to create HashMap with all the required fields<\/p>\n
The code looks like below.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
driver.executeCdpCommand(“Emulation.setDeviceMetricsOverride”,Map.of(<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “width”, 500,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “height”, 600,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “deviceScaleFactor”, 50,<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “mobile”, true<\/span><\/p>\n
));<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
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.<\/p>\n
Considering above two examples, both the example does the same thing but second example using executeCdpCommand()<\/strong> 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()<\/strong> method over the executeCdpCommand()<\/strong> method.<\/p>\n
Let\u2019s look at a few more examples of CDP.<\/p>\n
Accessing Console Logs with Selenium 4 CDP Command<\/h3>\n
As we need to capture the Console Logs, we need to know which API call should be made.<\/p>\n
Chrome DevTools Protocol<\/a> has a dedicated documentation page<\/a> where they have documented all the available APIs. For our example, they have documented accessing Log Entries<\/a> on the same page.<\/p>\n
To access Chrome Console Logs in Selenium we need to do two things<\/p>\n
\n
Enable Logs<\/li>\n
Use Log.EntryAdded to iterate over the Console Logs.<\/li>\n<\/ul>\n
Enabling logs can be done in one simple line of code that is.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
devTool.send(Log.enable()); \/\/ Enable logs to capture console logs<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
We need add listener to Log.entryAdded() event to capture console logs.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
devTool.addListener(Log.entryAdded(), logEntry -> {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Log Text : ” + logEntry.getText());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Log Level : ” + logEntry.getLevel());<\/span><\/p>\n
System.out.println(“Log Source : ” + logEntry.getSource());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“URL : ” + logEntry.getUrl().toString());<\/span><\/p>\n
});<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Considering the above code<\/p>\n
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.<\/p>\n
Finally, add the navigation step to navigate to that particular website.<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
driver.get(“https:\/\/courses.rahulshettyacademy.com\/courses”);<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Putting Everything together<\/strong><\/p>\n
Example: Capture Console Logs using Chrome DevTools Protocol in Selenium 4<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
import org.junit.Test;<\/span><\/p>\n
import org.openqa.selenium.chrome.ChromeDriver;<\/span><\/p>\n
import org.openqa.selenium.devtools.DevTools;<\/span><\/p>\n
import org.openqa.selenium.devtools.v94.log.Log;<\/span><\/p>\n
public class ConsoleLogs {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 @Test<\/span><\/p>\n
\u00a0\u00a0 public void getConsoleLogs() {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.setProperty(“webdriver.chrome.driver”, “your driver path”);<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 ChromeDriver driver = new ChromeDriver(); \/\/ Create driver instance<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 DevTools devTool = driver.getDevTools(); \/\/ Create devTool instance<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 devTool.createSession();<\/span><\/p>\n
\u00a0 \u00a0 \u00a0 devTool.send(Log.enable()); \/\/ Enable logs to capture console logs<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 devTool.addListener(Log.entryAdded(), logEntry -> {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Log Text : ” + logEntry.getText());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Log Level : ” + logEntry.getLevel());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Log Source : ” + logEntry.getSource());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“URL : ” + logEntry.getUrl().toString());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 });<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 driver.get(“https:\/\/courses.rahulshettyacademy.com\/courses”);<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/p>\n
}<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Once you execute the test with Selenium 4 you get the below output.<\/p>\n
Output: Chrome Console Logs in Selenium 4<\/strong><\/p>\n
$\"\"$ <\/p>\n<\/div>\n
\n
Getting Browser Version and User-Agent in CDP Selenium 4<\/h3>\n
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<\/p>\n
Example : Capture Browser Agent, Browser Version using CDP in Selenium 4<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
package selenium4.selenium;<\/span><\/p>\n
import org.junit.Test;<\/span><\/p>\n
import org.openqa.selenium.chrome.ChromeDriver;<\/span><\/p>\n
import org.openqa.selenium.devtools.DevTools;<\/span><\/p>\n
import org.openqa.selenium.devtools.v94.browser.Browser;<\/span><\/p>\n
import org.openqa.selenium.devtools.v94.browser.Browser.GetVersionResponse;<\/span><\/p>\n
public class BrowserVersion<\/span><\/p>\n
{<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n
\u00a0@Test<\/span><\/p>\n
\u00a0 public void getConsoleLogs() {<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.setProperty(“webdriver.chrome.driver”,”Path to chromdriver”);<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 ChromeDriver driver = new ChromeDriver();<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 DevTools devtools = driver.getDevTools();<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 devtools.createSession();<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 GetVersionResponse browser = devtools.send(Browser.getVersion());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“Browser Version => “+browser.getProduct());<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 System.out.println(“User Agent => “+browser.getUserAgent());<\/span><\/p>\n
\u00a0 }<\/span><\/p>\n
}<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
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.<\/p>\n
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.<\/p>\n
Author:<\/strong> Ganesh Hegde | LinkedIn<\/a><\/p>\n
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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
Table of Contents What is Chrome Dev Tool? What are the Advantageous of Chrome Developer Tools? Inspect the Element \/ Elements Tab Toggle Device Performance Console Sources Network Memory Application Security LightHouse Chrome Dev Tools Protocol How to use Chrome Dev Tools Protocol in Selenium 4 What is the difference between Selenium 4 send() and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1289","post","type-post","status-publish","format-standard","hentry","category-selenium","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1289"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1289\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Inspect the Element \/ Elements Tab<\/h5>\nInspect 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.<\/p>\n

Performance<\/h5>\nPerformance 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.<\/p>\n

Console<\/h5>\nThe 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.<\/p>\n

Sources<\/h5>\nThe 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.<\/p>\n

Memory<\/h5>\nThe 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.<\/p>\n

Application<\/h5>\nThe 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.<\/p>\n

Security<\/h5>\nThe Security Tab in Chrome Dev Tools Provides information such as HTTPS Certificate data, connection-related information, and other resources security information.<\/p>\n

How to use Chrome Dev Tools Protocol in Selenium 4<\/h3>\nSelenium 4 provides two methods namely<\/p>\n

Inspect the Element \/ Elements Tab<\/h5>\n
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.<\/p>\n

Performance<\/h5>\n
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.<\/p>\n

Console<\/h5>\n
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.<\/p>\n

Sources<\/h5>\n
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.<\/p>\n

Memory<\/h5>\n
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.<\/p>\n

Application<\/h5>\n
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.<\/p>\n

Security<\/h5>\n
The Security Tab in Chrome Dev Tools Provides information such as HTTPS Certificate data, connection-related information, and other resources security information.<\/p>\n