Highlight Web Element 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.

Scenario:

  1. Open Application: http://newtours.demoaut.com/
  2. Highlight User Name and Password Field in Red.

Java Code:

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://newtours.demoaut.com/");
		//Maximize the browser
		driver.manage().window().maximize();
		//Find the element to highlight
		WebElement userName = driver.findElement(By.xpath("//*[@name='userName']"));
		WebElement password = driver.findElement(By.xpath("//*[@name='password']"));
		//Creating JavaScriptExecuter Interface
		JavascriptExecutor js = (JavascriptExecutor) driver;
		js.executeScript("arguments[0].style.border='4px solid red'", userName);
		js.executeScript("arguments[0].style.border='4px solid red'", password);
	}
}

 

Leave a Reply

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