Highlights a Selenium Webdriver element

highlight_sel_element.py

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)

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

That's really cool.

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

how do I call this function in ruby selenium webdriver?

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

but it didn't work.

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

Big up for this trick!

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

Big thanks for this!

Thanks - Is there a license with this code?