Selecting an element from a drop-down with Protractor

Question

I am having serious trouble using the regular selenium webdriver on one page of my application which is build with Angular. I have added the dependency of ngwebdriver in my pom.xml and so far I have solved some of the issues. Only with the drop-down, I still haven't figured out how to do this. This is the drop-down I am talking about:

 <d3-data-list _nghost-c8="" ng-reflect-data-source="[object Object]" ng-
reflect-html-id="documents_glossary_entityPicke" ng-reflect-allow-blank-
option="true" ng-reflect-blank-option-text="All entities" ng-reflect-default-
caption="Choose an entity"><div _ngcontent-c8="" class="dropdown d3-data-
list" id="documents_glossary_entityPicker">
  <button _ngcontent-c8="" aria-expanded="true" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" id="documents_glossary_entityPicker_button">
All entities
<span _ngcontent-c8="" class="caret" 
id="documents_glossary_entityPicker_caret"></span>
  </button>
  <ul _ngcontent-c8="" aria-labelledby="dropdownMenu1" class="dropdown-menu" 
ng-reflect-infinite-scroll-handle-in-progress="false" 
id="documents_glossary_entityPicker_dropdown">
    <!--bindings={
      "ng-reflect-ng-if": "true"
}--><li _ngcontent-c8="">
      <a _ngcontent-c8="" 
id="documents_glossary_entityPicker_blank_option">All entities</a>
</li>

then the options from the drop-down are like this:

</li><li _ngcontent-c8="">
  <a _ngcontent-c8="" id="documents_glossary_entityPicker_option_2">Entity three</a>
</li>

The problem is that the order of the elements in my drop-down is not maintained because if an element (entity) is edited on another page then it will be at the bottom of the list. So I can never really know where exactly my element is in the drop-down list.

Is there something like browser.findElement(ByAngular.buttonText("text")) which I can use in my case? Thanks.

Answer 1

I guess you're looking for the filter() or .reduce() possibilities.

For .reduce() check the example here

For .filter() your code should look something like this:

element.all(by.css('ul li a')).filter(function (elm) {
    return elm.getAttribute('value').then(function (text) {
        return text === "TheValueYouLookFor";
    });
}).first().click();

I didn't test this .filter myself, but it's pretty straight forward from the Protractor documentation .