AngularJS + Protractor How to select Dropdown opti

Question

I want to click on item by it's text and not by it's value from dropdown box.

i found this great post : https://coderwall.com/p/tjx5zg but it doesn't work as expected, the search continue forever after match was found and it is not clicking the item,

if someone have better example (a working one) or can fix this code and make it work,

i will apperciate.

This is the code Dan Haller from the post used (all rights reserved to him)

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();
            }
        });
    }

This is a select item function that I can use like this:

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

Answer 1

This question is similar to: How to select option in drop down protractorjs e2e tests

So long as you're on a recent version of protractor, you can just do:

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

If you want to click by number, you can do:

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

Answer 2

As you want to select option by value, you can use:

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

Answer 3

This function selects the 3rd option of your select box.

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);

More info can be found here - http://qainsight.blogspot.fr/2014/04/select-dropdown-value-in-protractor-js.html