Skip to content

Instantly share code, notes, and snippets.

@marciomazza
Created July 10, 2012 22:10
Show Gist options
  • Save marciomazza/3086536 to your computer and use it in GitHub Desktop.
Save marciomazza/3086536 to your computer and use it in GitHub Desktop.
Highlights a Selenium Webdriver element
def highlight(element):
"""Highlights (blinks) a Webdriver element.
In pure javascript, as suggested by https://github.com/alp82.
"""
driver = element._parent
driver.execute_script("""
element = arguments[0];
original_style = element.getAttribute('style');
element.setAttribute('style', original_style + "; background: yellow; border: 2px solid red;");
setTimeout(function(){
element.setAttribute('style', original_style);
}, 300);
""", element)
@Twaldigas
Copy link

Thanks! Simple but helpful. :)
Java: https://gist.github.com/3104594

@alp82
Copy link

alp82 commented Jul 13, 2012

The only problem is, that the application is blocked for some time. Better would be to do the whole thing in JavaScript by using setTimeout().

@srawlins
Copy link

I use the following to highlight an element, and any number of its ancestors, each in a darker shade of red (Ruby):

def highlight(method, locator, ancestors=0)
  element = find_element(method, locator)
  execute_script("hlt = function(c) { c.style.border='solid 1px rgb(255, 16, 16)'; }; return hlt(arguments[0]);", element)
  parents = ""
  red = 255

  ancestors.times do
    parents << ".parentNode"
    red -= (12*8 / ancestors)
    execute_script("hlt = function(c) { c#{parents}.style.border='solid 1px rgb(#{red}, 0, 0)'; }; return hlt(arguments[0]);", element)
  end
end

@marciomazza
Copy link
Author

That's really cool.

@marciomazza
Copy link
Author

I made a simpler version in pure javascript with setTimeout (suggested by https://github.com/alp82).

@nywils
Copy link

nywils commented Jan 11, 2013

how do I call this function in ruby selenium webdriver?

i tried: driver.highlight(:css,"input[name='email']")

but it didn't work.

@Nirav1989
Copy link

Here you can find how to highlight element using selenium web driver with example:
http://www.testingdiaries.com/highlight-element-using-selenium-webdriver/

@vanclist
Copy link

Big up for this trick!

@mcherryleigh
Copy link

Thanks for great the trick. I started a module that builds on top of this general idea for any nodejs users looking for a similar tool npm / github

@recmjobularity
Copy link

Big thanks for this!

@eagleEggs
Copy link

Thanks - Is there a license with this code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment