How to highlight elements in WebDriver during runtime

How to highlight elements in WebDriver during runtime

In web automation-testing, element highlighter plays a very important role. It helps to track the exact step to be performed.  UFT/QTP like testing tool is capable to highlight an element in run time because you will get this feature inbuilt with this tool. In Selenium there is no such feature available so we need to write our own code to highlight element.

  
Highlighting element is also useful for debugging the code.One way to know steps being performed in the browser is to highlight the web page elements.

The core to use "JavaScriptExecutor" to inject javascript in your application and change the CSS for the element, like create a border for the element. 

Sample code 
 JavascriptExecutor js=(JavascriptExecutor)driver;   
 js.executeScript("arguments[0].style.border='4px groove red'", Element);  

Explanation  

Arguments[0].style.border:- this script is injecting the CSS style tag into the element and making its border settings with a 4px wide red line with groove look.

Element: - This is the element around which border will be drawn.

I am creating a method which could be reusable for highlighting the test element. 

Element Highlight method 


 public void HighlightElement(WebDriver driver, WebElement elm){  
           try{  
                JavascriptExecutor js=(JavascriptExecutor)driver;   
                js.executeScript("arguments[0].style.border='4px groove red'", elm);  
          Thread.sleep(1000);  
          js.executeScript("arguments[0].style.border=''", elm);  
           }catch(Exception e){  
                System.out.println(e);  
           }  
      }px groove red'", email);  


Video



Complete code


 package com.selenium.sampleseleniumproject;  
 import org.testng.annotations.Test;  
 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 AppTest3 {  
      protected WebDriver driver;  
      @Test  
      public void Highlight() throws InterruptedException {  
           System.setProperty("webdriver.chrome.driver",  
                     "C:\\Users\\anjan\\Desktop\\cucmber\\chromedriver\\chromedriver.exe");  
           driver = new ChromeDriver();  
           driver.get("http://www.faceboo.com");  
           driver.manage().window().maximize();  
           WebElement email = driver.findElement(By.xpath("//*[@id='email']"));  
           WebElement pass = driver.findElement(By.xpath("//*[@id='pass']"));  
           HighlightElement(driver, email);  
           email.sendKeys("[email protected]");  
           HighlightElement(driver, pass);  
           pass.sendKeys("password");  
           // close browser  
           driver.close();  
      }  
      public void HighlightElement(WebDriver driver, WebElement elm) {  
           try {  
                JavascriptExecutor js = (JavascriptExecutor) driver;  
                js.executeScript("arguments[0].style.border='4px groove red'", elm);  
                Thread.sleep(1000);  
                js.executeScript("arguments[0].style.border=''", elm);  
           } catch (Exception e) {  
                System.out.println(e);  
           }  
      }  
 }  

Share this

Related Posts

Previous
Next Post »

5 comments

comments
January 18, 2018 at 2:10 AM delete

Java & Selenium : File download automation not working in headless mode with ChromeDriver solution needed ASAP

Reply
avatar
April 25, 2018 at 11:49 PM delete

Everyone wants to get unique place in the IT industry’s for that you need to upgrade your skills, your blog helps me improvise my skill set to get good career, keep sharing your thoughts with us.

software testing course in chennai

Reply
avatar
July 13, 2018 at 10:36 PM delete

Wonderful post!!Thank you for sharing this info with us.
Keep updating I would like to know more updates on this topic
Very useful content, I would like to suggest this blog to my friends.

selenium course

Selenium Course in Chennai

Reply
avatar
November 18, 2018 at 9:46 PM delete

This concept is a good way to enhance the knowledge.thanks for sharing. please keep it up selenium Online Training Hyderabad

Reply
avatar