How To Highlight Element Using Selenium WebDriver

Let’s see how to highlight element using Selenium WebDriver in this post. We need to write a few lines of code to highlight element using Selenium WebDriver. If you have an idea on QTP, you would remember the highlight method in QTP which is an inbuilt feature. Coming to selenium we need to get the help of JavascriptExecutor interface to achieve this.

Earlier I have posted a detailed post on JavascriptExecutor in Selenium. Check the below link for the same.

JavascriptExecutor in Selenium WebDriver

package softwareTestingMaterial;

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;
import org.testng.annotations.Test;

public class Highlight {

@Test
	public void highlightElement() {
	System.setProperty("webdriver.gecko.driver", "D:\\Selenium Environment\\Drivers\\geckodriver.exe");
        //Instantiating driver object
	WebDriver driver = new FirefoxDriver();
        //To launch gmail.com
	driver.get("https://www.gmail.com");
        //Collects the webelement
	WebElement ele = driver.findElement(By.xpath("//*[@id='Email']"));
        //Create object of a JavascriptExecutor interface
	JavascriptExecutor js = (JavascriptExecutor) driver;
        //use executeScript() method and pass the arguments 
        //Here i pass values based on css style. Yellow background color with solid red color border. 
	js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", ele);
	}
}

Let’s make the above code as a function. So whenever we want to highlight particular element, we could use this method to achieve our goal.

package softwareTestingMaterial;

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;
import org.testng.annotations.Test;

public class HighlighterClass {
	
	@Test
	public void highlighterElement() {
		
		System.setProperty("webdriver.gecko.driver", "D:\\Selenium Environment\\Drivers\\geckodriver.exe");
		WebDriver driver = new FirefoxDriver();
		driver.manage().window().maximize();
		driver.get("https://www.gmail.com");
		WebElement ele = driver.findElement(By.xpath("//*[@id='Email']"));
                //Call the highlighterMethod and pass webdriver and WebElement which you want to highlight as arguments.
		highLighterMethod(driver,ele);
		ele.sendKeys("SoftwareTestingMaterial.com");
	}
	
        //Creating a custom function
	public void highLighterMethod(WebDriver driver, WebElement element){
		JavascriptExecutor js = (JavascriptExecutor) driver;
		js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
	}
}

If you are not regular reader of my blog then I highly recommend you to signup for the free email newsletter using the below link.