Skip to content

Instantly share code, notes, and snippets.

@marciomazza
Created July 10, 2012 22:10
Show Gist options
  • Select an option

  • Save marciomazza/3086536 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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

@alp82

alp82 commented Jul 13, 2012

Copy link
Copy Markdown

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
Copy Markdown

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
Copy Markdown
Author

That's really cool.

@marciomazza

Copy link
Copy Markdown
Author

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

@nywils

nywils commented Jan 11, 2013

Copy link
Copy Markdown

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
Copy Markdown

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
Copy Markdown

Big up for this trick!

@mcherryleigh

Copy link
Copy Markdown

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
Copy Markdown

Big thanks for this!

@eagleEggs

Copy link
Copy Markdown

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