How to highlight elements Selenium Webdriver using JavaScript
In Automation , testing sometimes element highlighter plays very important role. It helps us to track our execution flow which step is being processed. Some tools like QTP, Sahi etc. you will get this inbuilt feature. For Selenium, we have to write small code, which simply highlight element based on our parameter values. let’s get started and see Highlight element Selenium using CSS values.
In Selenium, we can use JavascriptExecutor (interface) to execute Javascript code into webdriver.
I have published video on the same which covers the same.
[フレーム]
In this post we, will execute Javascript which will highlight the element
Let’s implement the same this will highlight the user name field.
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Highlight {
public static void main(String []args){
WebDriver driver=new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://www.facebook.com");
// Create the JavascriptExecutor object
JavascriptExecutor js=(JavascriptExecutor)driver;
// find element using id attribute
WebElement username= driver.findElement(By.id("email"));
// call the executeScript method
js.executeScript("arguments[0].setAttribute('style,'border: solid 2px red'');", username);
}
}
In above program it, will highlight username field. Now we can not write every time the same code to highlight element so we will create reuse method and when we have to highlight element we will call the method.
Create highlight element method for reuse
public static void highLightElement(WebDriver driver, WebElement element)
{
JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
try
{
Thread.sleep(500);
}
catch (InterruptedException e) {
System.out.println(e.getMessage());
}
js.executeScript("arguments[0].setAttribute('style','border: solid 2px white');", element);
}
Complete program for Highlight element Selenium
package com.bog.htmldemo;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class aa {
public static void main(String []args){
WebDriver driver=new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://www.facebook.com");
// Inspect element
WebElement username= driver.findElement(By.id("email"));
// Call reuse method
highLightElement(driver,username);
}
// Element highlighter code
public static void highLightElement(WebDriver driver, WebElement element)
{
JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
try
{
Thread.sleep(1000);
}
catch (InterruptedException e) {
System.out.println(e.getMessage());
}
js.executeScript("arguments[0].setAttribute('style','border: solid 2px white');", element);
}
}
You can also create a separate library for this and can you in other programs as well.
Try from your side and let me know if you finding some issue.
Please share with others as well. Keep visiting. Have a nice day 🙂
Comments
Ganesh says
I didn’t get u, can you make video on this. SO that we can use it in utilities
Mukesh Otwani says
Sure Ganesh will do that
Trupti says
Hi in last few seconds of video you said customized method so we don’t have to call it again and again..So please can you share that?
Mukesh Otwani says
Hi Trupti,
You can add it into the utility method while calling driver.findElement for the required locator. This has to integrate into frameowrk.
Mouse says
The example you have above to highlight the username throws an exception when I tried it. I fixed the issue by changing it to:
js.executeScript(“arguments[0].setAttribute(‘style’,’border: solid 2px red’)”, element)
Mukesh Otwani says
Hi Mouse,
Thanks for bringing it up. I’ll make necessary changes into code fragment.
Ajay says
Hi Mukesh,
thanks.. its nice and quite handy!!
in the top windows, i guess one of the single quotes has got misplaced in the below line of code. the closing quote for ‘style’ is missing, and after ‘red’ there is an extra one.
js.executeScript(“arguments[0].setAttribute(‘style,’border: solid 2px red”);”, username);
Mukesh Otwani says
Hi Ajay,
Thanks for pointing out this. This will others too.
Sabbir says
Very handy code. Great work.
Mukesh Otwani says
Hi Sabbir,
Thanks for your comments.
Automation help says
In Highlight element Selenium video you mentioned about creating customize method for finding, highlighting Can you please ping me that code as in above case i have to call method for ever element in my frame work.
Mukesh Otwani says
Hi there,
Create a method which accepts can accept id or xpath or etc as arguments and make its return type as WebElement for same method. Once you get WebElement as return type then execute driver operation inside your script.
Automation Helper says
How to make this work for POM?
Mukesh Otwani says
Hi there,
I didn’t get you. Please explain…
Aravind says
Hi Mukesh
In Highlight element Selenium video you mentioned about creating customize method for finding, highlighting and wait until element is found. Please ping me the video link.
Mukesh Otwani says
Hi Aravind,
Please find the link for same
Highlight element–>> https://youtu.be/ND_9guCggdA
Explicit Wait –>> https://youtu.be/rlUzo_w11Ao
Implicit Wait–>> http://learn-automation.com/implicit-wait-in-selenium-webdriver/
Fluent Wait –>> https://youtu.be/xmgWAaFtoFA
Liam says
Do i have to use Webelement in front of every driver.findElement to use this,
do i have to keep repeating calling the function?
Mukesh Otwani says
Hi Liam,
We use in the same way as I shown in video. We created a library and we are calling for every element.
Azhar says
Hi Mukesh,
How i can highlight partial text from link using this method, as this method will work for element?
Mukesh Otwani says
Hi Azhar,
As per my knowledge, It is not possible to highlight partial text. Because WebElement will cover whole text.
venkat says
Thanks mukesh ji.. with your blogs and videos i am also becoming very passionate about selenium automation. Thanks a ton for that.
Mukesh Otwani says
Hey Venkat,
I am really glad to know that you got passion and interest. Keep learning and let me know if any help.
sheshajee says
hi Mukesh,
Can you reply the video link how can i write one time method which will highlight at every time of execution
Mukesh Otwani says
Hi Sheshajee,
Yes you do that. Try to add highlighter code in below method as well.
zeeshan says
Hi Mukesh,
I am not able to understand the significance of below line of code used:
js.executeScript(“arguments[0].setAttribute(‘style’, ‘background: yellow; border: 2px solid red;’);”, ele);
Not sure where this “ele” is coming from as we have declared our webElement with the reference “element”
Mukesh Otwani says
Hi Zeeshan,
Correct, You found the defect. It should be element.
I have updated the document as well. Hope this highlighter worked for you.
Nikhil says
Mukesh how do we understand Java Script, because unless we know syntax of it, its difficult to understand the above script.
Post is really good
Mukesh Otwani says
Hi Nikhil,
For Selenium you dont have to learn complete java script but still if you want to learn then w3school is best. http://www.w3schools.com/js/
Gautham says
Hello Mukesh, Thanks for sharing this post. Its really helpful. I tried with IE 11 its not working any idea why?
Mukesh Otwani says
Yes Gautham it will work
Nur Islam says
Excellent post.
Mukesh Otwani says
Thanks Nur