Protractor: how to click menu element from dropdown list menu

Question

I have dropdown menu like this:

PROJECTS v
         View Projects
         Add Project

I want protractor to click "Add Project" element. To do this user has to click down arrow (v character) first to show 2 sub elemnts (View Projects, Add Project).

The is the code:

<div class="dropdown btn-group open" ng-show="canAccessProjects">
   <button class="dropdown-toggle btn navbar-btn btn-success" ng-class="{'btn navbar-btn btn-success': isActive('/project'), 'btn navbar-btn btn-info': !isActive('/project')}" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><div class="dropdown-option ng-binding" role="menuitem" tabindex="-1" ng-click="menuButtonClicked('/project')">View Projects</div></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><div class="dropdown-option ng-binding" role="menuitem" tabindex="-1" ng-click="menuButtonClicked('/project/add/step0')">**Add Project**</div></li>
    </ul>
</div>

Can protractor click on the "Add Project" link before clicking white arrow? (user can't)
How to click this element (Add Project) - div nas no ID, only differs by CSS - should I do that by
```
element(by.css('.menuButtonClicked('/project/add/step0')'))
```

alecxe · Accepted Answer · 2015-01-12 14:53:14Z

1

protractor cannot click an invisible element - as a real user cannot. "Add Project" can be found either by text, or by index, or relying on the ng-click.

Let's, for the sake of an example, use by.xpath. Here I'm finding the arrow button, clicking it and getting the following ul sibling, then using last() to get the last li in the list:

var button = element(by.id('dropdownMenu1'));
button.click();

button.element(by.xpath('following-sibling::ul/li[last()]/div')).click();

answered Jan 12, 2015 at 14:53

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Andres D · Accepted Answer · 2015-01-12 18:28:45Z

1

This is how I do it in the e2e test for the protractor website:

// Page object
$('.dropdown.open')
   .element(by.linkText(itemName))
   .click();

// And this is how it looks like in the test:
var menu = require('./menu-partial');
menu.dropdown('Protractor Setup').item('Setting Up the Browser')

https://github.com/angular/protractor/blob/master/website/test/e2e/menu-partial.js#L43

answered Jan 12, 2015 at 18:28

Andres D

8,9002 gold badges29 silver badges31 bronze badges

1 Comment

alecxe Over a year ago

Nice, you made a page object out of the menu items!

Collectives™ on Stack Overflow

Protractor: how to click menu element from dropdown list menu

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related