AngularJS + Protractor如何根据其文本选择下拉选项不值答案

【问题标题】：AngularJS + Protractor How to select Dropdown option based on its text not valueAngularJS + Protractor如何根据其文本选择下拉选项不值
【发布时间】：2014-05-18 16:25:41
【问题描述】：

我想通过文本而不是下拉框中的值单击项目。

我发现了这篇很棒的帖子：https://coderwall.com/p/tjx5zg，但它没有按预期工作，找到匹配后搜索将永远继续并且它没有点击该项目，

如果有人有更好的例子（一个有效的例子）或者可以修复这个代码并让它工作，

我会明白的。

function selectOption(selector, item){
    var selectList, desiredOption;

    selectList = this.findElement(selector);
    selectList.click();

    selectList.findElements(protractor.By.tagName('option'))
        .then(function findMatchingOption(options){
            options.some(function(option){
                option.getText().then(function doesOptionMatch(text){
                    if (item === text){
                        desiredOption = option;
                        return true;
                    }
                });
            });
        })
        .then(function clickOption(){
            if (desiredOption){
                desiredOption.click();
            }
        });
    }

这是一个选择项功能，我可以这样使用：

var browser = protractor.getInstance();
browser.selectOption = selectOption.bind(browser);
browser.selectOption(protractor.By.id('my-dropdown'), 'My Value');

【问题讨论】：

我也试过“protractor.By.xpath('select option[text()="Option 2"]'));”它没有工作
我通常使用sendKeys()，我不确定这是否需要。例如，如果我有一个包含城市名称列表的下拉菜单，我会使用elem.sendKeys(desiredCityName)，它会自动选择正确的选项。

标签： angularjs protractor

【解决方案1】：

这个问题类似于：How to select option in drop down protractorjs e2e tests

只要您使用的是最新版本的量角器，您就可以这样做：

element(by.cssContainingText('option', 'BeaverBox Testing')).click();

如果你想按数字点击，你可以这样做：

var selectDropdownbyNum = function ( element, optionNum ) {
  if (optionNum){
    var options = element.findElements(by.tagName('option'))   
      .then(function(options){
        options[optionNum].click();
      });
  }
};

【讨论】：

我试过这种方式。但它说找不到元素。不可见
cssContainingText 为我工作。这是正确的答案。另见stackoverflow.com/a/24259419/1068746
即使我可以验证我可以获得下拉元素我仍然得到 [object Object] has no method 'findElements' 我认为这是因为我正在直接连接到 chrome 而不是独立的 selenium服务器
element(by.cssContaining‌Text('option', '....')).click(); ^ SyntaxError: 无效或意外的令牌

【解决方案2】：

此函数选择您选择框的第三个选项。

function selectDropdownByNumber(element, index, milliseconds) {
    element.findElements(by.tagName('option'))
      .then(function(options) {
        options[index].click();
      });
    if (typeof milliseconds !== 'undefined') {
      browser.sleep(milliseconds);
   }
}
var mySelect = $('#my-dropdown');
selectDropdownByNumber(mySelect, 2);

更多信息可以在这里找到 - http://qainsight.blogspot.fr/2014/04/select-dropdown-value-in-protractor-js.html

【讨论】：

这可能与 Protractor 的版本有关，但对我来说“findElements”方法不起作用。不过，有一种名为“all”的方法可以完成这项工作。

【解决方案3】：

如果你想按值选择选项，你可以使用：

var select = element.one(by.model('selectData'));
select.$('[label="Option 1"]').click();

【讨论】：