CODEWITHSUNDEEP
angularjstestingdrop-down-menuprotractorend-to-end
pc131
pc131

Reputation: 53

Protractor: how to click menu element from dropdown list menu

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>
  1. Can protractor click on the "Add Project" link before clicking white arrow? (user can't)

  2. 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')'))

Upvotes: 1

Views: 6754

Answers (2)

Andres D
Andres D

Reputation: 8900

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

Upvotes: 1

alecxe
alecxe

Reputation: 473833

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

Upvotes: 1

Related Questions