Highlight Elements being acted upon in Selenium

Highlight Elements

When your selenium scripts are running, it is difficult to see exactly which element is active at the moment. Using this quick trick, you can highlight elements being acted upon.

Highlight Elements

We can highlight the active element using WebDriver’s JavascriptExecutor to modify the backgroundColor property of the element acted on. But you can change any properly to make the element visible, like border color etc. This can be done using the statement

If you need to highlight elements for all the actions (click, type etc), you can create a custom findElement method which highlights the element. This method will be called by other operations like click, sendKeys etc. If you need to highlight only certain actions say click, just use it in that method.

A custom findElement method is shown below.

Now, if you are acting on several elements on the same page (eg. filling a form), all the elements will remain highlighted.

We will now see how to remove the highlight when another element becomes active.

For resetting the previously active element, we need to keep a reference to the element. Also, since the element might have had its own background before we changed it, we cannot blindly reset the background to any value. For that, we have to store the initial background color to reset it back.

The resetHighlight method has to be called before the next element highlighted. So take a look at the updated methods.

SEE ALSO:   Solutions to 5 Common WebDriver Doubts

You can find the complete class here in my GitHub account. If you are importing the project, don’t forget to add selenium and testng jar files(not uploaded in the project).

 

Leave a Reply

Your email address will not be published. Required fields are marked *