How to select item from autocomplete drop-down list in Protractor using TypeScript?

Question

I have an address drop-down list. If the address that I typed is not listed then there is a footer option 'Address not listed? Show more ?' When I select that option it's giving me an option to manually enter my address. I want to select that 'Address not listed? Show more ?' option.

In my code, I have the following support method to select the address by index. But I want to select by a given text. Helps much appreciated. Thanks

public static async chooseDropdownItemByIndex(dropdown: 
  ElementArrayFinder, index: number) {
  const item = await dropdown.$$('li').get(index);
  await ActionUtil.waitForElementToBeInteractable(item);
  return item.click();
}

the dropdown: ElementArrayFinder, is similer to element.all(by.css('.currentAddress-field hmy-address-autocomplete'))

my tags are similar to as below

<hmy-address-autocomplete input-id="currentAddress-input" name="currentAddress" branch="AU" ng-model="vm.model" no-results="vm.toggleEntryMode()" required="" strict="" class="ng-pristine ng-untouched ng-isolate-scope ng-not-empty ng-valid ng-valid-required" style="">
<input type="text" id="currentAddress-input" name="currentAddress" ng-required="vm.required" ng-model="vm.model" ng-keypress="vm.clearSelectedOption()" ng-focus="vm.inputFocused()" placeholder="" autocomplete="off" class="ng-dirty ng-valid-parse ng-not-empty ng-valid-required ng-valid ng-touched" required="required" style=""> 
<hmy-loading-spinner ng-class="{ active: vm.isLoading }" class="" style="">
</hmy-loading-spinner> 
        <hmy-dropdown items="vm.options" item-selected="vm.itemSelected(item)" empty-text="No results" class="ng-isolate-scope">
        <ul ng-class="{open: vm.isOpen}" ng-mouseout="vm.clearCurrentItem()" class="" style=""> 
        <li ng-repeat="item in vm.items" ng-class="{hover: vm.getCurrentItem() === item}" ng-mousedown="vm.selectItem(item)" ng-mouseover="vm.setCurrentItem(item)" class="ng-binding ng-scope" style=""> level 13 Carahers Lane, THE ROCKS  NSW  2000 </li>
        <li ng-repeat="item in vm.items" ng-class="{hover: vm.getCurrentItem() === item}" ng-mousedown="vm.selectItem(item)" ng-mouseover="vm.setCurrentItem(item)" class="ng-binding ng-scope" style=""> level 15 Carahers Lane, THE ROCKS  NSW  2000 </li>
        <li class="footer" ng-transclude="footer" ng-mouseover="vm.clearCurrentItem()">
        <hmy-dropdown-footer ng-click="vm.includePostalAddresses()" ng-if="vm.excludePostal &amp;&amp; vm.hasOptions()" class="ng-scope" style=""> Address not listed? Show more </hmy-dropdown-footer>
         </li>
         </ul> 
         </hmy-dropdown> 
</hmy-address-autocomplete>

DublinDev DublinDev · Accepted Answer · 2019-07-22T07:48:50

cssContainingText is the easiest way to find elements by text most of the time.

In your case it would look like (note the spaces at beginning and end of string)

//cssContainingText
element(by.cssContainingText("hmy-dropdown-footer", " Address not listed? Show more "));
//xpath
element(by.xpath("//hmy-dropdown-footer[text()=' Address not listed? Show more ']");

How to select item from autocomplete drop-down list in Protractor using TypeScript?

1 Answers