How to implement Highlight in Selenium WebDriver? – User friendly Tech help

Highlight is the most prominent feature used in Object Spy in UFT/QTP. But the question comes into our mind can we have the same facility in Selenium also?.
n
nAnswer is YES!!
n

n

n

n

n

n

n

n

n

I want to highlight object in selenium

n

Why we use Highlight?
nHighlight plays crucial role in  debugging of  test script. One way to know steps being performed in browser is to highlight the web page elements.
n
nHow is it possible?
n
nCore principle is to use “JavaScriptExecutor” to inject javascript into our application, which will change the CSS properties of the element at runtime and we can pinpoint(visible see) the element with changed set of properties.
n
nExample:- We can simply change the  the backgroundColor/border of the specified element yellow.(Like we see on clicking Find button in Selenium IDE).
n
nNote:-
n
In Selenium RC we had a dedicated command for the same.
nSyntax:-

nselenium.highlight(“element Locator”); element locator = id,css,xpath..
n
nCode:-
n
n

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.border='2px groove green'", element);

n

n                                                                  OR
n

n

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "color: Red; border: 2px dotted solid green;");
js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "");

n

nExplanation:-
n
nDon’t be afraid from the messy code, lets try to understand it ,
nArguments[0].style.border:– this script is injecting the CSS style tag into the element , and making its border settings with a 2px wide green line with groove look.
nElement :- This is the element around which border will be drawn.
n
nWe can also try the following code also :-

n

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('test').style.border='2px groove green';"); 

n

Working Demo:-

n

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class HighLightMe {
 public static void main(String[] args) throws InterruptedException {
 WebDriver driver = new FirefoxDriver();
 //Open Application
 driver.navigate().to("http://www.uftHelp.com");
 //Maximize the browser
 driver.manage().window().maximize();
 //Find the element to highlight
 WebElement element = driver.findElement(By.xpath("//a[contains(text(),'Home')]"));
 //Function call to Highlight the element
 fnHighlightMe(driver,element); 
 }
 public static void fnHighlightMe(WebDriver driver,WebElement element) throws InterruptedException{
 //Creating JavaScriptExecuter Interface
 JavascriptExecutor js = (JavascriptExecutor)driver;
 for (int iCnt = 0; iCnt < 3; iCnt++) {
 //Execute javascript
 js.executeScript("arguments[0].style.border='4px groove green'", element);
 Thread.sleep(1000);
 js.executeScript("arguments[0].style.border=''", element);
 }
 } 
}

n

n
nLearn More