如何使用 TypeScript 从 Protractor 的自动完成下拉列表中选择 select 项？

Question

我有一个地址下拉列表。如果我输入的地址未列出，则有一个页脚选项 'Address not listed? Show more ?' 当我 select 该选项时，它让我可以选择手动输入我的地址。我想要 select 那个 'Address not listed? Show more ?' 选项。

在我的代码中，我有以下支持方法select 索引地址。但是我想 select 按给定的文本。帮助非常感谢。谢谢

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

dropdown: ElementArrayFinder, 类似于 element.all(by.css('.currentAddress-field hmy-address-autocomplete'))

我的标签与下面类似

<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>

Answer 1

大多数情况下，

cssContainingText 是按文本查找元素的最简单方法。

在你的情况下它看起来像（注意字符串开头和结尾的空格）

//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 ']");

如何使用 TypeScript 从 Protractor 的自动完成下拉列表中选择 select 项？

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

typescript

protractor