I have a problem with e2e testing a web application in Internet Explorer 9 with protractor (1.0.0-rc4). The top bar has a dropdown menu that is implemented with a bootstrap popover and looks like this:
<div ng-class="{ in: isOpen(), fade: animation() }" class="popover bottom popover--default in" is-open="tt_isOpen" animation="tt_animation" placement="bottom" content="r6-operator-toolbar-popover" title="" r6-directive-popover-popup="" style="display: block; top: 29px; left: 1395.7px;">
<div class="arrow-cover"><div class="arrow"></div></div>
<h3 ng-show="title" ng-bind="title" class="popover-title ng-binding ng-hide"></h3>
<div r6-popover-content="" class="popover-content"><ul class="r6nav r6nav--popover" r6-operator-toolbar-popover="">
<li>
<ul r6-localization-languageselector="">
<!-- ngRepeat: language in languages --><li ng-class="language.key == languages[selected].key ? 'is-selected' : null" ng-repeat="language in languages" class="ng-scope">
<a ng-click="language.key == languages[selected].key ? null : loadLanguage(language.key)" href="" class="ng-binding">DE</a>
</li><!-- end ngRepeat: language in languages --><li ng-class="language.key == languages[selected].key ? 'is-selected' : null" ng-repeat="language in languages" class="ng-scope is-selected">
<a ng-click="language.key == languages[selected].key ? null : loadLanguage(language.key)" href="" class="ng-binding">EN</a>
</li><!-- end ngRepeat: language in languages -->
</ul>
</li>
<li>
<a ng-click="changePassword()" href=""><span class="r6icon-size1color3 r6icon-configure"></span>Change password</a>
</li>
<li>
<a ng-click="logout()" href=""><span class="r6icon-size1color3 r6icon-logout"></span>Logout</a>
</li>
</ul></div>
</div>
The code is the template that is loaded once the popover is shown. The idea is to click on the logout-link in order to log out the user. The way I have it in my test is as follows:
it('should logout user', function() {
userToolBarPage.btnToolbar.click();
var elementToFind = '//a[contains(text(), "Logout")]';
browser.wait(function() {
var isThere = ptor.isElementPresent(elementToFind);
expect(ptor.isElementPresent(elementToFind)).toBeTruthy();
ptor.findElement(protractor.By.xpath(elementToFind)).click();
return isThere;
}, 15000);
});
The userToolBarPage.btnToolbar just clicks on the menu to open the popover and display the HTML above. Afterwards it looks for the link and clicks it. This works in Firefox and Chrome, but I can not get IE9 to click on the button. It opens the popover, but it never seems to find the button, no matter what I try.
I know the code is not very clean right now, but this is still a trial and error process for me and I can't get any results, no matter what I try. If anyone has a suggestion how I could do this, please feel free to share it.