AngularJS + Protractor How to select Dropdown option based on its text not value

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.

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

I also tried "protractor.By.xpath('select option[text()="Option 2"]'));" and it didn't worked — Liad Livnat, Apr 06 '14 at 14:26
I generally use `sendKeys()`, I'm not sure if this is desired or not. For instance if I have a dropdown with a list of city names I would use `elem.sendKeys(desiredCityName)` and it automatically selects the right option. — Aaron, Jan 20 '15 at 22:18

score 24 · Answer 1 · edited May 23 '17 at 10:31

24

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

edited May 23 '17 at 10:31

Community

1
1

answered Aug 12 '14 at 05:11

PaulL

6,650
3
35
39

3

I tried this way. But it says could not find the element. Not visible – Russj Oct 06 '14 at 09:12
1

`cssContainingText` works for me. this is the correct answer. see also http://stackoverflow.com/a/24259419/1068746 – guy mograbi May 09 '15 at 04:03
even though I can verify I can get the dropdown element i still get [object Object] has no method 'findElements' I think it's because i'm doing a direct connect to chrome and not a standalone selenium server – btm1 Aug 21 '15 at 19:29
element(by.cssContaining‌Text('option', '....')).click(); ^ SyntaxError: Invalid or unexpected token – canbax Jan 31 '18 at 09:53

score 12 · Accepted Answer · edited Mar 26 '15 at 19:02

12

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

edited Mar 26 '15 at 19:02

usumoio

3,500
6
31
57

answered Jun 27 '14 at 11:33

2

This might have to do with the version of Protractor, but for me the method "findElements" does not work. There is a method called "all" that does the job though. – LeFex Apr 28 '16 at 13:09

score 5 · Answer 3 · answered Feb 17 '16 at 10:36

5

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

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

answered Feb 17 '16 at 10:36

suvroc

3,058
1
15
29

AngularJS + Protractor How to select Dropdown option based on its text not value

3 Answers3

Linked