Can't select element from drop down menu E2E testing using Protractor

Question

There's quite a few ways to do this and I've tried a good number of them but I can't select an item from a drop down menu when doing an automated test.

"Select" is the default choice that appears in the drop down menu, I want the automated test to pick one of the elements, doesn't matter which one

This is the HTML Code

<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.investmentAmount" required="" ng-class="{submitted:invalid}">
                   <option value="">Select</option>
                   <option value="<50"> 50K</option>
                   <option value="50-100">100K</option>
                   <option value="100-250">250K</option>
                   <option value="250-500">500K</option>
                  </select>

And this is my Protractor file

var selectDropdownbyNum = function ( element, optionNum ) {
    if (optionNum){
      var options = element(by.cssContainingText("Select"))  
        .then(function(options){
          options[2].click();
        });
    }
  };
  browser.sleep(2000);

I've tried using by.cssElement, by.xpath etc. When I run the above, I get no errors but it doesn't select any element either. Thanks

score 0 · Answer 1 · answered Apr 19 '17 at 14:09

0

Selects are an odd duck for sure. I generally just click the option by text (when possible). Eg. you should be able to do something like this...

var selectOptionByText = function(text) {
    return element(by.cssContainingText('option', text)).click();
};

answered Apr 19 '17 at 14:09

Brine

3,733
1
21
38

Thanks for your reply, I eventually got a different drop down menu on the same page to work using: `element(by.model('user.sourceOfFunds')).sendKeys('Savings');` The above line works fine for me but when I try `element(by.model('user.investmentAmount')).sendKeys('50-100');` or `element(by.model('user.investmentAmount')).sendKeys('100k');` I get element not visible. Not sure why one works and not the other – Edmond Apr 20 '17 at 08:45

score 0 · Answer 2 · answered Apr 19 '17 at 14:17

0

Once you clicked on //select[@ng-model='user.investmentAmount'] usng xpath, Put some wait like "browser.sleep(2000)" then use //option[text()='100K'] to click.

answered Apr 19 '17 at 14:17

Parthi

142
1
1
12

Thanks for your reply, I eventually got a different drop down menu on the same page to work using: `element(by.model('user.sourceOfFunds')).sendKeys('Savings');` The above line works fine for me but when I try `element(by.model('user.investmentAmount')).sendKeys('50-100');` or `element(by.model('user.investmentAmount')).sendKeys('100k');` I get element not visible. Not sure why one works and not the other – Edmond Apr 20 '17 at 08:45

score 0 · Answer 3 · answered Apr 19 '17 at 14:50

0

It's because of you are selecting only one option containing 'Select' value and expecting array,

try below, first get the select box by model and get all options by html tag name in array

browser.element(by.model('user.investmentAmount')).all(by.tagName('option')).
   then(function(items){
        items[2].click(); 
});

answered Apr 19 '17 at 14:50

Surendra Jnawali

3,190
5
28
44

Thanks for your reply, I eventually got a different drop down menu on the same page to work using: element(by.model('user.sourceOfFunds')).sendKeys('Savings'); The above line works fine for me but when I try element(by.model('user.investmentAmount')).sendKeys('50-100'‌); or element(by.model('user.investmentAmount')).sendKeys('100k'); I get element not visible. Not sure why one works and not the other – Edmond Apr 20 '17 at 08:59
It's better to open other question if you have unrelated to it...but for this question either resolve it or close...so that in future other can get benefits from it,,, – Surendra Jnawali Apr 20 '17 at 13:56

Can't select element from drop down menu E2E testing using Protractor

3 Answers3