Post
Ask Question

How To Highlight Web Elements Using JavascriptExecutor In Selenium WebDriver

In this article, will discuss highlighting web elements using Javascript.
 
In my last article I have explained about JavascriptExecutor and covered the below points,
 As I have mentioned in my above article, JavascriptExecutor is used for performing javascript operations in a web browser from selenium webdriver.
 
Selenium webdriver doesn't provide any methods to highlight the web elements in the browser. Due to this reason here we have to take the help of javascript to highlight the web elements in the browser.
 
We can highlight the element in three modes, those are,
  1. Draw a border for the web element
  2. Change the background color of the web element
  3. Draw a border for the web element + Change the background color of the web element
Note
Here you can find the element using either javascript or selenium webdriver, anyways I'm going to show both ways
 
Here I'm using the Facebook login page for reference, please find the link below.
https://www.facebook.com/
 

Draw a border for the web element

 
In HTML, border and background are available under the style attribute. So in order to access the style attributes, we need to use the below syntaxes.
 
Case 1
 
Finding an element using Javascript and highlighting it.
  1. String javascript = "document.getElementById('email').style.border='2px solid red'";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  
Case 2
 
Finding an element using the selenium webdriver and highlighting it.
  1. WebElement emailTxt = driver.findElement(By.id("email"));  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript("arguments[0].style.border='2px solid red'", emailTxt);     
 

Change the background color of the web element

 
As I mentioned in the above scenario, border and background are available under the style attribute.
 
Case 1
 
Finding an element using Javascript and highlighting it.
  1. String javascript = "document.getElementById('email').style.background='yellow'";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  
Case 2
 
Finding an element using the selenium webdriver and highlighting it.
  1. WebElement emailTxt = driver.findElement(By.id("email"));  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript("arguments[0].style.background='yellow'", emailTxt);  
 

Draw a border for the web element + Change the background color of the web element

 
In the above two scenarios, we have performed the highlight operation separately like drawing the border separately and changing the background separately.
 
In this scenario, we will combine them and highlight the element. So to perform both operations combined we are going to write a different syntax, please find the below syntax.
 
Case 1
 
Finding an element using Javascript and highlighting it.
  1. String javascript = "document.getElementById('email').setAttribute('style', 'border:2px solid red; background:yellow')";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  
Case 2
 
Finding an element using the selenium webdriver and highlighting it.
  1. WebElement emailTxt = driver.findElement(By.id("email"));  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript("arguments[0].setAttribute('style', 'border:2px solid red; background:yellow')", emailTxt);  
 
So this is how we perform the highlight operation using JavascriptExecutor in selenium webdriver.
 
If you are interested in watching this full information explained in a video, please watch this video
 
I hope you find this article useful. Please provide your valuable feedback, questions, or comments about this article. 


Similar Articles