Why do I get invalid attribute error when I pass in a css selector?

Question

stackoverflow,

Here's what I'm trying to do

def get_element_from_list(root, item, index)
  @browser.elements(:css => root).each do |element|
    if element.present?
      return element.element(:css => item, :index => index)
    end
  end

  raise Selenium::WebDriver::Error::NoSuchElementError
end

get_element_from_list('div[class*=x-combo-list]', 'x-combo-list-item', index).click

gives me Watir::Exception::MissingWayOfFindingObjectException: invalid attribute: :css

What I don't understand is if I simply do

@browser.elements(:css => 'div[class*=x-combo-list]').each do |element|
  if element.present?
    return element.element(:css => 'x-combo-list-item', :index => index)
  end
end

basically replacing root and item with the actual strings it works without error.

Answer 1

I think there might be a bug that prevents locating elements with the :css and :index locator - Issue 241.

You can work around the issue by getting an element collection and then getting the element at the specific index:

return element.elements(:css => 'x-combo-list-item')[index]

(Note that I think this css-selector might be wrong. It is probably meant to be .x-combo-list-item.)

Alternatively, assuming that x-combo-list-item is actually the element's class, you could do:

return element.element(:class => 'x-combo-list-item', :index => index)