如何在ProtractorJS E2E测试中选择下拉选项

按索引选择选项：

var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
      .then(function (options) {
          options[0].click();
      });

我对PaulL的解决方案进行了一些改进。 首先，我修复了代码以与最新的Protractor API兼容。然后，我在Protractor配置文件的'onPrepare'部分中声明该函数为browser实例的成员，因此它可以在任何e2e规范中引用。

  onPrepare: function() {
    browser._selectDropdownbyNum = function (element, optionNum) {
      /* A helper function to select in a dropdown control an option
      * with specified number.
      */
      return element.all(by.tagName('option')).then(
        function(options) {
          options[optionNum].click();
        });
    };
  },

设置选项元素的另一种方式：

var setOption = function(optionToSelect) {

    var select = element(by.id('locregion'));
    select.click();
    select.all(by.tagName('option')).filter(function(elem, index) {
        return elem.getText().then(function(text) {
            return text === optionToSelect;
        });
    }).then(function(filteredElements){
        filteredElements[0].click();
    });
};

// using the function
setOption('BeaverBox Testing');

我们本来想使用AngularJS Material中优雅的解决方案，但实际上在md-select未被点击之前，DOM中根本没有任何选项/md-option标签。因此，这种“优雅”的方法对我们不起作用（注意Angular Material！）这是我们为此所做的事情，不知道它是否是最好的方法，但它绝对可以正常工作。

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.driver.sleep(500);              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.driver.sleep(500);              // wait for the renderings to take effect
});

以下是如何通过选项值或索引来完成。这个示例有些粗糙，但它展示了如何实现你想要的功能：

HTML：

<mat-form-field id="your-id">
    <mat-select>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
    </mat-select>
</mat-form-field>

ts：

function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');    

        for (let optionId of optionIds) {
          const option = element(by.id(optionId));
          option.getText().then((text) => {
            if (text === valueToFind) {
              option.click();
            }
          });
        }
      });
  });
}

function selectOptionByOptionIndex(selectFormFieldElementId, index) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');

        const optionId = optionIds[index];
        const option = element(by.id(optionId));
        option.click();
      });
  });
}

selectOptionByOptionValue('your-id', '1'); //selects first option
selectOptionByOptionIndex('your-id', 1); //selects second option

我发现使用索引选择选项的最简单方法是：

var selectDropdownElement = await element(by.xpath("Some Xpath"));
                await selectDropdownElement.all(by.tagName('option')).then(function (options) {
                        options[index].click();
                });

'index' 是您想要点击的选项号码

这对于Angular Material运作良好。

element(by.css("mat-select[formcontrolname=myMatSelect]")).sendKeys(valueToSet);

如果在您的选项中不存在"valueToSet"，则不应设置它。

这是一个简单的一行答案，其中Angular有特殊的定位器，可以帮助从列表中选择和索引。

element.all(by.options('o.id as o.name for o in organizations')).get(Index).click()

----------
element.all(by.id('locregion')).then(function(Item)
{
 // Item[x] = > // x is [0,1,2,3]element you want to click
  Item[0].click(); //first item

  Item[3].click();     // fourth item
  expect(Item[0].getText()).toEqual('Ranjans Mobile Testing')


});