JavaScript Executor - To HighLight Element

In Automation, testing sometimes element highlighter plays very important role. It helps us to track our execution flow which step is being processed. Some tools like QTP, Sahi etc. you will get this inbuilt feature. For Selenium, we have to write small code, which simply highlight element based on our parameter values. let’s get started and see Highlight element Selenium using CSS values.

	package com.misc;
	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 HighlisghElement {
	public static void main(String[] args) {
	// TODO Auto-generated method stub
	WebDriver driver=new FirefoxDriver();
	driver.manage().window().maximize();
	driver.get("http://admin-demo.nopcommerce.com/login");
	// Inspect element
	WebElement username= driver.findElement(By.xpath("//input[@class='email']"));
	// Call reuse method
	highLightElement(driver,username);
	username.sendKeys("admin@yourstore.com");
	// Inspect element
	WebElement pwd= driver.findElement(By.xpath("//input[@class='password']"));
	// Call reuse method
	highLightElement(driver,pwd);
	pwd.sendKeys("admin");
	}
	// Element highlighter code
	public static void highLightElement(WebDriver driver, WebElement element)
	{
	JavascriptExecutor js=(JavascriptExecutor)driver;
	js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
	}
	}

view raw JShighlightelement.java hosted with ❤ by GitHub