HighLight Web Element During Execution

During Execution we need to highlight the web element for debugging or to check, that we find the right element of the web page.In QTP we can do this using Active Window if the object is stored into the Object Repository.

So, now question is how to implement this in Selenium WebDriver?

We can achieve this using java script executor,

js.executeScript("arguments[0].style.border='3px solid red'", element);

                                                                  OR
 
js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "color: Red; border: 2px solid red;");

We can use any of them to set set the red solid border around the element.


The Complete code is given below:

package highlight;

import java.io.File;
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;
import org.openqa.selenium.chrome.ChromeDriverService;

public class HighLight {

    /**
     * @param args
     * @throws InterruptedException
     */
    public static void main(String[] args) throws InterruptedException {     
      //#####################################################
      //Here We SetUp The Chrome Driver With Any Free Port
      //And We Also Set The Chrome Driver Path
      //#####################################################
  ChromeDriverService service=new ChromeDriverService.Builder()
            .usingChromeDriverExecutable(new File("./chromedriver_win32_2.1/chromedriver.exe"))
            .usingAnyFreePort().build();
        WebDriver driver=new ChromeDriver(service);
        driver.get("http://www.google.com");
        findElement(driver,By.name("q"));
       
    }


      //#####################################################
      //Below Two Methods Do The Same Thing But They Use 
      //Different Java Script.
      //#####################################################

      //#####################################################
      //Method 1
      //#####################################################  
     public static WebElement findElement(By by,WebDriver driver) throws InterruptedException {
        WebElement element = driver.findElement(by);
      
        // draw a border around the found element
        if (driver instanceof JavascriptExecutor) {
            JavascriptExecutor js = (JavascriptExecutor) driver;
            js.executeScript("arguments[0].style.border='3px solid red'", element);
            Thread.sleep(1000);
            js.executeScript("arguments[0].style.border=''",element, "");
            Thread.sleep(1000);
        }
        return element;
    }

      //#####################################################
      //Method 2
      //#####################################################  
    public static WebElement findElement(WebDriver driver, By by) throws InterruptedException {
        WebElement element = driver.findElement(by);
        
         // draw a border around the found element
           if (driver instanceof JavascriptExecutor) {
                JavascriptExecutor js = (JavascriptExecutor) driver;
                js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "color: Red; border: 2px solid red;");
                Thread.sleep(1000);
                js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "");
                Thread.sleep(1000);
            }
        return element;
    }
}