使用angular 1.5,ui-bootstrap 0.14.3,bootstrap 3.2.0&量角器3.2.2
我正在尝试使用Protractor进行角度/ bootstrap-ui应用程序的e2e测试。演示其中一个规范要求测试打开bootstrap-ui下拉列表并单击其中包含的元素。它不起作用 - 单击测试链接,但下拉永远不会打开(我通过将警报绑定到元素的onclick事件来验证单击 - 警报弹出但Protractor引发了意外警报异常......)。在尝试了here和here提到的方法后,我感到很茫然。
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()
。两者都没有。
可能不言而喻,但手动点击后会立即打开下拉列表。
答案 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>
我的项目设置: