{"id":24506,"date":"2023-07-02T17:38:00","date_gmt":"2023-07-02T21:38:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=24506"},"modified":"2025-01-24T14:56:22","modified_gmt":"2025-01-24T19:56:22","slug":"selenium-4-chrome-devtools","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/","title":{"rendered":"Selenium 4: Chrome DevTools Protocol [What&#8217;s New]"},"content":{"rendered":"\n<p>In the previous post of the Selenium 4 blog series, we discussed some of the <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/new-features-selenium4\/\">new features in Selenium 4<\/a>.<\/p>\n\n\n\n<p>In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.<\/p>\n\n\n\n<p>I\u2019ll share some of the capabilities of the Selenium 4 CDP APIs as well as practical use cases that can take our tests to the next level!<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>&#8220;The <strong>getDevTools() <\/strong>method returns the new <strong>DevTools<\/strong>&nbsp;object which allows you to <strong>send() <\/strong>the built-in Selenium commands for CDP. These commands are wrapper methods that make it cleaner and easier to invoke CDP functions.&#8221;<\/p><cite>Shama ugale<\/cite><\/blockquote><\/figure>\n\n\n\n<p>But first, what is Chrome DevTools?<\/p>\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.r6pwxjrrikw6\">Introduction to Chrome DevTools<\/h2>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome DevTools<\/a>&nbsp;is a set of tools built directly into Chromium-based browsers like Chrome, Opera, and Microsoft Edge to help developers debug and investigate websites.<\/p>\n\n\n\n<p>With Chrome DevTools, developers have deeper access to the website and are able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inspect Elements in the DOM<\/li>\n\n\n\n<li>Edit elements and CSS on the fly<\/li>\n\n\n\n<li>Check and monitor the site\u2019s performance<\/li>\n\n\n\n<li>Mock geolocations of the user<\/li>\n\n\n\n<li>Mock faster\/slower networks speeds<\/li>\n\n\n\n<li>Execute and debug JavaScript<\/li>\n\n\n\n<li>View console logs<\/li>\n\n\n\n<li>and so much more<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.m5jnsrv2n3lb\">Selenium 4 Chrome DevTools APIs<\/h2>\n\n\n\n<p>Selenium 4 has added native support for Chrome DevTools APIs. With these new APIs, our tests can now:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Capture and monitor the network traffic and performance<\/li>\n\n\n\n<li>Mock geolocations for location-aware testing, localization, and internationalization<\/li>\n\n\n\n<li>Change the device mode and exercise the responsiveness of the application<\/li>\n<\/ul>\n\n\n\n<p>And that\u2019s just the tip of the iceberg!<\/p>\n\n\n\n<p>Selenium 4 introduces the new ChromiumDriver class, which includes two methods to access Chrome DevTools: <strong>getDevTools()<\/strong>&nbsp;and <strong>executeCdpCommand()<\/strong>.<\/p>\n\n\n\n<p>The <strong>getDevTools() <\/strong>method returns the new <strong>DevTools<\/strong>&nbsp;object which allows you to <strong>send() <\/strong>the built-in Selenium commands for CDP. These commands are wrapper methods that make it cleaner and easier to invoke CDP functions.<\/p>\n\n\n\n<p>The <strong>executeCdpCommand()<\/strong>&nbsp;method also allows you to execute CDP methods but in a more raw sense. It does not use the wrapper APIs but instead allows you to directly pass in a <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome DevTools command<\/a>&nbsp;and the parameters for that command. The <strong>executeCdpCommand()<\/strong>&nbsp;can be used if there isn\u2019t a Selenium wrapper API for the CDP command, or if you\u2019d like to make the call in a different way than the Selenium APIs provide.<\/p>\n\n\n\n<p>The Chromium-based drivers such as ChromeDriver and EdgeDriver now inherit from ChromiumDriver, so you also have access to the Selenium CDP APIs from these drivers as well.<\/p>\n\n\n\n<p>Let\u2019s explore how we can utilize these new Selenium 4 APIs to solve various use cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.xcdn88akt2ni\">Simulating Device Mode<\/h2>\n\n\n\n<p>Most of the applications we build today are responsive to cater to the needs of the end users coming from a variety of platforms, devices like phones, tablets, wearable devices, desktops &nbsp;and orientations.<\/p>\n\n\n\n<p>As testers, we might want to place our application in various dimensions to trigger the responsiveness of the application. &nbsp;<\/p>\n\n\n\n<p>How can we use Selenium\u2019s new CDP functionality to accomplish this?<\/p>\n\n\n\n<p>The CDP command to modify the device\u2019s metrics is <strong><a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Emulation\/#method-setDeviceMetricsOverride\" target=\"_blank\" rel=\"noopener noreferrer\">Emulation.setDeviceMetricsOverride<\/a><\/strong>, and this command requires input of width, height, mobile, and deviceScaleFactor. These four keys are mandatory for this scenario, but there are several optional ones as well.<\/p>\n\n\n\n<p>In our Selenium tests, we could use the <strong>DevTools::send()<\/strong>&nbsp;method using the built-in <strong>setDeviceMetricsOverride() <\/strong>command, however, this Selenium API accepts 12 arguments &#8211; the 4 that are required as well as 8 optional ones. For any of the 8 optional arguments that we don\u2019t need to send, we can pass <strong>Optional.empty()<\/strong>.<\/p>\n\n\n\n<p>However, to streamline this a bit by only passing the required parameters, I\u2019m going to use the raw <strong>executeCdpCommand() <\/strong>instead as shown in the code below.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/f3ef48dbed32ed1db8baea5ee6a2176a.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/f3ef48dbed32ed1db8baea5ee6a2176a\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>On line 19, I create a Map with the required keys for this command.<\/p>\n\n\n\n<p>Then on line 26, I call the <strong>executeCdpCommand()<\/strong>&nbsp;method and pass two parameters: the command name as \u201cEmulation.setDeviceMetricsOverride\u201d and the device metrics Map with the parameters.<\/p>\n\n\n\n<p>On line 27, I open the \u201cGoogle\u201d homepage which is rendered with the specifications I provided as shown in the figure below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1245\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8.png\" alt=\"pasted image 0 8\" class=\"wp-image-24504\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8.png 1600w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8-300x233.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8-1024x797.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8-768x598.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-8-1536x1195.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>With a solution like <a href=\"https:\/\/app14743.cloudwayssites.com\/platform\/eyes\/\">Applitools Eyes<\/a>, we can not only rapidly test across these different viewports with these new Selenium commands, but also maintain any inconsistencies at scale. Eyes is intelligent enough to not report false positives for small, imperceivable changes in the UI resulting from different browsers and viewports.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.53s5fz6ut092\">Simulate Network Speed<\/h2>\n\n\n\n<p>Many users access web applications via handheld devices which are connected to wifi or cellular networks. It\u2019s not uncommon to reach a weak network signal, and therefore a slower internet connection.<\/p>\n\n\n\n<p>It may be important to test how your application behaves under such conditions where the internet connection is slow (2G) or goes offline intermittently.<\/p>\n\n\n\n<p>The CDP command to fake a network connection is <strong>Network.emulateNetworkConditions<\/strong>. Information on the required and optional parameters for this command can be found in the <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Network\/#method-emulateNetworkConditions\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n\n\n\n<p>With access to Chrome DevTools, it becomes possible to simulate these scenarios. Lets see how.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/444c377db2badbd0e331df724ad8b89e.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/444c377db2badbd0e331df724ad8b89e\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>On line 21, we get the <strong>DevTools<\/strong>&nbsp;object by calling <strong>getDevTools(). <\/strong>Then we invoke the <strong>send()<\/strong>&nbsp;method to enable the Network, and then call <strong>send()<\/strong>&nbsp;again to pass in the built-in command <strong>Network.emulateNetworkConditions()<\/strong>&nbsp;and the parameters we\u2019d like to send with this command.<\/p>\n\n\n\n<p>Then finally, we open the Google homepage with the network conditions simulated.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.951l38wwcgqb\">Mocking Geolocation<\/h2>\n\n\n\n<p><a href=\"https:\/\/app14743.cloudwayssites.com\/solutions\/localization-testing\/\">Testing the location-based functionality<\/a> of applications such as different offers, currencies, taxation rules, freight charges and date\/time format for various geolocations is difficult because setting up the infrastructure for all of these physical geolocations is often not a cost-effective solution.<\/p>\n\n\n\n<p>With mocking the geolocation, we could cover all the aforementioned scenarios and more.<\/p>\n\n\n\n<p>The CDP command to fake a geolocation is <strong>Emulation.setGeolocationOverride<\/strong>. Information on the required and optional parameters for this command can be found in the <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Emulation\/#method-setGeolocationOverride\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n\n\n\n<p>How can we achieve this with Selenium? Let\u2019s walk through the sample code.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/552df64db476f26459a38e69fa02cfbe.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/552df64db476f26459a38e69fa02cfbe\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>After obtaining a <strong>DevTools<\/strong>&nbsp;object, we can use its <strong>send()<\/strong>&nbsp;method to invoke the <strong>Emulation.setGeolocationOverride<\/strong>&nbsp;command, sending the latitude, longitude, and accuracy.<\/p>\n\n\n\n<p>After overriding the geolocation, we open mycurrentlocation.net and see that North Carolina is the detected geolocation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1001\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9.png\" alt=\"pasted image 0 9\" class=\"wp-image-24505\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9.png 1600w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9-300x188.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9-1024x641.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9-768x480.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9-1536x961.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/pasted-image-0-9-335x211.png 335w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.bc0ghombcetz\">Capture HTTP Requests<\/h2>\n\n\n\n<p>With DevTools we can capture the HTTP requests the application is invoking and access the method, data, headers and lot more.<\/p>\n\n\n\n<p>Lets see how to capture the HTTP requests, the URI and the request method with the sample code.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/b8c2eb6f9619c1c2bd3ad3cad2804b7d.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/b8c2eb6f9619c1c2bd3ad3cad2804b7d\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>The CDP command to start capturing the network traffic is <strong>Network.enable<\/strong>. Information on the required and optional parameters for this command can be found in the <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Network\/#method-enable\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n\n\n\n<p>Within our code on line 22, we use the <strong>DevTools::send()<\/strong>&nbsp;method to send the <strong>Network.enable<\/strong>&nbsp;CDP command to enable capturing network traffic.<\/p>\n\n\n\n<p>On line 23, a listener is added to listen to all the requests made by the application. For each request captured by the application we then extract the URL with <strong>getRequest().getUrl()<\/strong>&nbsp;and the HTTP Method with <strong>getRequest().getMethod()<\/strong>.<\/p>\n\n\n\n<p>On line&nbsp;29, we open Google\u2019s homepage and on the console the URI and HTTP methods are printed for all the requests made by this page.<\/p>\n\n\n\n<p>Once we are done capturing the requests, we can send the CDP command <strong>Network.disable<\/strong>&nbsp;to stop capturing the network traffic as shown on line 30.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.831mwn1rey5a\">Access Console logs<\/h2>\n\n\n\n<p>We all rely on logs for debugging and analysing the failures. While testing and working on an application with specific data or specific conditions, logs help us in debugging and capturing the error messages, giving more insights that are published in the Console tab of the Chrome DevTools.<\/p>\n\n\n\n<p>We can capture the console logs through our Selenium scripts by calling the <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Log\/\" target=\"_blank\" rel=\"noopener noreferrer\">CDP <\/a><strong><a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Log\/\" target=\"_blank\" rel=\"noopener noreferrer\">Log <\/a><\/strong><a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Log\/\" target=\"_blank\" rel=\"noopener noreferrer\">commands<\/a>&nbsp;as demonstrated below.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/0ae6bb92fc4ede7183621c7f9b22d8b9.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/0ae6bb92fc4ede7183621c7f9b22d8b9\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Within our code on line 19, we use <strong>DevTools::send()<\/strong>&nbsp;to enable the console log capturing.<\/p>\n\n\n\n<p>Then, we add a listener to capture all the console logs logged by the application. For each log captured by the application we then extract the log text with <strong>getText() <\/strong>and log level with <strong>getLevel()<\/strong>&nbsp;methods.<\/p>\n\n\n\n<p>Finally, the application&nbsp;is opened and the console error logs published by the application are captured.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.sbvz37d64nn4\">Capturing Performance Metrics<\/h2>\n\n\n\n<p>In today\u2019s fast world while we are iteratively building software at such a fast pace, we should aim to detect performance bottlenecks iteratively too. Poor performing websites and slower loading pages make unhappy customers.<\/p>\n\n\n\n<p>Can we validate these metrics along with our functional regression on every build? Yes, we can!<\/p>\n\n\n\n<p>The CDP command to capture performance metrics is <strong>Performance.enable<\/strong>. Information for this command can be found in the <a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Performance\/#method-enable\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n\n\n\n<p>Lets see how it&#8217;s done with Selenium 4 and Chrome DevTools APIs.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/f126f42dea806bceddf7425d2f9713ba.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/f126f42dea806bceddf7425d2f9713ba\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>First, we create a session by calling the <strong>createSession()<\/strong>&nbsp;method from DevTools as on line 19.<\/p>\n\n\n\n<p>Next, we enable DevTools to capture the performance metrics by sending the <strong>Performance.enable() <\/strong>command to <strong>send() as <\/strong>shown on line 20.<\/p>\n\n\n\n<p>Once Performance capturing is enabled, we can open the application then send the <strong>Performance.getMetrics()<\/strong>&nbsp;command to <strong>send()<\/strong>. This will return a list of <strong>Metric<\/strong>&nbsp;objects which we then stream to get all of the names of the metrics captured as on line 25.<\/p>\n\n\n\n<p>We then disable capturing the Performance on line 29 by sending the <strong>Performance.disable() <\/strong>command to <strong>send()<\/strong>.<\/p>\n\n\n\n<p>To see the metrics that we are interested in, we define a List called <strong>metricsToCheck<\/strong>&nbsp;then loop through this to print the metrics\u2019 values.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.dnpu00g8000m\">Basic Authentication<\/h2>\n\n\n\n<p>Interacting with browser popups is not supported in Selenium, as it is only able to engage with DOM elements. This poses a challenge for pop-ups such as authentication dialogs.<\/p>\n\n\n\n<p>We can bypass this by using the CDP APIs to handle the authentication directly with DevTools. The CDP command to set additional headers for the requests is <strong><a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/tot\/Network\/#method-setExtraHTTPHeaders\" target=\"_blank\" rel=\"noopener noreferrer\">Network.setExtraHTTPHeaders<\/a><\/strong>.<\/p>\n\n\n\n<p>&nbsp;Here\u2019s how to invoke this command in Selenium 4.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ShamaUgale\/268ebf12ec1f1a6fed6de732267b14aa.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ShamaUgale\/268ebf12ec1f1a6fed6de732267b14aa\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>We begin by using the DevTools object to create a session and enable Network. This is demonstrated on lines 25-26.<\/p>\n\n\n\n<p>Next, we open our website and then create the authentication header to send.<\/p>\n\n\n\n<p>On line 35, we send the <strong>setExtraHTTPHeaders <\/strong>command to&nbsp;<strong>send()<\/strong>&nbsp;along with the data for the header. This is the part that will authenticate us and allow us to bypass the browser popup.<\/p>\n\n\n\n<p>To test this out, we then click the <strong>Basic Authentication test <\/strong>link. If you try this manually, you\u2019ll see the browser popup asking you to login. But since we sent the authentication header, we will not get this popup in our script.<\/p>\n\n\n\n<p>Instead, we get the message &#8220;Your browser made it!&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.vo8jrruvcjj0\">Summary<\/h2>\n\n\n\n<p>As you can see, Selenium has become a lot more powerful with the addition of the CDP APIs. We can now enhance our tests to capture HTTP network traffic, collect performance metrics, handle authentication, and emulate geolocations, time zones and device modes. As well as anything else that is possible within Chrome DevTools!<\/p>\n\n\n\n<p>In the next post of this series, we will explore more new Selenium 4 features such as Observability and enhanced exceptions along with the brand new Selenium Grid 4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-quick-answers\">Quick Answers<\/h2>\n\n\n\n<div class=\"wp-block-group pt-none pb-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1731025092682\"><strong class=\"schema-faq-question\">How can I use the CDP API to simulate different device modes in Selenium 4?<\/strong> <p class=\"schema-faq-answer\">With the <code>Emulation.setDeviceMetricsOverride<\/code> command, you can set specific screen dimensions, mobile views, and other parameters to test responsive designs. This enables you to see how your application performs on different devices directly within your tests.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1731077238238\"><strong class=\"schema-faq-question\">What\u2019s the benefit of simulating network speeds in testing?<\/strong> <p class=\"schema-faq-answer\">Simulating network speeds, such as slow 2G or intermittent connectivity, helps identify how an application behaves under various real-world conditions. This is especially valuable for mobile users who might experience inconsistent network connections.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1731077246458\"><strong class=\"schema-faq-question\">How do I capture HTTP requests in Selenium 4 using CDP?<\/strong> <p class=\"schema-faq-answer\">You can capture HTTP requests by enabling the network with <code>Network.enable<\/code> and adding a listener to log requests. This allows you to monitor request URLs, methods, and other details, which can help troubleshoot issues related to API calls or network performance.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1731077255197\"><strong class=\"schema-faq-question\">Why would I use geolocation mocking in Selenium testing?<\/strong> <p class=\"schema-faq-answer\">Geolocation mocking is useful for testing location-based functionality, like currency, offers, or other regional settings, without physically being in each location. This is achievable with the <code>Emulation.setGeolocationOverride<\/code> command in the CDP API.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1731077267984\"><strong class=\"schema-faq-question\">What are some practical use cases of the CDP APIs in Selenium 4?<\/strong> <p class=\"schema-faq-answer\">The CDP APIs can be used to simulate device modes, capture network traffic, monitor console logs, manage basic authentication popups, and measure performance metrics. These capabilities help create realistic testing scenarios and improve the reliability of your automated tests.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"wp-block-group pb-none pt-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n.schema-faq-section { \n  background: white;\n  margin: 1rem 0;\n  border: 2px solid rgba(0, 0, 0, 0.13);\n  border-radius: 10px;\n  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);\n}\n.schema-faq-question{\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  transition: opacity ease 0.25s;\n  padding: 1rem;\n  color: var(--wp--preset--color--primary);\n  font-size: var(--wp--preset--font-size-large);\n}\n.schema-faq-question:hover {\n  color: var(--wp--preset--color--secondary);\n}\n.schema-faq-question:after{\n  width: 16px;\n  height: 20px;\n  display: inline-block;\n  margin-left: auto;\n  margin-right: 5px;\n  vertical-align: top;\n  color: inherit;\n  content: \"+\";\n}\n.schema-faq-question.expanded:after{\n  content: \"-\";\n}\n.schema-faq-question:hover{\n  opacity: 0.75;\n}\n.schema-faq-answer{\n  padding: 0 1rem 1rem 1rem;\n  display: none;\n}\n.schema-faq-answer.default{\n  display: block;\n}\n.editor-styles-wrapper .schema-faq-question {\n  cursor: text;\n}\n.editor-styles-wrapper .schema-faq-answer {\n  display: block; \n}\n<\/style>\n\n\n\n<script>\njQuery(function($){var yoast={accordion:function(){var isAnimating=!1;$(\".schema-faq-section\").find(\".schema-faq-question\").click(function(event){event.stopPropagation();if(isAnimating)return;isAnimating=!0;var answer=$(this).nextAll(\".schema-faq-answer\").eq(0);answer.slideToggle(250,function(){$(this).toggleClass(\"expanded\");$(this).prev(\".schema-faq-question\").toggleClass(\"expanded\");isAnimating=!1});$(\".schema-faq-answer\").not(answer).slideUp(\"fast\",function(){$(this).removeClass(\"expanded\");$(this).prev(\".schema-faq-question\").removeClass(\"expanded\")})})}};yoast.accordion()});\n<\/script>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.<\/p>\n","protected":false},"author":63,"featured_media":24516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[10061,10139,12688,12690],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Selenium 4 CDP API: Features, Benefits, and How It Works<\/title>\n<meta name=\"description\" content=\"Explore Selenium 4\u2019s Chrome DevTools Protocol API. Learn about its features, benefits, and how it helps developers with browser automation and testing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Selenium 4: Chrome DevTools Protocol [What&#039;s New]\" \/>\n<meta property=\"og:description\" content=\"In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-02T21:38:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T19:56:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680-1024x678.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"678\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Shama Ugale\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shama Ugale\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\"},\"author\":{\"name\":\"Shama Ugale\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/1cfeab3bae9c13d65f0d3e719fa1f043\"},\"headline\":\"Selenium 4: Chrome DevTools Protocol [What&#8217;s New]\",\"datePublished\":\"2023-07-02T21:38:00+00:00\",\"dateModified\":\"2025-01-24T19:56:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\"},\"wordCount\":2183,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg\",\"keywords\":[\"Functional Testing\",\"Selenium\",\"Technical Leaders\",\"Test Engineers\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\",\"name\":\"Selenium 4 CDP API: Features, Benefits, and How It Works\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg\",\"datePublished\":\"2023-07-02T21:38:00+00:00\",\"dateModified\":\"2025-01-24T19:56:22+00:00\",\"description\":\"Explore Selenium 4\u2019s Chrome DevTools Protocol API. Learn about its features, benefits, and how it helps developers with browser automation and testing.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg\",\"width\":1680,\"height\":1113},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Topics\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Selenium 4: Chrome DevTools Protocol [What&#8217;s New]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/1cfeab3bae9c13d65f0d3e719fa1f043\",\"name\":\"Shama Ugale\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e77e2d5c9f63aa074e80ac88a69a5c56?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e77e2d5c9f63aa074e80ac88a69a5c56?s=96&d=mm&r=g\",\"caption\":\"Shama Ugale\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/shama-ugale-7a95b549\/\"],\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/shamaugale\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682\",\"position\":1,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682\",\"name\":\"How can I use the CDP API to simulate different device modes in Selenium 4?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"With the Emulation.setDeviceMetricsOverride command, you can set specific screen dimensions, mobile views, and other parameters to test responsive designs. This enables you to see how your application performs on different devices directly within your tests.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238\",\"position\":2,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238\",\"name\":\"What\u2019s the benefit of simulating network speeds in testing?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Simulating network speeds, such as slow 2G or intermittent connectivity, helps identify how an application behaves under various real-world conditions. This is especially valuable for mobile users who might experience inconsistent network connections.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458\",\"position\":3,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458\",\"name\":\"How do I capture HTTP requests in Selenium 4 using CDP?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can capture HTTP requests by enabling the network with Network.enable and adding a listener to log requests. This allows you to monitor request URLs, methods, and other details, which can help troubleshoot issues related to API calls or network performance.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197\",\"position\":4,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197\",\"name\":\"Why would I use geolocation mocking in Selenium testing?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Geolocation mocking is useful for testing location-based functionality, like currency, offers, or other regional settings, without physically being in each location. This is achievable with the Emulation.setGeolocationOverride command in the CDP API.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984\",\"position\":5,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984\",\"name\":\"What are some practical use cases of the CDP APIs in Selenium 4?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The CDP APIs can be used to simulate device modes, capture network traffic, monitor console logs, manage basic authentication popups, and measure performance metrics. These capabilities help create realistic testing scenarios and improve the reliability of your automated tests.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Selenium 4 CDP API: Features, Benefits, and How It Works","description":"Explore Selenium 4\u2019s Chrome DevTools Protocol API. Learn about its features, benefits, and how it helps developers with browser automation and testing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/","og_locale":"en_US","og_type":"article","og_title":"Selenium 4: Chrome DevTools Protocol [What's New]","og_description":"In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2023-07-02T21:38:00+00:00","article_modified_time":"2025-01-24T19:56:22+00:00","og_image":[{"width":1024,"height":678,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680-1024x678.jpg","type":"image\/jpeg"}],"author":"Shama Ugale","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shama Ugale","Est. reading time":"29 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/"},"author":{"name":"Shama Ugale","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/1cfeab3bae9c13d65f0d3e719fa1f043"},"headline":"Selenium 4: Chrome DevTools Protocol [What&#8217;s New]","datePublished":"2023-07-02T21:38:00+00:00","dateModified":"2025-01-24T19:56:22+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/"},"wordCount":2183,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg","keywords":["Functional Testing","Selenium","Technical Leaders","Test Engineers"],"articleSection":["Advanced Topics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/","name":"Selenium 4 CDP API: Features, Benefits, and How It Works","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg","datePublished":"2023-07-02T21:38:00+00:00","dateModified":"2025-01-24T19:56:22+00:00","description":"Explore Selenium 4\u2019s Chrome DevTools Protocol API. Learn about its features, benefits, and how it helps developers with browser automation and testing.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/11\/shutterstock_103450193-1680.jpg","width":1680,"height":1113},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Advanced Topics","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/"},{"@type":"ListItem","position":3,"name":"Selenium 4: Chrome DevTools Protocol [What&#8217;s New]"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/1cfeab3bae9c13d65f0d3e719fa1f043","name":"Shama Ugale","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e77e2d5c9f63aa074e80ac88a69a5c56?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e77e2d5c9f63aa074e80ac88a69a5c56?s=96&d=mm&r=g","caption":"Shama Ugale"},"sameAs":["https:\/\/www.linkedin.com\/in\/shama-ugale-7a95b549\/"],"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/shamaugale\/"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682","position":1,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731025092682","name":"How can I use the CDP API to simulate different device modes in Selenium 4?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"With the Emulation.setDeviceMetricsOverride command, you can set specific screen dimensions, mobile views, and other parameters to test responsive designs. This enables you to see how your application performs on different devices directly within your tests.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238","position":2,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077238238","name":"What\u2019s the benefit of simulating network speeds in testing?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Simulating network speeds, such as slow 2G or intermittent connectivity, helps identify how an application behaves under various real-world conditions. This is especially valuable for mobile users who might experience inconsistent network connections.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458","position":3,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077246458","name":"How do I capture HTTP requests in Selenium 4 using CDP?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can capture HTTP requests by enabling the network with Network.enable and adding a listener to log requests. This allows you to monitor request URLs, methods, and other details, which can help troubleshoot issues related to API calls or network performance.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197","position":4,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077255197","name":"Why would I use geolocation mocking in Selenium testing?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Geolocation mocking is useful for testing location-based functionality, like currency, offers, or other regional settings, without physically being in each location. This is achievable with the Emulation.setGeolocationOverride command in the CDP API.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984","position":5,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/selenium-4-chrome-devtools\/#faq-question-1731077267984","name":"What are some practical use cases of the CDP APIs in Selenium 4?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The CDP APIs can be used to simulate device modes, capture network traffic, monitor console logs, manage basic authentication popups, and measure performance metrics. These capabilities help create realistic testing scenarios and improve the reliability of your automated tests.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/24506"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=24506"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/24506\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/24516"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=24506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=24506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=24506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}