css - :eq pseudo selector not working with Selenium WebDriver/Chrome

Question

我正在尝试使用 selenium 中的 css 选择器从网站获取给定类的前两个 div。我将使用 SO 来演示问题。如果我在控制台 chrome 开发工具中尝试选择器，它会起作用:

$('div.question-summary:eq(0)')
[<div class=​"question-summary narrow tagged-interesting" id=​"question-summary-27442616">​…​</div>​]
$('div.question-summary:eq(1)')
[<div class=​"question-summary narrow tagged-interesting" id=​"question-summary-27442177">​…​</div>​]

但是如果我使用 selenlium webdriver 执行以下操作，我会收到错误消息:

require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome
driver.navigate.to('http://www.stackoverflow.com')
first_element = driver.find_element(:css, 'div.mainnav:eq(0)')

Selenium::WebDriver::Error::InvalidSelectorError: invalid selector: 指定了无效或非法的选择器

有没有其他方式来表达这个选择器？或者让 selenium 对其做出响应的方法？

Answer 1

Selenium 使用浏览器的 native CSS 选择器引擎。因此，find_element 方法会将 jQuery 选择器(在本例中为 :eq(0))视为无效。

如果您想使用 jQuery 选择器，您需要使用 execute_script 方法手动执行该脚本。请注意，当使用此方法时，将返回一个 Selenium::WebDriver::Element 数组，这就是为什么使用 .first(获取数组的第一个元素)的原因。

first_element = driver.execute_script('return $("div.question-summary:eq(0)");').first

也就是说，如果您尝试使用的唯一 jQuery 选择器是 :eq，您可以使用标准 CSS 选择器。 :eq 选择器返回匹配集中的特定元素。您可以使用 find_elements 和 [] 方法来执行相同的操作:

first_element = driver.find_elements(:css, 'div.question-summary')[0]
second_element = driver.find_elements(:css, 'div.question-summary')[1]