如何从量角器的下拉列表中选择一个值答案

【问题标题】：How to select a value from a Dropdown in Protractor如何从量角器的下拉列表中选择一个值
【发布时间】：2020-01-04 01:26:25
【问题描述】：

我想从 Dropbox 中选择一个值。 Dropbox 中的内容没有值或 ID，而是有标题。这是其中一项内容和下拉菜单的 HTML。下面的 id 来自 Dropbox。有了这些信息，我只能选择 Dropbox，而不是值。

<span class="select2-selection__placeholder">Select reason</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="01 - <Change of mind, back to stock>">01 - Change of mind, back to stock</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="04 - <Production Fault, to recovery>">04 - Production Fault, to recovery</span>````

【问题讨论】：

您能否向我们提供整个下拉列表？或者至少是带有几个选项的下拉元素
@JoaquinCasco 请看我上面的更新
@IngridDBrito：感谢您提供的信息，足以编写代码。

标签： drop-down-menu protractor

【解决方案1】：

要解决这个问题陈述，您需要做的就是：

使用元素查找下拉菜单
点击下拉菜单
点击选项

it("should select the dropdown." async () => {
    await $("span.select2-selection__placeholder").click();
    //add sleep to give a time for the options to reveal or use an explicit wait 
    //here. I prefer the latter.
    await browser.sleep(1000)
    // click the option '01 - Change of mind, back to stock'
    await $$("span#select2-e5dt-container"").get(0).click();
});

让我知道它对你有什么影响！

【讨论】：

嗨@Puja，我收到此错误消息：失败：索引超出范围。尝试访问索引为 0 的元素，但只有 0 个元素与定位器匹配 By(css selector, span#select2-e5dt-container) 这是代码：it('should select reason code', async function() { <\br> await $('span.select2-selection__placeholder').click(); //click on the dropdown //add sleep to give a time for the options to reveal or use an explicit wait await browser.sleep(1000); await $$('span#select2-e5dt-container').get(0).click(); }); })

【解决方案2】：

识别下拉菜单并点击它

等待显示下拉选项（使用 ExpectedConditions.visibilityOf()）

var EC = protractor.ExpectedConditions;
var filteroption = "Production Fault, to recovery";
this.DDOptions = element.all(by.css('[role="textbox"]'));

//点击下拉菜单

// 等待下拉选项可见

browser.wait(EC.visibilityOf(this.DDOptions.get(0), 500, "DD option not visible timing out"));

this.DDOptions.filter(function (elem, index) {
    return elem.getText().then(function (text) {
      return text.toUpperCase() === filteroption.toUpperCase();
    });
  }).then(function (filteredElements) {
      filteredElements[0].click();
  });

【讨论】：