量角器：如何从下拉列表菜单中单击菜单元素答案

【问题标题】：Protractor: how to click menu element from dropdown list menu量角器：如何从下拉列表菜单中单击菜单元素
【发布时间】：2015-01-12 11:42:57
【问题描述】：

我有这样的下拉菜单：

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>

量角器可以在单击白色箭头之前单击“添加项目”链接吗？（用户不能）
如何单击此元素（添加项目） - div nas 没有 ID，仅由 CSS 不同 - 我应该这样做吗
```
element(by.css('.menuButtonClicked('/project/add/step0')'))
```

【问题讨论】：

标签： angularjs testing drop-down-menu protractor end-to-end

【解决方案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();

【讨论】：

【解决方案2】：

这就是我在量角器网站的 e2e 测试中的做法：

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

【讨论】：

很好，您从菜单项中创建了一个页面对象！