在 uib 下拉菜单中选择元素

Question

我有一个这样的HTML代码。

<div ng-if="!hide" class="dropdown pull-right" uib-dropdown>
    <a uib-dropdown-toggle href="" >
    <div class="btn btn-primary-outline btn-circle btn-xs pull-right comment-button"> 
        <span class="icon icon-chevron-down"></span>
    </div>
    </a>
    <ul class="dropdown-menu " style="text-align: center;" role="menu" uib-dropdown-menu>
        <li role="divider" ng-if="showDelete"><a href="" ng-click="deleteItem($index)">delete </a></li>
        <li role="divider"><a href="" ng-click="Report()"> report</a></li>
    </ul>
</div>

在量角器中使用时遇到 uib 下拉选择问题。我写的代码是这样的：

var dropDown = element(by.css("div[uib-dropdown]"));
dropDown.element(by.css("a[uib-dropdown-toggle]"));
dropDown.element(by.css("a[ng-click=deleteItem($index)]")).click(); 
browser.sleep(5000);

Answer 1

a[ng-click=deleteItem($index)] 实际上是一个 无效的 CSS 选择器 ，您需要 put the attribute value into quotes:

dropDown.element(by.css('a[ng-click="deleteItem($index)"]')).click();

不过，我会选择看起来更具可读性的部分匹配：

dropDown.element(by.css('a[ng-click*=deleteItem]')).click();

其中 *= 表示 "contains"。

或者，您甚至可以使用 "link text" 定位器：

dropDown.element(by.linkText('delete')).click(); 
dropDown.element(by.partialLinkText('delete')).click();

Answer 2

 this.selectMenuOption = function (option) {  //menu item to click
    var dropdown = element(by.className('dropdown pull-right'));        
    dropdown.click();
    dropdown.element(by.tagName('ul')).all(by.tagName('li')).filter(function (elem) {
         return elem.getText().then(function (val) {
             return val.toUpperCase() === option.toUpperCase();
      })
   }).first().click();
}

在 uib 下拉菜单中选择元素

selecting element in uib-dropdown menu

angularjs

angular-ui-bootstrap

protractor

gulp-protractor