Why are css selectors interpreted differently by JQuery and Capybara?

Question

I'm writing tests for a web app using Capybara. I'm trying find a node in the DOM using the following set of selectors.

'[ng-repeat="task in taskList.items"]:last-child .editable-select [multiple="multiple"]'

When I pass these selectors to JQuery, via the javascript console in Chrome, they retrieve the correct node.

$('[ng-repeat="task in taskList.items"]:last-child .editable-select [multiple="multiple"]')

=>

[
<select multiple=​"multiple" ng-options=​"s.index as s.path for s in files" class=​"editable-input ng-pristine ng-valid" ng-model=​"$data">​…​</select>​
]

When I pass the exact same selectors to Capybara's find method, however, I get an Element Not Found exception.

find('[ng-repeat="task in taskList.items"]:last-child .editable-select [multiple="multiple"]')

=>

Capybara::ElementNotFound Exception: Unable to find css "[ng-repeat=\"task in taskList.items\"]:last-child .editable-select [multiple=\"multiple\"]"

If the selectors work properly in JQuery, why don't they work in Capybara? How could I rewrite my query to be Capybara-compatible?

Answer 1

CSS selectors are handled natively by Capybara. For example, capybara-webkit uses querySelectorAll. Other drivers will similarly delegate to their browsers' native selector engines.

On the other hand, jQuery uses Sizzle, which is a custom selector library. It extends and customizes the set of selectors which are natively available in the browser.

For more information, check out this discussion: jQuery vs document.querySelectorAll