如何通过定位css在下拉菜单中选择第一个选项？

Question

我目前正在使用Cucumber / Selenium / Ruby来创建我的自动化框架并设置我的第一个测试。我正在努力的那个让我填写表格，以便进入下一阶段。表单包含一个包含多个值的下拉列表，我想从中选择一个（以及任何一个！）

检查下拉菜单的元素

<input type="search" class="ember-power-select-trigger-multiple-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="ember-power-select-trigger-multiple-input-ember3325" aria-controls="ember-power-select-options-ember3325" style="width: 100%;" placeholder="All classes">

因此，我在下面的步骤中使用了class：

我的步骤

@wait.until {@driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input').click}

目前，当我运行它时，它能够找到正确的下拉选项并单击它。列表中的选项出现，但显然没有任何反应。

我想知道的是我如何进一步扩展这一点，以便选择下拉列表，并选择“第一个”选项？我不想指定它应该是什么，但它应该从列表中随机选择第一个并使用它。

有关实现这一目标的最简单方法的任何想法？

---

研究片段我做了一些研究，发现以下片段，我认为我可以添加到我的代码中，但是我不确定它是否真的有用，或者我是否可以将它与上面提到的@wait.until步骤一起使用？

groupDropdown = @driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input')
option = groupDropdown.find_element(:css, "option:nth-child(1)")
option.click

Answer 1

@wait.until {@driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input').click}
@wait.until {@driver.find_element(:css => '.ember-view > li > .ember-view > li:nth-of-type(1) > .ember-view > li').click}

这很有效。

Answer 2

直到

Selenium中的“until”方法需要“truthy”响应才能继续使用其余代码。

你能做的是：

power_select = @driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input')
@wait.until {power_select.displayed?}
power_select.click

这将等待元素显示在页面上，返回一个布尔值，然后单击一下

选择

接下来，选择的方法很好地隐藏在库中，但在搜索了一下之后：

要按文字选择：

Selenium::WebDriver::Support::Select.new(@driver.find_element(:css => <insert_css_of_select_here>)).select_by(:text, <insert_option_text_here>)

要按索引选择：

Selenium::Webdriver::Support::Select.new(@driver.find_element(:css => <insert_css_of_select_here>)).select_by(:index, <insert_index_value_here>)

通过索引选择您最想要做的事情，将索引值设置为0以选择第一个选项。

Answer 3

这将让您选择Capybara所需的ember-power-select选项：

find('.ember-power-select-trigger').click # Open trigger
find_all('ul.ember-power-select-options > li')[1].click # Select 2nd option

测试了最新的ember-power-select。

如果你的Capybara.default_max_wait_time很高，你可能会发现点击很慢，所以为了加快速度，你可以这样做：

find('.ember-power-select-trigger').click # Open trigger
Capybara.using_wait_time(0.1) do
  find_all('ul.ember-power-select-options > li')[1].click # Select 2nd option
end