为什么css选择器被JQuery和Capybara解释不同？

Question

我正在使用Capybara为Web应用编写测试。我正在尝试使用以下一组选择器在DOM中找到一个节点。

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

当我通过Chrome中的javascript控制台将这些选择器传递给JQuery时，它们会检索正确的节点。

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

=＆GT;

[
<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>​
]

然而，当我将完全相同的选择器传递给Capybara的find方法时，我得到了一个Element Not Found异常。

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

=＆GT;

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

如果选择器在JQuery中正常工作，为什么它们不能在Capybara中工作？我怎样才能将我的查询重写为Capybara兼容？

Answer 1

CSS选择器由Capybara本地处理。例如，capybara-webkit使用querySelectorAll。其他驱动程序将类似地委托给他们的浏览器的本机选择器引擎。

另一方面，jQuery使用Sizzle，这是一个自定义选择器库。它扩展并自定义了浏览器中原生可用的选择器集。

有关详情，请参阅此讨论：jQuery vs document.querySelectorAll