Select a particular option in Protractor

Question

I'm a new born QA and I'm trying here to write a Protractor script to select an option from a dropdown. There are 2 options in my dropdown and I'm trying to select it from number.

Here is the code I'm using.

var selectDropdownbyNum = function ( element, optionNum ) {
    if (optionNum){
    var options = element.findElements(by.tagName('entity.company_id as entity.company_name for entity in entities'))   
      .then(function(options){
        options[1].click();
      });
    }
  };

Option 2 is selected by default when the page loads. What I need is to select option 1 from the dropdown. But, my code doesn't do that.

Here is the code snippet of the select option.

<select required="required" class="form-control empty ng-pristine ng-valid ng-not-empty ng-valid-required ng-touched" name="entity_id" ng-model="invoice.entity_id" ng-options="entity.company_id as entity.company_name for entity in entities" ng-required="true" ng-change="entitySelect(invoice.entity_id)">

  <option value="string:568f97841a4885e5de39900e" label="Option Global">Option Global</option>

  <option selected="selected" value="string:568f976a1a4885e5de39900d" label="Option Computer Studies">OptionComputer Studies</option>

</select>

Thanks in advance :)

Take a look at http://stackoverflow.com/questions/28723419/select-option-abstraction. Very convenient. — alecxe, Mar 08 '16 at 15:23

score 2 · Answer 1 · answered Mar 08 '16 at 12:06

2

var selectDropdownbyNum = function ( dropDown, optionNumber) {

dropDown.click().then(function(){ element.all(by.tagName('entity.company_id as entity.company_name for entity in entities')).first().click(); }); };

answered Mar 08 '16 at 12:06

Optimworks

2,537
17
20

score 1 · Accepted Answer · answered Mar 08 '16 at 05:33

1

Found the perfect answer.

element.all(by.css('cssSelector of the dropdown')).each(function (eachElement, index) 
    {
       eachElement.click();// select the <select>
       browser.driver.sleep(500);// wait for the renderings to take effect
       element(by.css('cssSelector of option want to select')).click();// select the first md-option
       browser.driver.sleep(500);// wait for the renderings to take effect
   });

This works like calm :)

answered Mar 08 '16 at 05:33

Manuli

1,203
4
20
43

Instead of `browser.driver.sleep(500)` you could use `browser.waitForAngular()`. – Richh94 Jul 28 '17 at 14:58
It's a bad practice to use browser.sleep() which will prolong test running time. It's recommended to use browser.wait() – Coolbreeze Apr 02 '18 at 10:20

score 0 · Answer 3 · answered Nov 06 '17 at 17:03

Got the perfect answer

var selectOption = element(by.model("invoice.entity_id")).all(by.tagName('option')); selectOption.get(1).click();

We can also get all the option value by each function

selectOption.each(function(item,index){

   //Resolve the promise
  item.getText().then(function(data){
       console.log(data+" "+index);
  });

});

Select a particular option in Protractor

3 Answers3