How To Highlight Web Elements Using JavascriptExecutor In Selenium WebDriver

This article, will discuss highlighting web elements using Javascript.

In my last article, I have explained JavascriptExecutor and covered the below points,

• What Is a Javascript Executor In Selenium WebDriver?
• How to find elements in a webpage using javascript?
• How to enter Text into a Textbox using JavascriptExecutor in Selenium WebDriver?
• How to perform click operation using JavascriptExecutor in Selenium WebDriver?
• How to perform scroll operations using JavascriptExecutor in Selenium WebDriver?

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, borders,s, and backgrounds 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.

String javascript = "document.getElementById('email').style.border='2px solid red'";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript(javascript);

Case 2. Finding an element using the selenium webdriver and highlighting it.

WebElement emailTxt = driver.findElement(By.id("email"));
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
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.

String javascript = "document.getElementById('email').style.background='yellow'";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript(javascript);

Case 2. Finding an element using the selenium webdriver and highlighting it.

WebElement emailTxt = driver.findElement(By.id("email"));
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
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.

String javascript = "document.getElementById('email').setAttribute('style', 'border:2px solid red; background:yellow')";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript(javascript);

Case 2. Finding an element using the selenium webdriver and highlighting it.

WebElement emailTxt = driver.findElement(By.id("email"));
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
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.

I hope you find this article useful. Please provide your valuable feedback, questions, or comments about this article.