Saturday, March 3, 2018

How to highlight an Element in Selenium WebDriver

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.
How to highlight element using selenium webdriver,Highlight Elements, Highlight elements with Selenium WebDriver

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


1 comment:

  1. Hi Brother : Thank you for this lovely information. I'm using cucumber capybara and selenium (ruby)

    Do you have this code in ruby?

    Thanks
    Godwin

    ReplyDelete