Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@Twaldigas

Twaldigas Jul 13, 2012

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

Twaldigas commented Jul 13, 2012

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

@alp82

This comment has been minimized.

Show comment
Hide comment
@alp82

alp82 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().

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

This comment has been minimized.

Show comment
Hide comment
@srawlins

srawlins Jul 13, 2012

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

srawlins commented Jul 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marciomazza

marciomazza Jul 14, 2012

That's really cool.

Owner

marciomazza commented Jul 14, 2012

That's really cool.

@marciomazza

This comment has been minimized.

Show comment
Hide comment
@marciomazza

marciomazza Jul 14, 2012

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

Owner

marciomazza commented Jul 14, 2012

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

@nywils

This comment has been minimized.

Show comment
Hide comment
@nywils

nywils 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.

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

This comment has been minimized.

Show comment
Hide comment
@Nirav1989

Nirav1989 Nov 16, 2014

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

Nirav1989 commented Nov 16, 2014

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

@vanclist

This comment has been minimized.

Show comment
Hide comment
@vanclist

vanclist Nov 20, 2014

Big up for this trick!

vanclist commented Nov 20, 2014

Big up for this trick!

@mcherryleigh

This comment has been minimized.

Show comment
Hide comment
@mcherryleigh

mcherryleigh Jul 12, 2016

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

mcherryleigh commented Jul 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@recmjobularity

recmjobularity Jul 28, 2016

Big thanks for this!

recmjobularity commented Jul 28, 2016

Big thanks for this!

@eagleEggs

This comment has been minimized.

Show comment
Hide comment
@eagleEggs

eagleEggs Oct 2, 2018

Thanks - Is there a license with this code?

eagleEggs commented Oct 2, 2018

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