Highlight WebElements using Selenium WebDriver
RSSS

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.

selenium.highlight("id=gbqfba");

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

18 thoughts on “Highlight WebElements using Selenium WebDriver

  1. December 20, 2012 at 10:15 pm

    good catch.

    1. December 31, 2012 at 11:52 pm

      Thank you.

  2. mosses
    January 9, 2013 at 1:26 am

    hi It’s a nice post.

  3. January 13, 2013 at 1:05 am

    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.

    1. January 13, 2013 at 11:54 am

      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. January 13, 2013 at 8:02 pm

        Yes will do. Really an useful post for a Web Driver limitation as of now.

  4. vikas
    February 13, 2013 at 11:49 am

    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

    1. February 13, 2013 at 2:17 pm

      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.

      1. vikas
        February 13, 2013 at 5:09 pm

        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.

        1. February 13, 2013 at 6:27 pm

          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. srikanth
          February 24, 2014 at 10:24 am

          Hi,

          I am also facing the same issue to de-highlight the element in IE

          Can you please let us know if you found the resolution for it

    2. Srinivas
      November 30, 2013 at 7:46 pm

      Hi Vikas,

      Can you just give an example code of ‘Highlight WebElements using Selenium WebDriver’ for loging gmail account in IE .

      thanks in advance,
      Regards
      Srinivas

  5. vikas
    February 13, 2013 at 6:52 pm

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

    1. February 13, 2013 at 7:37 pm

      thanks for your kind words. Sure i will help and will update you after trying them.
      If you feel the blog s really helpful pls publicize amongst your circle and get in more ppl.
      Like FB at: http://facebook.com/AssertSelenium :)

  6. Pravin
    December 4, 2013 at 5:06 am

    Hello admin,
    I am not able to see highlighted elements during execution, I have done all the procedure u mentioned, please give a solution to sort it out,
    I’m using TestNG framework, Webdriver 2.35.

  7. Kumar
    January 15, 2014 at 4:10 pm

    Hi Guys ,

    Can anyone explain me what is argument[0] and argument[1] here refer to and explain me

    Thanks in Advance
    Kumar.S

  8. NMaroju
    January 17, 2014 at 12:29 pm

    Could you plz anyone explain me what is argument[0] and argument[1] here refer to..

    Thanks in Advance.

  9. Thyagu
    June 16, 2014 at 4:12 pm

    It is possible to capture the screenshots while highlighting the element ???

    Thanks in Advance.

Leave a Reply

Your email address will not be published. Required fields are marked *