为什么 JQuery 和 Capybara 对 css 选择器的解释不同？答案

【问题标题】：Why are css selectors interpreted differently by JQuery and Capybara?为什么 JQuery 和 Capybara 对 css 选择器的解释不同？
【发布时间】：2014-03-02 09:15:43
【问题描述】：

我正在使用 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"]')

[
<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"]')

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

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

【问题讨论】：

如果您对此不满意，请接受@Joe 的回答。我个人认为它比你问的更清楚。

标签： jquery capybara capybara-webkit

【解决方案1】：

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

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

有关更多信息，请查看此讨论：jQuery vs document.querySelectorAll

【讨论】：