{"id":27560,"date":"2024-08-01T18:06:00","date_gmt":"2024-08-01T22:06:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=27560"},"modified":"2025-01-24T14:53:20","modified_gmt":"2025-01-24T19:53:20","slug":"selenium-chrome-devtools-protocol-cdp-how-does-it-work","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-chrome-devtools-protocol-cdp-how-does-it-work\/","title":{"rendered":"Selenium Chrome DevTools Protocol (CDP) API: How Does It Work?"},"content":{"rendered":"\n

Selenium 4 introduces a new powerful API that grants access to Chrome DevTools directly from your automated tests! This is done via the Chrome DevTools Protocol<\/a> (or CDP for short) which is essentially a set of tools that enables you to access and control Chromium-based browsers.<\/p>\n\n\n\n

You may know Chrome DevTools as the place where you inspect elements to find their locators. But there are lots of other domains here as well such as Network, Performance, and Security. There’s also a bunch of commands and sensors available.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Selenium 4’s new Chromium DevTools API is essentially a wrapper around the raw CDP commands, and access to these commands from our tests opens a world of possibilities!<\/p>\n\n\n\n

For example, we can mock the geolocation of our browser to do testing in areas where we aren’t actually physically located. We can simulate things like network speed and device mode. We can intercept network requests and mock responses. And we can capture console logs and performance metrics. Essentially anything that can be done from the Chrome DevTools window can now be done from our automated tests! <\/p>\n\n\n\n

Shama Ugale has provided Selenium 4 CDP examples<\/a> complete with code snippets! And in this post, I’ll provide the architecture to help you better understand how to use CDP in your tests.<\/p>\n\n\n\n

ChromiumDriver<\/h2>\n\n\n\n

ChromiumDriver is a new driver that can be used to interact with Chromium-based browsers such as Google Chrome and Microsoft Edge. The browser-specific drivers ChromeDriver and EdgeDriver still exist in Selenium 4, but now they inherit from ChromiumDriver instead of the RemoteWebDriver class (which ChromiumDriver now extends).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

From ChromiumDriver (or any of its children classes), you can now access the getDevTools()<\/strong> method which returns a DevTools<\/strong> object.<\/p>\n\n\n\n

DevTools devTools = driver.getDevTools();<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
DevTools Object<\/h2>\n\n\n\n
The DevTools object has methods to manage CDP sessions, add and remove listeners, and most notably send CDP commands. The send()<\/strong> method accepts a Command, which are the Selenium-provided wrappers for CDP commands. <\/p>\n\n\n\n
The wrapper classes represent the 45 CDP Domains<\/a> and can all be found in the org.openqa.selenium.devtools.vXX<\/strong><\/em> package, where the vXX represents the browser version you’re running against. <\/p>\n\n\n\n
For example, I’m currently using Chrome 88, so I must ensure I have the corresponding <\/strong>devtools dependency:<\/p>\n\n\n\n
        <dependency>\n            <groupId>org.seleniumhq.selenium<\/groupId>\n            <artifactId>selenium-devtools-v88<\/artifactId>\n            <version>4.0.0-beta-1<\/version>\n        <\/dependency><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Here are the CDP Domains. Each of these have a corresponding wrapper class in Selenium 4.<\/p>\n\n\n\n
\n
\n
Accessibility<\/a>
Animation<\/a>
ApplicationCache<\/a>
Audits<\/a>
BackgroundService<\/a>
Browser<\/a>
CacheStorage<\/a>
Cast<\/a>
Console<\/a>
CSS<\/a>
Database<\/a>
Debugger<\/a>
DeviceOrientation<\/a>
DOM<\/a>
DomDebugger<\/a><\/p>\n\n\n\n
<\/p>\n<\/div>\n\n\n\n
\n
DOMSnapshot<\/a>
DOMStorage<\/a>
Emulation<\/a>
Fetch<\/a>
HeadlessExperimental<\/a>
HeapProfiler<\/a>
IndexedDB<\/a>
Input<\/a>
Inspector<\/a>
IO<\/a>
LayerTree<\/a>
Log<\/a>
Media<\/a>
Memory<\/a>
Network<\/a><\/p>\n<\/div>\n\n\n\n
\n
Overlay<\/a>
Page<\/a>
Performance<\/a>
Profiler<\/a>
Runtime<\/a>
Schema<\/a>
Security<\/a>
ServiceWorker<\/a>
Storage<\/a>
SystemInfo<\/a>
Target<\/a>
Tethering<\/a>
Tracing<\/a>
WebAudio<\/a>
WebAuthn<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n
By clicking on any of the CDP Domain links above, you’ll see the available commands. Each of these commands are methods within the Selenium domain wrapper classes. This makes it relatively straightforward to invoke a CDP command using the send()<\/strong> method.<\/p>\n\n\n\n
For example, the signature for the send()<\/strong> method is<\/p>\n\n\n\n
devTools.send(Command<X> command)<\/code><\/pre>\n\n\n\n
 And if we wanted to invoke a command, we could do so by passing in the {Domain}.{command}<\/strong> to the send()<\/strong> method. Let’s say we wanted to clear the browser cache. The Network<\/a> domain has a clearBrowserCache command, so this is what we’d use in Selenium as well.<\/p>\n\n\n\n
devTools.send(Network.clearBrowserCache());<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
executeCdpCommand<\/h2>\n\n\n\n
Selenium 4 also provides the executeCdpCommand()<\/strong> method. I’m already seeing people jump straight to this method as opposed to the send()<\/strong> method, as the name is very enticing. The executeCdpCommand()<\/strong> method is available directly from ChromiumDriver (and its descendent classes). The purpose of this method is to allow you to invoke any raw<\/em> CDP commands. As the devtools<\/strong> package has all of the ready-made wrappers available, the send()<\/strong> method should be your first choice to invoke CDP commands. The executeCdpCommand()<\/strong> method should be used when you want to bypass Selenium’s implementation and call the CDP commands directly. The use of executeCdpCommand()<\/strong> requires a bit more work, as you’ll need to paste in the exact Domain.command<\/em> as well as a Map of all of the command’s parameters.<\/p>\n\n\n\n
For example, here’s a call to emulate a geolocation using executeCdpCommand()<\/strong>. Notice, I need to manually type in the names for the Domain, command, parameters as well as the parameter values.<\/p>\n\n\n\n
driver.executeCdpCommand(\n        \"Emulation.setGeolocationOverride\",\n        Map.of(\n                \"latitude\", 30.3079823,\n                \"longitude\", -97.893803,\n                \"accuracy\", 1\n        ));<\/code><\/pre>\n\n\n\n
And here’s the more streamlined way of invoking that same CDP command by using the DevTools API that Selenium provides. Here I only need to manually type in the values. Selenium takes care of everything else, so there’s less room for error.<\/p>\n\n\n\n
devTools.send(Emulation.setGeolocationOverride(\n        Optional.of(35.8235),\n        Optional.of(-78.8256),\n        Optional.of(100)));<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Hopefully, this helps you understand CDP better and how you may be able to take your tests to the next level!<\/p>\n\n\n\n
Quick Answers<\/h2>\n\n\n\n
How does the Chrome DevTools Protocol improve Selenium automation?<\/strong> 
CDP in Selenium offers more control over the browser by allowing access to advanced features like network throttling, console logs, and cache management. This control improves test accuracy and helps simulate real-world conditions more effectively.<\/p> <\/div> 
What are the advantages of using Selenium with Chrome DevTools Protocol?<\/strong><\/strong> 
Using CDP with Selenium allows for deeper browser interactions, including intercepting network requests, modifying headers, and emulating devices. These capabilities enhance test realism and enable more comprehensive testing.<\/p> <\/div> 
How can CDP in Selenium help monitor browser console logs?<\/strong><\/strong> 
CDP allows testers to capture and review browser console logs during tests, making it easier to identify JavaScript errors or warnings. This visibility helps troubleshoot issues that could affect user experience or functionality.<\/p> <\/div> 
How does the Chrome DevTools Protocol handle device emulation in Selenium?<\/strong><\/strong> 
CDP allows testers to emulate devices, screen sizes, and resolutions, making it easy to simulate mobile and tablet experiences in a Selenium test. This emulation helps verify that web applications are responsive and visually accurate on different devices.<\/p> <\/div> 
What are some use cases for modifying browser headers with CDP in Selenium?<\/strong><\/strong> 
Modifying headers with CDP allows testers to simulate different user-agent environments, handle authorization tokens, and test API response variations. This flexibility supports more robust testing across multiple scenarios.<\/p> <\/div> <\/div>\n\n\n\n
\n