如何使用Protractor打开Bootstrap UI下拉菜单

Question

使用angular 1.5，ui bootstrap 0.14.3，bootstrap 3.2.0&量角器3.2.2

我正在尝试使用Protractor对angular/bootstrap ui应用程序进行e2e测试。演示其中一个规范需要测试打开一个bootstrap ui下拉列表，然后单击其中包含的元素。它不起作用-点击了测试链接，但下拉列表从未打开（我通过将警报绑定到元素的onclick事件来验证点击-警报弹出，但Protractor抛出了意外警报异常…）。在尝试了这里和这里提到的方法后，我不知所措。

HTML

<div dropdown class="dropdown">
    <span>
        <a id="user-link" dropdown-toggle>click me</a>
    </span>
    <ul class="dropdown-menu">
        <li>
            <a href="/link1">link1</a>
        </li>
        <li>
            <a href="/link2">link2</a>
        </li>
    </ul>
</div>

Protractor规格

it('opens the user menu', function () {
    var userLink = element(by.id('user-link'));
    expect(userLink.getInnerHtml()).toEqual('click me');
    userLink.click();
    var link = element(by.css('[href="/link1"]'));
    expect(link.isDisplayed()).toBeTruthy();
});

正如其中一个链接所建议的，我已经尝试在wait()函数上使用几个不同的变体，超时时间高达20秒。我尝试过browser.sleep()，但超时时间相同。两者都不起作用。

这可能是不言而喻的，但当手动单击下拉列表时，它会立即打开。

Answer 1

我可以共享我的工作代码，它与您的代码非常相似：

it('should change language between english and spanish', function() {
    //Get dropdown
    var languageSwitcher = element(by.css("div[uib-dropdown]"));
    //Change language to spanish by clicking button with id toSpanish
    languageSwitcher.element(by.id('languageSwitcher')).click();
    languageSwitcher.element(by.id('toSpanish')).click();
    //Some expects about Spanish language
    //Change language to english by clicking button with id toEnglish
    languageSwitcher.element(by.id('languageSwitcher')).click();
    languageSwitcher.element(by.id('toEnglish')).click();
    //Some expects about English language
});

html代码如下所示：

<div class="btn-group pull-right" uib-dropdown keyboard-nav>
    <button id="languageSwitcher" type="button" class="btn btn-primary" uib-dropdown-toggle>
        {{"language" | translate}} <span class="caret"></span>
    </button>
    <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
        <li role="menuitem"><a id="toSpanish" href="#" ng-click="changeLanguage('es')">{{"spanish" | translate}}</a></li>
        <li role="menuitem"><a id="toEnglish" href="#" ng-click="changeLanguage('en')">{{"english" | translate}}</a></li>
    </ul>
</div>

我为每个组件添加了id，以便使用by.id功能轻松选择它们。

Answer 2

我也遇到了同样的问题，但只需在"下拉切换"中添加"id"就可以让它正常工作。在添加id="fileMenu"属性之前，它一直不起作用。

  <li  class="btn-group" dropdown>
  <a id="fileMenu" dropdownToggle type="button" class="dropdown-toggle" href="#">File<span class="caret"></span></a>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" (click)="new()" href="#">New</a></li>
    <li role="menuitem"><a class="dropdown-item" (click)="open()" href="#">Open</a></li>
    <li role="menuitem"><a class="dropdown-item" (click)="save()" href="#">Save</a></li>
  </ul>
</li>

我的项目设置：

1. 角度：5.0.3
2. 晶状体：5.1.2