Selenium 4 and Chrome DevTools Protocol (CDP)

Introduction

Selenium 4 introduces powerful features, and one of the notable enhancements is the integration with the Chrome DevTools Protocol (CDP). CDP provides a programmatic way to interact with the Chrome browser's developer tools, allowing developers and testers to control browser behavior, capture network requests, log console messages, and much more. In this comprehensive guide, we will explore the capabilities of Selenium 4 with CDP.

What is Chrome Dev Tool?

Developer Tools, found in all modern browsers, serve as a crucial resource for developers, offering tools for analysis and debugging. Specifically tailored for Chrome and Chromium-based browsers, the Chrome Developer Tool (DevTools) can be accessed through keyboard shortcuts (CTRL + SHIFT + I or F12) or the user interface within the Chrome Browser.

To unveil the Chrome developer tool, simply navigate to the hamburger menu in the top right corner, select "More tools," and then click on "Developer Tools."

Features of Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Chrome browser. It offers a wide range of features to help developers analyze, debug, and optimize web pages. Some of the advantageous features include:

1. Inspect Element / Elements Tab: Provides a DOM tree representation, aiding in creating XPath, CSS Selectors, etc.

2. Toggle Device: Allows verification of responsiveness on different devices, with options to set custom screen dimensions.

3. Performance Tab: Analyzes webpage performance metrics, offering insights into loading, rendering, painting, etc.

4. Console: Displays errors and console logs related to the webpage, providing an interactive console for querying DOM elements.

5. Network Tab: Essential for tracking all request and response sequences, including assets, scripts, and API calls.

6. Memory Tab: Offers information on how the page utilizes memory, enabling the analysis of memory leaks.

7. Application Tab: Provides details on sessions, cookies, manifest files, service worker information, etc.

8. Security Tab: Offers information on HTTPS certificate data, connection-related details, and other security information.

9. Lighthouse: Captures website performance metrics, accessibility compliance, best practices, and SEO-related information.

Chrome DevTools Protocol (CDP)

Chrome DevTools Protocol (CDP) allows developers to instrument, inspect, debug, and profile Chrome and Chromium-based browsers programmatically. CDP provides a set of APIs, and Selenium 4 introduces support for these protocols. The CDP methods are categorized into domains such as Browser, Debugger, DOM, etc. Selenium 4 provides access to these Chrome DevTools Protocols, offering the ability to intercept network requests, access console logs, and more.

Selenium 4 Methods for CDP Interaction

1. send(): This method, available in the org.openqa.selenium.devtools package, serves as a wrapper to the Chrome DevTools Protocol. Selenium utilizes this wrapper to make calls to Chrome DevTools Protocol commands. It is recommended for stability and future compatibility.

2. executeCdpCommand(): Available directly from ChromiumDriver, this method allows direct calls to Chrome DevTools Protocol without using Selenium wrappers. It requires more manual work for sending parameters and is considered less stable.

Chrome Device Emulation Chrome DevTools

Example 1: Chrome Device Emulation using send()method

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", "path/to/chromedriver");

      // Create driver instance
      ChromeDriver driver = new ChromeDriver();

      // Create devTool instance
      DevTools devTool = driver.getDevTools();       

      // Create a session for Chrome DevTools Protocol
      devTool.createSession();

      // Change the screen size (Emulation)
      devTool.send(Emulation.setDeviceMetricsOverride(
         500,  // width
         600,  // height
         50,   // deviceScaleFactor
         true  // mobile
      ));

      // Navigate to the website:
      driver.get("https://example.com");
      Thread.sleep(10000);
   }
}

Example 2: Chrome Device Emulation using executeCdpCommand()method

import java.util.HashMap;
import org.junit.Test;
import org.openqa.selenium.chrome.ChromeDriver;

public class EmulateDeviceWithExecuteCdpCommand {

    @Test
    public void emulateDeviceWithExecuteCdpCommand() throws InterruptedException {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Create driver instance
        ChromeDriver driver = new ChromeDriver(); 

        // Using executeCdpCommand() for device emulation
        HashMap<String, Object> deviceMetrics = new HashMap<>();
        deviceMetrics.put("width", 500);
        deviceMetrics.put("height", 600);
        deviceMetrics.put("deviceScaleFactor", 50);
        deviceMetrics.put("mobile", true);

        HashMap<String, Object> parameters = new HashMap<>();
        parameters.put("deviceMetricsOverride", deviceMetrics);

        driver.executeCdpCommand("Emulation.setDeviceMetricsOverride", parameters);

        // Navigate to the website
        driver.get("https://example.com");

        // Sleep for demonstration purposes
        Thread.sleep(10000);

        // Close the browser
        driver.quit();
    }
}

In this example, we are using the executeCdpCommand() method to directly call the Emulation.setDeviceMetricsOverride command without the Selenium wrapper. The necessary parameters for device emulation are specified in a HashMap, and the command is executed. The browser is then navigated to a website (https://example.com in this case), and a pause is added for demonstration purposes.

Remember to replace "path/to/chromedriver" with the actual path to your ChromeDriver executable.

Conclusion

Selenium 4's integration with Chrome DevTools Protocol opens up new possibilities for developers and testers. By leveraging CDP, you can programmatically control the Chrome browser, capture network requests, log console messages, emulate devices, and access browser information. As CDP evolves, Selenium 4 provides a stable and convenient wrapper with the send() method for interacting with Chrome DevTools Protocol, ensuring a seamless experience for automation testing.