Protractor : 从 Popup 值中选择一个元素答案

【问题标题】：Protractor : Selection of an element from Popup valueProtractor : 从 Popup 值中选择一个元素
【发布时间】：2019-04-13 03:24:17
【问题描述】：

我们有一些文本框需要从弹出列表中选择值。元素和弹窗是这样的：

相关html代码如下：

<div _ngcontent-c6="" class="col px-0">
  <input _ngcontent-c6="" aria-multiline="false" autocapitalize="off" 
    autocorrect="off" class="form-control ng-dirty ng-valid open ng-touched"
    formcontrolname="ESYSITENAME" id="esySiteName" name="" placeholder="" 
    role="combobox" type="text" autocomplete="off" aria-autocomplete="list"
    aria-expanded="true" aria-activedescendant="ngb-typeahead-2-0" 
    aria-owns="ngb-typeahead-2">

  <ngb-typeahead-window class="dropdown-menu show ng-star-inserted" 
    role="listbox" id="ngb-typeahead-2" style="top: 39px; left: 0px;">

    <button class="dropdown-item ng-star-inserted active" role="option"
       type="button" id="ngb-typeahead-2-0">

      <ngb-highlight _ngcontent-c6="" _nghost-c25="" class="ng-star-inserted">
          <span _ngcontent-c25="" class="ngb-highlight ng-star-inserted">
              Bull Run Elementary School
          </span>
      </ngb-highlight>
    </button>

  </ngb-typeahead-window>

</div>

我尝试使用不同的策略选择 Popup 元素，例如：

let EsyNamePopup = $('#ngb-typeahead-2-0 > ngb-highlight > span');
await helpers.waitForElementVisibility(EsyNamePopup);
await helpers.clickWhenClickable(EsyNamePopup);

// or following way:
let EsyNamePopup = element(by.cssContainingText('span', 'Bull Run Elementary School,));
await EsyNamePopup.click();

它们都不起作用，但收到以下错误消息：

NoSuchElementError: No element found using locator: By(css selector, #ngb-typeahead-2-0 > ngb-highlight > span)

有没有更好的策略来选择这些元素？

【问题讨论】：

你可能想看看 hetznercloud 的 protractor-test-helper 中的 waitForWindowCount。然后您可能需要获取该弹出窗口的句柄并切换到它，然后才能单击其中的任何内容。

标签： javascript selenium protractor

【解决方案1】：

我认为您可以在单击弹出选项之前尝试长时间睡眠。如果长时间休眠可以解决你的问题，则证明你的等待函数waitForElementVisibility有问题或者你没有给足够的等待时间。

await $('input#esySiteName').sendKeys('Bull');

await browser.sleep(15000) 

await $('#ngb-typeahead-2-0 > ngb-highlight > span').click()

【讨论】：

【解决方案2】：

您可以按照此处的步骤设置断点并调试代码。 http://www.protractortest.org/#/debugging

可能想要验证 sendkeys 是否会启动 typeahead 弹出窗口，或者是否需要聚焦元素才能做到这一点。

【讨论】：