Highlight WebElements using Selenium WebDriver

Highlighting elements using WebDriver

The Native application, desktop based automation tools will have the native movements and we will visually see where the tool clicks and on which element it is focused and so on.. With selenium there is no any Native movements hence its mystery for a selenium user to recognize where the selenium clicks or to know currently on which elements its being executed. In such cases the highlight command was really rescuing that problem.

In selenium 1.0 we had the highlight API to do this job for us.

Briefly changes the backgroundColor of the specified element yellow. Useful for debugging.


There is no any direct API available in WebDriver to perform this operation, which makes the WebDriver users feel disappointed. But, we can achieve this using the JavaScript Executor. Below code will achieve highlighting elements during WebDriver execution

public void highlightElement(WebDriver driver, WebElement element) {
    for (int i = 0; i < 2; i++) {
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("arguments[0].setAttribute('style', arguments[1]);",
                element, "color: yellow; border: 2px solid yellow;");
        js.executeScript("arguments[0].setAttribute('style', arguments[1]);",
                element, "");

The above code snippet will help us to highlight an element. You can wrap this method in all other functions in your framework, shortly called the “DSL

12 Responses to “Highlight WebElements using Selenium WebDriver”
  1. mosses says:

    hi It’s a nice post.

  2. Isn’t this js inclusion bring the performance of test script down by any means? I am really worried about the execution time after including this snippet in my web driver script.

    • We go for Js only if anything that WebDriver itself cannot do it. In that case Js comes to rescue. (a workaround or its an optional solution)
      Yes inclusion of Js will slow down a bit, but not drastically. I use this and dont see any much slow down of test.
      If you really worry about this, include a java code snippet to calculate the time difference of execution of 1 script with Js and without Js.

  3. vikas says:

    Hi, this code is working fine in Firefox and chrome. But in IE browser, after highlighting the element it is not dehighlighting again for that WebElement. Please let me know how to handle it for IE browser

    • hi Vikas,
      Do you see the de-highlighting doesn’t happen all the time ? or only few instances and let me know your browser version and selenium version. I haven’t worked on IE lately yet. I will check and let know you know the findings.

      • vikas says:

        My browser version is IE8, i am using selenium 2.28.0 jars. yes for every field in my script de-highlighting is not happening, this behavior is happening all the time.

      • Fine Vikas, I will take a look. I am using a Mac system and IE is not in it. Hence please wait for a while.

        But I am sure its some JavaScript problem as IE browser implementation is different when compared to other Js Engines. Anyways i will take a look. Thanks for reporting it.

  4. vikas says:

    Sure manoj, thanks for sharing this concept. It’s really helping me now :). I look forward to hear about IE browser from you :).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: