无法使用 nightwatch js 从下拉列表中选择选项

Question

我看过其他一些使用以下格式的帖子，但它根本不起作用，甚至选择没有打开：

.click(".selectpicker option[value='somevalue']")

但是当我这样写的时候：

.click("select[id='chooseone']")

它确实打开了下拉菜单。

这是 select 的样子：

<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>

后端有反应代码，因此会触发一个 onchange 事件，该事件将显示每个选项的相应输入字段和一个提交按钮。

我的测试基本上是：

1. 选择一个选项
2. 填写字段
3. 提交
4. 验证结果容器

我应该如何编写这段代码？这是我第一次做这样的事情。任何帮助表示赞赏。

谢谢

更新 >>>

这是在 Safari 中，但它不起作用。但是当我安装 chromedriver 时，它确实有效。这是工作代码：

.click('select[id="searchBySelect"] option[value="any_option_value"]')

这将单击select 元素中提供的选项。

Answer 1

首先您需要打开下拉菜单。看起来您已经知道这一点，但无论如何您都应该从：

browser.click('.selectpicker');

然后有几种方法可以获得您想要点击的选项。您可以通过执行以下操作来选择特定选项（只需修改它以选择您想要的任何选项）

browser.element('css selector', '.selectpicker', function(element) {
  browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
    browser.elementIdClick(option.ELEMENT);
  });
}); 

或者您可以获取数组中的所有选项，然后以这种方式单击其中一个：

browser.elements('css selector', 'option', function(elements) {
  browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});

Answer 2

tehbeardedone 非常感谢您提供解决方案。我必须做一个小修复才能让 elementIdClick() 正常工作。

而不是 option.ELEMENT

我不得不使用 option.value.ELEMENT

由于我的代码 sn-p 必须添加到页面对象，这是它的最终版本：

let durationOptionSelector = `option[contains(text(), "${duration}")]`;  //dynamic option selector

this.click("@duration_dropdown");

this.api.element("xpath", "@duration_dropdown", function (dropdown) {
  this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
    this.elementIdClick(option.value.ELEMENT);
  });
});