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"]
selenium.highlight("id=gbqfba");
[/sourcecode]
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, "");
}
}
[/sourcecode]
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
good catch.
Thank you.
hi It’s a nice post.
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.
Yes will do. Really an useful post for a Web Driver limitation as of now.
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.
Sure manoj, thanks for sharing this concept. It’s really helping me now
. I look forward to hear about IE browser from you 
.
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