Question

我有这样的下拉菜单：

PROJECTS v
         View Projects
         Add Project

我想要量角器点击＆＃34;添加项目＆＃34;元件。要执行此操作，用户必须先单击向下箭头（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>

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

Answer 1

protractor无法点击不可见的元素 - 因为真正的用户不能。＆＃34;添加项目＆＃34;可以通过文本，索引或依赖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

这就是我在量角器网站的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

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

2 个答案: