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.
[sourcecode language=”java”]

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

[sourcecode language=”java”]
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 thoughts on “Highlight WebElements using Selenium WebDriver

    • 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.

  1. 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.

      • 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.

  2. 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 Comment