Question

我正在尝试使用selenium中的css选择器从网站获取给定类的前两个div。我将用SO来证明这个问题。如果我在控制台chrome dev工具中尝试选择器，它可以工作：

$('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：无效的选择器：指定了无效或非法的选择器

有没有其他方式来表达这个选择器？还是让硒响应的方法？

Answer 1

Selenium使用浏览器的原生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]

Answer 2

您可以通过:nth-child得到类似的结果：

first_element = driver.find_element(:css, 'div.question-summary:nth-child(0)')

请注意difference between :eq and :nth-child

：eq伪选择器不能与Selenium WebDriver / Chrome一起使用

2 个答案: