Protractor: Proper Way of Selecting an Option from a Dropdown List

[demisx]

Hi. What's the current best way of doing this in protractor tests:

select('orderProp').option('Alphabetical')

for

<select ng-model="orderProp">
   <option value="name">Alphabetical</option>
   <option value="age">Newest</option>
 </select>

This was taken from the tutorial on http://docs.angularjs.org/tutorial/step_04 (last test at the end of the page). I am trying to convert e2e tests to protractor as an exercise and can't figure out a clean way to select an option from a drop down list. Some examples found on the web seemed too verbose and, perhaps, outdated. Thank you.

[khepin]

I usually do something like:

var select = element.one(by.model('orderProp'));
select.$('[value="age"]').click();

[demisx]

Sorry, not following the element.one(...) call. What is method "one"? Maybe:

select = element(by.model('orderProp'));`?

[khepin]

YES! this is absolutely what I meant! Sorry for the confusion.

var select = element(by.model('orderProp'));
select.$('[value="age"]').click();

[demisx]

No worries! I thought there was some secret method I wasn't aware of. :) Thank you for the input. I'll give it a try in am.

[demisx]

Worked great! Thank you so much.

Just a recap for others. Until protractor implements a more natural way of selecting an option from a dropdown list, use @khepin method below. This is the cleanest one I've found so far.

Given this dropdown:

<select ng-model="orderProp">
   <option value="name">Alphabetical</option>
   <option value="age">Newest</option>
 </select>

And I want to select "Newest" option in my spec, do this:

// JavaScript
element(by.model('orderProp')).$('[value="age"]').click();

// CoffeeScript
element(By.model('orderProp')).$('[value="name"]').click()

[SeleniumShooters]

Hi there, the solution you have suggested above is not working for me and my dropdown element is not having model attribute. it has id locator and under that i have some options.

[aldorianmode]

Hi,

I tried the way @demisx proposed, but wasn't working fine completely. I modified what he recommends dividing it in two steps as:

element(by.model('orderProp')).click();
$('[value="age"]').click();

Im not shure if the first step is necessary...
Try this @SeleniumShooters, this is working for me 10/10.

[adnanghaffar07]

I read this solution from somewhere and it is perfect that selecting by option number, and therefore wrote a method that takes an element and the optionNumber, and selects that optionNumber. If the optionNumber is null it selects nothing (leaving the dropdown unselected).

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

[vishwabharatraju]

guys use this command

select obj=new select(driver.findElement(by.xpath("//select[@class='gwt-ListBox']")));
obj.selectbyvisibleText(" ");
guys as per your convenience use locators and depends on situation use selectbyvalue or selectbyindex

[dhanrajpru]

It is really working thanku @demisx
// JavaScript
element(by.model('orderProp')).$('[value="age"]').click();

[anjurawatkathait]

Can anyone tell me that for jasemine language in protractor, this will be the code of selecting one option out of dropdown list.
element.findElements(by.tagName('option')) ,will this be used inplace of "....element.all()..."????
var selectDropdownbyNum = function(element, optionNum) {
if (optionNum) {
var options = element.all(by.tagName('option'))
.then(function(options) {
options[optionNum].click();
});

[Asargiotakis]

@123-anju it didn't worked for me. i used element.all(...)...

[vishwabharatraju]

Thank you using my code

On Wed, Jul 11, 2018, 10:36 PM Asargiotakis [e-mail]
wrote:

@123-anju https://github.com/123-anju it didn't worked for me. i used
element.all(...)...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/protractor/issues/600#issuecomment-404242674,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AbsBJwa_aFF-g2MSn-wu0I7CfwrlYE2Nks5uFjB9gaJpZM4BoZ_m
.

[thirupathi-d]

YES! this is absolutely what I meant! Sorry for the confusion.

var select = element(by.model('orderProp'));
select.$('[value="age"]').click();

This is perfect!!
works for me /: