Транспортира: как нажать элемент меню из выпадающего списка меню

Question

У меня есть выпадающее меню, как это:

PROJECTS v 
     View Projects 
     Add Project 

Я хочу транспортир, чтобы нажать «Добавить проект» элемент. Для этого пользователю сначала нужно щелкнуть стрелку (символ v), чтобы показать 2 вспомогательных элемента (Просмотреть проекты, Добавить проект).

является код:

<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. Может транспортир нажмите на «Добавить проект» ссылку, прежде чем нажать белую стрелку? (Пользователь не может)

2. Как щелкнуть этот элемент (Add Project) - Див НСБ нет ID, отличается только CSS - я должен сделать это

   element(by.css('.menuButtonClicked('/project/add/step0')')) 
   

Answer 1

protractor не может нажать невидимый элемент - как настоящий пользователь не может. «Добавить проект» можно найти либо по тексту, либо по индексу, либо на основе ng-click.

Давайте, например, воспользуемся by.xpath. Здесь я нахожу кнопку со стрелкой, щелкнув по нему и получить следующий ul одноуровневый, а затем с помощью last(), чтобы получить в списке последний li:

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

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

Answer 2

Это, как я делаю это в тесте э2э для транспортир сайт:

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