How Can I Open a Bootstrap-UI Dropdown with Protractor

Question

Using angular 1.5, ui-bootstrap 0.14.3, bootstrap 3.2.0 & protractor 3.2.2

I'm trying to use Protractor for e2e testing of an angular/bootstrap-ui application. Demonstrating one of the specs requires the test to open a bootstrap-ui dropdown and click an element contained therein. It's not working - the test link is clicked, but the dropdown never opens (i verified the click by binding an alert to the element's onclick event - the alert popped but Protractor threw an Unexpected Alert Exception...). After trying the approaches mentioned here and here, i'm at a loss.

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 spec

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();
});

As one of links suggests, i've tried using a couple difference variants on wait() function with the timeout as high as 20 seconds. I've tried browser.sleep() with the same timeout. Neither worked.

It probably goes without saying, but the dropdown opens immediately when it is clicked manually.

Try adding a blank href to the dropdown-toggle anchor element: <a href></a> — Rob J
– Rob J, Commented Apr 15, 2016 at 0:57

hmartos · Accepted Answer · 2016-05-29 20:01:30Z

2

I can share my working code, that is pretty similar to yours:

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
});

And the html code looks like this:

<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>

I added ids to each components to select them easily with by.id function.

answered May 29, 2016 at 20:01

hmartos

9192 gold badges10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bob.mazzo Over a year ago

helpful post, but why wasn't it chosen as the answer ?

cgu · Accepted Answer · 2018-03-12 18:29:43Z

0

I had the same problem, but managed to get it working just by adding 'id' to the 'dropdown-toggle'. Until I added the id="fileMenu" attribute, it didn't work.

  <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>

My project setup:

Angular: 5.0.3
Protractor: 5.1.2

answered Mar 12, 2018 at 18:29

cgu

411 silver badge7 bronze badges

Collectives™ on Stack Overflow

How Can I Open a Bootstrap-UI Dropdown with Protractor

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related