Today, we will discuss How to highlight element using selenium webdriver. Here we are using JavascriptExecutor interface to achieve highlight effect using CSS design. In UFT automation application there is an inbuilt highlight method , but in selenium there is no such type of highlight effect by default, so we have designed few lines of code to provide highlight effect.
Few more customized Highlight Method :
Example -1 :
Display yellow background and border highlight with red color.
Output :
Example -2 :
Display only border highlight only using Red color :
Output:
Hope this will help you....
Why do we highlight an Element in selenium ?
The main purpose of highlighting an element in selenium is to keep track of execution flow of each step one by one. Based on that we can get the execution break down easily and in case of any exception we will easily keep track of it.
Code snippet to perform highlight effect in selenium :
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style','background: yellow; border: 2px solid red;');", element);
Highlight Elements:
Lets see the complete example to perform highlight animation effect using JavascriptExecutor interface. Here we have created own function for reusing purpose.
SeleniumDemo.java
package demoPackage;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumDemo {
public static WebDriver driver;
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("Launching the chrome driver ");
// Set the chrome driver exe file path
System.setProperty("webdriver.chrome.driver","E:\\selenium_sumit\\chromedriver_win32_2.33\\chromedriver.exe");
// Instantiate the chrome driver
driver = new ChromeDriver();
// set the browser URL in get() to load the webpage
driver.get("http://wayplus.url.ph");
WebElement username = driver.findElement(By.id("login_Email_username"));
highLightElement(username); // Highlight username field
username.sendKeys("skptricks");
WebElement password = driver.findElement(By.id("login_Password"));
highLightElement(password); // Highlight password field
password.sendKeys("skptricks");
WebElement loginButton = driver.findElement(By.className("button"));
highLightElement(loginButton); // Highlight loginbutton field
loginButton.click();
}
public static void highLightElement(WebElement element){
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style','background: yellow; border: 2px solid red;');", element);
}
}
This is all about highlighting an element in selenium. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Few more customized Highlight Method :
Example -1 :
Display yellow background and border highlight with red color.
public static void highLightElement(WebElement element) {
try {
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('style','background: yellow; border: 2px solid red;');", element);
Thread.sleep(1000);
js.executeScript("arguments[0].style.border=''", element, "");
Thread.sleep(1000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
Output :
Example -2 :
Display only border highlight only using Red color :
public static void highLightElement(WebElement element) {
try {
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('style','border: 2px solid red;');", element);
Thread.sleep(1000);
js.executeScript("arguments[0].style.border=''", element, "");
Thread.sleep(1000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
Output:
Hope this will help you....
