How to Highlight an Element in Selenium?

In Selenium WebDriver, visual feedback during test execution is crucial for debugging and validation.

Highlighting an element in Selenium is used during test automation to visually emphasize a specific web element on the browser screen. It helps debug and verify if the correct element is being interacted with by the script.The implementation typically involves executing JavaScript code within the browser context using Selenium’s execute_script() method to modify the element’s style attributes.

This guide delves in detail about the methods to highlight an element in Selenium, best practices and more.

What is Highlighting an Element in Selenium WebDriver?

Highlighting an element in Selenium WebDriver involves visually emphasizing a specific web element during test execution. This is typically achieved by altering the element’s appearance, such as adding a border or changing its background color.

Why Highlight Elements in Selenium WebDriver?

While Selenium automates interactions, visual confirmation remains crucial. Highlighting elements that address this need and offer several tangible benefits during test execution and debugging.

• Enhanced Debugging: Visual cues assist in identifying the element being processed, simplifying debugging.
• Improved Test Visualization: Highlighting provides clear feedback, making it easier to understand test flow.
• Verification of Element Interaction: It confirms that Selenium commands are targeting the correct element.
• Presentation and Demonstration: Highlighted elements can be useful for demonstrating test execution to stakeholders.

How does Highlighting Elements in Selenium WebDriver work?

Highlighting elements in Selenium WebDriver is a technique used to visually indicate a web element during test execution typically for debugging, demonstrations, or reporting. However Selenium itself doesn’t have a built-in function to highlight elements, but you can achieve it using JavaScript execution, CSS Modifications or Flashing Effects.

Selenium locates the element using a standard locator strategy (for example By.id, By.cssSelector). Then, JavaScript is injected to modify the element’s style temporarily usually by adding a colored border.

Talk to an Expert

Methods to Highlight an Element in Selenium WebDriver

Several techniques can be employed to highlight elements. Below are the most effective methods, along with detailed explanations and output examples.

1. Using JavaScript Executor

• The JavaScript Executor in Selenium allows direct manipulation of an element’s style attributes.
• This is one of the most commonly used methods for highlighting elements.

Code:

import org.openqa.selenium.By;

import org.openqa.selenium.JavascriptExecutor;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

public class HighlightElement {




    public static void highlightElement(WebDriver driver, WebElement element) {

        // Cast the WebDriver to JavascriptExecutor to execute JavaScript

        JavascriptExecutor js = (JavascriptExecutor) driver;

        

        // Execute JavaScript to change the border of the element to red

        js.executeScript("arguments[0].style.border='3px solid red'", element);

    }




    public static void main(String[] args) {

      

        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver"); // Update this path




        WebDriver driver = new ChromeDriver();        // Create a new instance of the Chrome driver

        

        try {

            driver.get("https://bstackdemo.com");            // Navigate to the specified URL




            // Find the "Sign In" button using its ID

            WebElement signInButton = driver.findElement(By.id("signin"));




            // Highlight the "Sign In" button

            highlightElement(driver, signInButton);

            

            // Wait for 2 seconds to see the highlighted element

            Thread.sleep(2000);

        } catch (InterruptedException e) {

            // Handle the exception if the thread is interrupted

            System.err.println("Thread was interrupted: " + e.getMessage());

        } catch (Exception e) {

            // Handle any other exceptions that may occur

            System.err.println("An error occurred: " + e.getMessage());

        } finally {

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

        }

    }

}

Output:

Explanation:

When you run the code,

1. It imports the necessary Selenium classes and defines the HighlightElement class, which contains methods for highlighting web elements.
2. The JavascriptExecutor is used to execute JavaScript code that modifies the appearance of the web elements.
3. In the main method, the path to the ChromeDriver is set, and a new instance of ChromeDriver is created to control the Chrome browser.
4. The browser navigates to https://bstackdemo.com, where the “Sign In” button is located using its ID (“signin”).
5. The highlightElement() method is called to highlight the button by changing its border color to red.
6. The program waits for 2 seconds to display the highlight.
7. Finally, the browser will be closed automatically.

2. CSS Modifications

• CSS modifications allow elements to be highlighted by dynamically changing their styles.
• This method is effective for temporary UI changes during tests.

Code:

import org.openqa.selenium.By;

import org.openqa.selenium.JavascriptExecutor;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;




public class HighlightElementCSS {




    public static void highlightElementCSS(WebDriver driver, WebElement element) {

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Set the background color to yellow and the border to red

        js.executeScript("arguments[0].style.backgroundColor = 'yellow'; arguments[0].style.border = '3px solid red';", element);

    }




    public static void main(String[] args) {

        // Set the path to the ChromeDriver executable

        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver"); // Update this path




        // Create a new instance of the Chrome driver

        WebDriver driver = new ChromeDriver();

        

        // Navigate to the specified URL

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

        

        // Find the "Sign In" button using its ID

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

        

        // Highlight the element

        highlightElementCSS(driver, element);




        // Wait for 2 seconds to see the highlighted element

        try {

            Thread.sleep(2000);

        } catch (InterruptedException e) {

            e.printStackTrace();

        }




        // Close the browser

        driver.quit();

    }

}

