使用量角器选择一个uib下拉选项

Question

我正在测试一个uib-dropdown（https://angular-ui.github.io/bootstrap/#/dropdown）的DOM，但无法从下拉列表中选择特定的选项。

采取这种渲染HTML片段，例如，我要选择Assets下拉选项：

<tr> 
 
<td> 
 
<div id="drpAccount"> 
 
    <div class="btn-group dropdown open" uib-dropdown=""> 
 
\t <button id="single-button" style="color:white;" type="button" class="btn btn-xs btn-link dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="true"> 
 
\t  Account : <b class="ng-binding">Assets</b> <span class="caret"></span> 
 
\t  
 
\t </button> 
 
\t <ul class="dropdown-menu accounts-dropdown" uib-dropdown-menu="" aria-labelledby="simple-dropdown"> 
 
\t  <li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope"> 
 
\t \t <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Assets</a> 
 
\t  </li><li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope"> 
 
\t \t <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Equity</a> 
 
\t  </li><li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope"> 
 
\t \t <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Liabilities</a> 
 
\t  </li> 
 
\t </ul> 
 
    </div> 
 
</div> 
 
</td> 
 
</tr>

这个原始项目标记：

<td> 
 
<div id="drpOrg" style="height:18px;z-index:9999;"> 
 
    <div class="btn-group" uib-dropdown style="left:2px;top:2px;"> 
 
\t <button id="single-button" type="button" class="btn btn-xs btn-link" uib-dropdown-toggle> 
 
\t  Organization : <b>{{ctrl.selectedRoot.DESCRIPTION}}</b> <span class="caret"></span> 
 
\t </button> 
 
\t <ul class="dropdown-menu org-dropdown" uib-dropdown-menu aria-labelledby="simple-dropdown"> 
 
\t  <li ng-repeat="rootChoice in ctrl.rootOptions"> 
 
\t \t <a ng-click="ctrl.moreFuncs(rootChoice)">{{rootChoice.DESCRIPTION}}</a> 
 
\t  </li> 
 
\t </ul> 
 
    </div> 
 
</div> 
 
</td>

我有这样的javascript代码，使用Protractor端对端测试框架：

this.selectBalSheetDropdown = function (searchObj, drpIndex) { 
 

 
     var elem = element(by.id('drpAccount')); 
 
     var elementSwitcher = elem.element(by.css("div[uib-dropdown]"));   
 
     elementSwitcher.element(by.css("button[uib-dropdown-toggle]")).click(); // OPENS DROPDOWN FINE ! 
 
     
 
     // ***** HOW TO GET DROPDOWN VALUE FOR "Assets" option, as an example ?? 
 
     //elementSwitcher.element(by.css("a[value=Assets]")).click(); 
 
    };

上选择特定的下拉选项的任何建议表示赞赏。

问候， 鲍勃

Answer 1

我刚刚发现使用by.linkText()这个解决办法，但我接受其他方式：

this.selectBalSheetDropdown = function (searchObj, drpIndex) { 

    var elem = element(by.id('drpAccount')); 
    var elementSwitcher = elem.element(by.css("div[uib-dropdown]"));   
    elementSwitcher.element(by.css("button[uib-dropdown-toggle]")).click(); 

    // *** using by.linkText() works as well *** 
    elementSwitcher.element(by.linkText('Liabilities and Equity')).click(); 

};