Selenium webdriver highlight element before clicking

Question

I'm working on a set of selenium UI tests that are written in Python. On a previous project I was using WatiN and C#.

The WatiN framework had a feature you could enable that would 'highlight' the element you were clicking, selecting or typing into. The element would get a yellow border around it while the action was performed. I found this extremely helpful while troubleshooting broken tests, I could often see from the test run if the wrong element was being clicked.

I was wondering if Selenium webdriver has a similar feature that I can turn on. Basically I would like some sort of visual indication of what element is being interacted with.

Thanks!

Answer 1

Selenium RC could do this but there is no direct API method to do this in WebDriver. Your options are:

1) Use the WebDriverBackedSelenium implementation in your language bindings to access the Highlight method.

2) Simply call some javascript using the JavascriptExecutor (or similar implementation in your language bindings) to do the job for you. This will mimic what Selenium RC/option 1 would achieve.

The Javascript to call exists here:

http://code.google.com/p/selenium/source/browse/javascript/selenium-core/scripts/htmlutils.js

The function to note is the highlight function. Just load this script using the JavascriptExecutor (search to find out how to do this in your programming language).

You can then compare this to see how the WebDriverBackedSelenium implementation in the Java API's are using it:

http://code.google.com/p/selenium/source/browse/java/client/src/org/openqa/selenium/internal/seleniumemulation/Highlight.java

Use this, to do this same in your own code.

As a side note, the Selenium IDE for Firefox can highlight methods as well.