How to implement Highlight in Selenium WebDriver?

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

Answer is YES!!

Highlight selenium
I want to highlight object in selenium

Why we use Highlight?
Highlight plays crucial role in  debugging of  test script. One way to know steps being performed in browser is to highlight the web page elements.

How is it possible?

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

Example:- We can simply change the  the backgroundColor/border of the specified element yellow.(Like we see on clicking Find button in Selenium IDE).

Note:-

In Selenium RC we had a dedicated command for the same.
Syntax:-

selenium.highlight(“element Locator”); element locator = id,css,xpath..

Code:-

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


                                                                  OR

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, "");


Explanation:-

Don’t be afraid from the messy code, lets try to understand it ,
Arguments[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.
Element :- This is the element around which border will be drawn.

We can also try the following code also :-

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

Working Demo:-

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);
}
}

}



Learn More

ufthelp

5 thoughts on “How to implement Highlight in Selenium WebDriver?

  1. Is it possible to highlight particular text in an element
    for ex: When you gettext from element 'x' the text will be say "Frist name Last name" I want to highlight "Last Name" only.

  2. Can we use this for string for example:

    public static void highLightElement(WebDriver driver, String StringValue)

    Because i stored the xpath values in a varaible as string in other class and i called it …

Leave a Reply

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