爲什麼jQuery和Capybara對css選擇器的解釋不同？

Question

我正在爲使用水豚的網絡應用程序編寫測試。我試着在DOM中使用下面的一組選擇器找到一個節點。

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

當我將這些選擇器傳遞給JQuery時，通過Chrome中的javascript控制檯，它們檢索正確的節點。

$('[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>​ 
] 

當我通過完全相同的選擇器來水豚的find方法，但是，我得到一個元素未發現異常。

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中正常工作，他們爲什麼不以水豚工作？我怎麼能重寫我的查詢是水豚兼容的？

Answer 1

CSS選擇器由水豚本身處理。例如，capybara-webkit使用querySelectorAll。其他驅動程序也會將其委託給瀏覽器的本機選擇器引擎。

在另一方面，jQuery使用Sizzle，它是一個自定義選擇器庫。它擴展並自定義瀏覽器中本地可用的一組選擇器。

欲瞭解更多信息，請參閱這篇討論：jQuery vs document.querySelectorAll