如何使用量角器打开Bootstrap-UI下拉列表

时间:2016-04-14 21:23:24

标签: angularjs twitter-bootstrap protractor angular-ui-bootstrap

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

我正在尝试使用Protractor进行角度/ bootstrap-ui应用程序的e2e测试。演示其中一个规范要求测试打开bootstrap-ui下拉列表并单击其中包含的元素。它不起作用 - 单击测试链接,但下拉永远不会打开(我通过将警报绑定到元素的onclick事件来验证单击 - 警报弹出但Protractor引发了意外警报异常......)。在尝试了herehere提到的方法后,我感到很茫然。

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>

量角器规格

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()。两者都没有。

可能不言而喻,但手动点击后会立即打开下拉列表。

2 个答案:

答案 0 :(得分:2)

我可以分享我的工作代码,这与你的非常相似:

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函数轻松选择它们。

答案 1 :(得分:0)

我遇到了同样的问题,但只是通过添加&#39; id&#39;设法让它工作。进入&#39;下拉切换&#39;。在我添加 id =&#34; fileMenu&#34; 属性之前,它没有用。

  <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. Angular:5.0.3
  2. 量角器:5.1.2