How to perform Protractor testing in md-option

Question

I have the code in angular which is

<md-input-container> 
  <label>Country </label>
    <md-select name="country" ng-model="country"required >
     <md-optgroup label="Select Country">
      <md-option ng-repeat="item in countryList"  ng-value="item" >
                 {{item.countryName}}
         </md-option>
       </md-optgroup> 
     </md-select> 
</md-input-container>

and in have used the code in Protractor as following

 element(by.model("country")).click();
 browser.sleep(2000);
 element.all(by.repeater("item in countryList").row('1')).click();

and I am always getting the game error as

Failed: element not visible

in the code the element(by.model("country")).click() is working fine but not selecting the md-option in popup window please help.

Answer 1

Try with below code (You should get 1st element selected.

 element(by.model("country")).click();
 browser.sleep(2000);
 element.all(by.repeater("item in countryList").get(1)).click();

If still facing issue You can try to scroll till that element.

         element(by.model("country")).click();
         browser.sleep(2000);
         var elementToSelect = element.all(by.repeater("item in countryList").get(1));
         browser.executeScript('arguments[0].scrollIntoView(true)',elementToSelect.getWebElement());
         elementToSelect.click();