Output:

Explanation:

When you run the code,

1. It Imports Selenium classes and defines the HighlightElementCSS class to highlight web elements using CSS.
2. Uses JavascriptExecutor to modify the CSS properties of the specified web element.
3. In the main method, the path to the ChromeDriver is set, and a new instance of ChromeDriver is created to control the Chrome browser.
4. The browser navigates to https://bstackdemo.com, where the “Sign In” button is located using its ID (“signin“).
5. The highlightElementCSS() method is called to highlight the button by changing its background color to yellow and adding a red border.
6. The program waits for 2 seconds to display the highlight and then closes the browser automatically.

3. Flashing Effect

• A flashing effect can be created by repeatedly changing the element’s border or background color.
• This method is particularly useful for debugging and making elements stand out during test execution.

Code:

import org.openqa.selenium.By;

import org.openqa.selenium.JavascriptExecutor;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;




public class FlashElement {

    // Method to flash a web element by changing its background color

    public static void flash(WebDriver driver, WebElement element) {

        JavascriptExecutor js = (JavascriptExecutor) driver;

        String originalColor = element.getCssValue("backgroundColor");

        for (int i = 0; i < 5; i++) {

            js.executeScript("arguments[0].style.backgroundColor = 'red'", element);

            try { Thread.sleep(200); } catch (InterruptedException e) {}

            js.executeScript("arguments[0].style.backgroundColor = '" + originalColor + "'", element);

            try { Thread.sleep(200); } catch (InterruptedException e) {}

        }

    }




    public static void main(String[] args) {

        // Set the path to the ChromeDriver executable

        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver"); // Update this path




        WebDriver driver = new ChromeDriver();        // Create a new instance of the Chrome driver

        

        driver.get("https://bstackdemo.com");        // Navigate to the specified URL

        

        // Find the "Sign In" button using its ID

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

        

        flash(driver, element);        // Flash the element




        // Wait for a few seconds to see the flashing effect

        try {

            Thread.sleep(2000);

        } catch (InterruptedException e) {

            e.printStackTrace();

        }




        driver.quit();        // Close the browser

    }

}

Output:

Explanation:

When you run the code,

1. It Imports Selenium classes and defines the FlashElement class to highlight web elements using CSS.
2. The flash method uses JavascriptExecutor to modify the background color of the specified web element.
3. In the main method, the path to the ChromeDriver is set, and a new instance of ChromeDriver is created to control the Chrome browser.
4. The browser navigates to https://bstackdemo.com, where the “Sign In” button is located using its ID (“signin”).
5. The flash() method is called to create a flashing effect on the button by alternating its background color between red and its original color.
6. The program waits for 2 seconds to display the highlight and then closes the browser automatically.

Best Practices for Highlighting Elements in Selenium

Effective highlighting contributes to test maintainability and reduces debugging overhead. The following guidelines ensure consistent and practical application of highlighting techniques.

• Use highlighting selectively to avoid visual clutter.
• Implement reusable highlighting methods for consistency.
• Consider the impact of highlighting on test performance.
• Ensure that highlighting does not interfere with element interaction.

Why execute Selenium tests on Real Devices?

Executing Selenium tests on real devices offers significant advantages over emulators or simulators.

• Accurate Representation of User Experience: Real devices replicate actual user interactions, ensuring tests reflect real-world scenarios.
• Browser and OS Compatibility: Tests on real devices validate compatibility across various browser versions and operating systems.
• Hardware-Specific Issues Detection: Real devices expose hardware-specific issues, such as rendering differences or performance limitations.
• Network Simulation: Real devices allow for testing under varying network conditions, which is crucial for mobile testing.
• Device-Specific Feature Testing: Real devices enable the testing of device-specific features like camera access, geolocation, and touch interactions.
• Elimination of Emulator/Simulator Limitations: Emulators and simulators cannot fully replicate real device behavior, leading to potential discrepancies.

BrowserStack Automate provides a cloud-based platform for running Selenium tests on a vast range of real devices and browsers for accurate test results. This eliminates the need to maintain an extensive in-house testing infrastructure and provides comprehensive test coverage and faster feedback cycles.

Additionally BrowserStack Automate also provides parallel test execution. It helps accelerate release cycles and scale effortlessly. BrowserStack Automate also integrates smoothly with popular CI/CD tools like Jenkins, GitHub Actions, and Azure DevOps. It also offers detailed logs, screenshots, and video recordings to simplify debugging and issue resolution.

Try BrowserStack Automate

Conclusion

Highlighting elements in Selenium enhances test clarity and simplifies debugging. Employing JavaScript Executor or CSS modifications allows for effective visual feedback. For accurate and reliable Selenium testing across real devices and browsers, consider comprehensive testing tool like BrowserStack Automate.