Did I select the right element?

Time and time again, I will find unexpected behavior in my tests (either from an error, or the wrong text being displayed, etc), and I need to fallback to determining if I’m even using the correct element.

Two very handy methods that I created allow me to debug whether I have selected the right element. They are highlight and html:

highlight:

This method allows me put a temporary bright yellow border around the element in question. This gives me a visual clue of which element is selected when I look at the browser.

  def highlight element, time = 3
    orig_style = element.attribute("style")
    @driver.execute_script("arguments[0].setAttribute(arguments[1], arguments[2])", element, "style", "border: 2px solid yellow; color: yellow; font-weight: bold;")
    if time > 0
      sleep time
      @driver.execute_script("arguments[0].setAttribute(arguments[1], arguments[2])", element, "style", orig_style)
    end
  end
  some_field = @driver.find_element(:css => "input.text") #=> <Selenium::WebDriver::Element ... >
  highlight some_field #=> nil (But look at the browser, and you should see the element get highlighted for three seconds)
  highlight some_field, 10 #=> nil (But look at the browser, and you should see the element get highlighted for ten seconds)
  highlight some_field, 0 #=> nil (But look at the browser, and you should see the element get highlighted, and stay highlighted)

html:

This method allows me to see the actual HTML code of the element in question. I can use it to compare to the DOM of the actual page if I still don’t “see” the element on the page.

  def html element
    @driver.execute_script("var f = document.createElement('div').appendChild(arguments[0].cloneNode(true)); return f.parentNode.innerHTML", element)
  end
  some_div = @driver.find_element(:css => "div.something") #=> <Selenium::WebDriver::Element ... >
  puts html(some_div) #=> "<div class=\"something\" ... </div>"

———————–

If you wanted to get really clever, you could open up the Selenium::WebDriver::Element module directly and add those methods in directly:

module Selenium::WebDriver
  Element.module_eval do
    def highlight time = 3
      orig_style = self.attribute("style")
      @driver.execute_script("arguments[0].setAttribute(arguments[1], arguments[2])", self, "style", "border: 2px solid yellow; color: yellow; font-weight: bold;")
      if time > 0
        sleep time
        @driver.execute_script("arguments[0].setAttribute(arguments[1], arguments[2])", self, "style", orig_style)
      end
    end
    def html element
      @driver.execute_script("var f = document.createElement('div').appendChild(arguments[0].cloneNode(true)); return f.parentNode.innerHTML", self)
    end
  end
end
some_field.highlight #=> nil (But look at the browser, and you should see the element get highlighted for three seconds)
some_div.html #=> "<div class=\"something\" ... </div>"

Using both of these methods in conjunction, I can always figure out which element I have selected during my interactive coding process.

Advertisements