Harnessing the Capabilities of Selenium 4

Chrome DevTools and BiDi APIs for Enhanced Automation Testing

In the dynamic world of web automation, Selenium has long been a key player. With the release of Selenium 4, its capabilities are further enhanced, introducing cutting-edge features that streamline testing processes and elevate efficiency. The integration of Chrome DevTools and BiDi APIs not only enhances technical capabilities but also adds strategic value for managers overseeing automation projects.

Chrome DevTools Protocol: A Deeper Dive into Browser Automation

Selenium 4’s integration with Chrome DevTools Protocol (CDP) opens up a realm of possibilities for automation testers. By enabling direct interaction with the browser’s low-level protocols, CDP allows for comprehensive network and performance monitoring, console log access, and advanced debugging.

Imagine needing to test how your application performs under different network conditions. With CDP, you can simulate varying network speeds and analyze how your application handles slow or unreliable connections. This capability ensures that your web application is resilient and performs optimally for users with diverse network conditions

Other powerful features enabled by CDP include:

1. Emulating Network Conditions: Simulate offline mode, slow network, and other conditions to test application resilience
2. Access to Console Logs: Capture and analyze console logs directly, facilitating easier debugging and validation of JavaScript errors
3. Performance Metrics: Gather detailed performance metrics to identify bottlenecks and optimize loading times
4. Security Testing: Monitor and manipulate cookies, track security issues like mixed content, and validate HTTPS configurations

Sample code to enable network interception:

public class ChromeDevToolsExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        
        ChromeOptions options = new ChromeOptions();
        ChromeDriver driver = new ChromeDriver(options);
        
        DevTools devTools = driver.getDevTools();
        devTools.createSession();
        
        // Enable Network
        devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
        
        // Add a listener for network requests
        devTools.addListener(Network.requestWillBeSent(), request -> {
            System.out.println("Request URL: " + request.getRequest().getUrl());
        });
        
        driver.get("https://www.example.com");
        
        driver.quit();
    }
}

In this example, we enable network interception to capture all network requests made by the browser. This is particularly useful for validating that the correct network requests are being made and for debugging issues related to resource loading.

BiDi APIs: Real-Time Interaction for Agile Testing

The Bidirectional (BiDi) APIs introduce a two-way communication channel between the client and the browser, allowing for real-time interaction and more responsive test automation. This feature is pivotal for handling asynchronous operations and ensuring dynamic, real-time updates.

Consider a scenario where you need to verify changes on a webpage that occur after a certain user action, such as clicking a button or filling out a form. Using BiDi APIs, you can send commands and immediately evaluate the results without waiting for a full page reload, making your tests faster and more efficient.

Other significant features of BiDi APIs include:

1. Live DOM Manipulation: Directly interact with and manipulate the DOM in real-time, facilitating advanced testing scenarios.
2. Asynchronous Event Handling: Handle events such as network requests or DOM updates asynchronously, improving test reliability.
3. Real-Time Feedback: Receive immediate feedback on browser actions, enhancing the agility of the testing process.
4. Session Management: More effectively manage browser sessions, improving control over testing environments.

Sample code of Bidi Implementation:

public class BiDiExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        
        ChromeOptions options = new ChromeOptions();
        ChromeDriver driver = new ChromeDriver(options);
        
        DevTools devTools = driver.getDevTools();
        devTools.createSession();
        
        // Evaluate JavaScript expression using BiDi API
        Runtime.EvaluateParameters params = new Runtime.EvaluateParameters("document.title");
        String result = devTools.send(Runtime.evaluate(params)).getResult().getValue().toString();
        
        System.out.println("Page Title: " + result);
        
        driver.quit();
    }
}

Here, we use the BiDi API to evaluate a JavaScript expression that retrieves the document title. This allows us to perform real-time validation of the page’s state immediately after a user action or event.

Sample code for Live DOM Manipulation:

public class LiveDOMManipulation {
    public static void main(String[] args) {
        ChromeOptions options = new ChromeOptions();
        WebDriver driver = new ChromeDriver(options);
        DevTools devTools = ((ChromeDriver) driver).getDevTools();
        devTools.createSession();

        driver.get("https://example.com");

        WebElement element = driver.findElement(By.id("elementId"));

        // Enable the DOM domain
        devTools.send(DOM.enable());

        // Get the node ID
        int nodeId = devTools.send(DOM.getDocument()).getRoot().getNodeId();
        
        // Set the background color using CDP
        devTools.send(DOM.setAttributeValue(nodeId, "style", "background-color: yellow;"));

        // Add a new element to the DOM
        String script = "let newElement = document.createElement('div'); newElement.innerHTML = 'Hello, World!'; document.body.appendChild(newElement);";
        ((ChromeDriver) driver).executeScript(script);

        driver.quit();
    }
}

Code for capturing network activity:

public class NetworkActivity {
    public static void main(String[] args) {
        // Set up ChromeDriver and DevTools
        ChromeOptions options = new ChromeOptions();
        WebDriver driver = new ChromeDriver(options);
        DevTools devTools = ((ChromeDriver) driver).getDevTools();
        devTools.createSession();

        // Enable network tracking
        devTools.send(Network.enable());

        // Add listeners for request and response
        devTools.addListener(Network.requestWillBeSent(), request -> {
            Request req = request.getRequest();
            System.out.println("Request URL: " + req.getUrl());
            System.out.println("Request Method: " + req.getMethod());
        });

        devTools.addListener(Network.responseReceived(), response -> {
            Response res = response.getResponse();
            System.out.println("Response URL: " + res.getUrl());
            System.out.println("Response Status: " + res.getStatus());
        });

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

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

Capturing performance metrics

public class PerformanceMetricsOverTime {
    public static void main(String[] args) {
        // Set up ChromeDriver and DevTools
        ChromeOptions options = new ChromeOptions();
        WebDriver driver = new ChromeDriver(options);
        DevTools devTools = ((ChromeDriver) driver).getDevTools();
        devTools.createSession();

        // Enable performance monitoring
        devTools.send(Performance.enable());

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

        // Timer to capture performance metrics every 5 seconds
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                List<Metric> metrics = devTools.send(Performance.getMetrics());
                System.out.println("Captured Performance Metrics:");
                for (Metric metric : metrics) {
                    System.out.println(metric.getName() + ": " + metric.getValue());
                }
                System.out.println();
            }
        }, 0, 5000);  // initial delay 0ms, repeat every 5000ms (5 seconds)

        // Run the test for a specific period (e.g., 1 minute) and then stop
        try {
            Thread.sleep(60000);  // run for 60 seconds
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        // Stop the timer and close the browser
        timer.cancel();
        driver.quit();
    }
}

Adoption of Selenium 4’s new features translates into several strategic benefits:

1. Enhanced Test Accuracy: The deep integration with Chrome DevTools ensures more precise and reliable testing, reducing the margin for error.
2. Improved Performance Monitoring: Managers can now oversee detailed performance metrics, enabling proactive identification and resolution of bottlenecks.
3. Agile Testing Environment: The BiDi APIs support real-time feedback and dynamic interaction, fostering an agile and adaptive testing framework.