How to Highlight an element in selenium

In testing tools like QTP, Visual Studio test and Test Complete we try to highlight an element to check if the object exist. In Selenium this can be done via Selenium IDE, but there is no implicit implementation to highlight an object in selenium to highlight an element. But this can be done programmatically with the help of JavaScriptExecuter class (in C# it’s IJavaScriptExecutor) The idea is simple. We can pass a CSSText style as an argument by settings its color and border to ExecuteScript method of IJavaScriptExecutor instance variable. The ExecuteScript method will pass the instance variable and the element to highlight. The code snippet is shown below.

var javaScriptDriver = (IJavaScriptExecutor)driver;
string highlightJavascript = @"arguments[0].style.cssText = ""border-width: 3px; border-style: solid; border-color: green"";";
javaScriptDriver.ExecuteScript(highlightJavascript, new object[] { element });

As the above C# code snippet will highlight the “element” by green color border. IJavaScriptExecutor will inject a Javascript which we have written to the WebDriver and since webdriver has the handle of browser, the javascript will be executed. Thus the corresponding element will be highlighted in the page and will be handy while trying to see if the control you have recognized using its property is matching or not. Thanks, Karthik KK