Introduction

Chrome DevTools

In the dynamic realm of web development and testing, staying at the forefront of technology is paramount. One indispensable toolset that has become a linchpin in this space is the Chrome Developer Tools (DevTools). DevTools empowers developers and testers alike with an array of features for debugging, optimizing, and inspecting web applications directly from the browser.

CDP

Nestled within DevTools is the Chrome DevTools Protocol (CDP), a powerful interface that facilitates seamless communication between the browser and external tools. CDP opens the door to an extensive range of capabilities. It offers a standardized method for interacting with the Chrome browser programmatically. It provides tools to instrument, inspect, debug, and profile Chromium, Chrome, and other Blink-based browsers.

Selenium 4

Enter Selenium, the widely acclaimed framework for browser automation and testing. Selenium, in its continual evolution, has integrated with the Chrome DevTools Protocol from Selenium 4.  Hence creating a potent alliance that goes beyond conventional browser automation. This integration enables testers to unlock advanced features, providing unparalleled control over browser behavior and enhancing the depth of insights gained during testing.

Throughout this blog series, we will explore specific facets of Selenium CDP integration. Unravel the potential of Chrome DevTools Protocol to elevate web testing. Our journey commences with a focus on simulating mobile browsing, where we will demystify the intricacies of Device Metrics Override with Selenium CDP. Join us as we embark on a voyage to Optimizing web testing with Selenium CDP.

Method and Events

Method

In Selenium CDP, methods refer to the specific actions or functions that you can invoke to interact with the Chrome browser through the Chrome DevTools Protocol. With methods, you can manipulate various aspects of the browser’s behavior, such as emulating different devices, controlling network conditions, and accessing performance metrics.

For instance, when emulating browser behavior to simulate a mobile device, you’ll use methods related to device metrics override. These methods let you set parameters like device width, height, pixel ratio, and more, effectively tricking the browser into behaving as if it were running on a specific mobile device.

Events

Events, on the other hand, are occurrences or triggers that take place within the Chrome browser during its operation. With Selenium CDP, we can actively listen for these, capturing crucial information or even launching actions based on specific conditions.

When emulating browser behavior, events become crucial for capturing responses and monitoring changes. For example, you might use event listeners to capture network responses, track performance metrics, or detect errors. By leveraging events, you gain a real-time understanding of the browser’s activities, enabling more comprehensive testing and debugging.

Emulating Browser Behavior by Overriding Device Metrics through Automation

We will be setting device metrics in Chrome Devtool browser using Selenium and CDP. For the demo purpose, we will be using a sample website and setting the browser view as a mobile view by overriding device metrics in the Selenium script. And perform some click action on the website in mobile view.

Below is the script and step-by-step explanation of the code for the flow :

import java.util.Optional;

import org.openqa.selenium.By;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v120.emulation.Emulation;

import io.github.bonigarcia.wdm.WebDriverManager;

public class emul {

public static void main(String[] args) {

//Create driver -> The WebTool is applicable only for chromium based browwsers
WebDriverManager.chromedriver().setup();
ChromeDriver driver = new ChromeDriver();

//Create DevTool class object
DevTools devTools = driver.getDevTools();

//start session
devTools.createSession();

//send command to CDP methods -> CDP method will invoke and get access to Chrome DevTool

//CDP Method > setDeviceMetricsOverride , parameters value used width= 600, height=1000, deviceScaleFactor=50%, mobile=true and other parameters as Optional.empty()
devTools.send(Emulation.setDeviceMetricsOverride(600, 1000, 50, true, Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty()));

//perform test
driver.get(“rahulshettyacademy.com/angularAppdemo/”);
driver.findElement(By.cssSelector(“.navbar-toggler”)).click();
driver.findElement(By.cssSelector(“Library”)).click();

}
}

The Emulation class method we are using accepts device metrics parameters like width, height, device scale factor, mobile view, etc.

We have provided the values of the desired parameters and for the rest parameters we are using “Optional.empty()” as an argument in place of null.

Optional.empty() is part of the java.util package and is primarily used in Java programming for working with the Optional class. The Optional class is designed to provide a more expressive way to handle situations where a value might be absent, without explicitly using null references.

For more details about the parameters, you can refer to the particular section in the documentation mentioned below.

We can find various CDP methods and events in the official documentation Chrome DevTools Protocol.

Conclusion

The fusion of Selenium and Chrome DevTools Protocol in Selenium 4 marks a transformative leap in web testing. Transitioning from foundational insights into Chrome Developer Tools, we seamlessly applied methods and events in Selenium CDP, revealing a dynamic synergy. This integration empowers testers with unparalleled control, exemplified in our practical demonstration where device metrics were overridden for mobile emulation. As we wrap up, it’s evident that Selenium’s collaboration with CDP is not merely a feature; it’s a gateway to innovation. The journey has just begun, promising continuous evolution in web testing. Stay tuned for more insights, and embrace the future of testing with confidence.