使用 Protractor select uib-dropdown 选项

Question

DOM 我正在针对 uib-dropdown (https://angular-ui.github.io/bootstrap/#/dropdown ) 进行测试，但在 select 从下拉列表中选择特定选项时遇到问题。

以这个呈现的 HTML 片段为例，我想 select Assets 下拉选项：

<tr>
<td>
<div id="drpAccount">
    <div class="btn-group dropdown open" uib-dropdown="">
 <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">
     Account : <b class="ng-binding">Assets</b> <span class="caret"></span>
     
 </button>
 <ul class="dropdown-menu accounts-dropdown" uib-dropdown-menu="" aria-labelledby="simple-dropdown">
     <li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope">
  <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Assets</a>
     </li><li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope">
  <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Equity</a>
     </li><li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope">
  <a ng-click="ctrl.selectOption(accountChoice)" style="font-family:Arial;" class="ng-binding">Liabilities</a>
     </li>
 </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;">
 <button id="single-button" type="button" class="btn btn-xs btn-link" uib-dropdown-toggle>
     Organization : <b>{{ctrl.selectedRoot.DESCRIPTION}}</b> <span class="caret"></span>
 </button>
 <ul class="dropdown-menu org-dropdown" uib-dropdown-menu aria-labelledby="simple-dropdown">
     <li ng-repeat="rootChoice in ctrl.rootOptions">
  <a ng-click="ctrl.moreFuncs(rootChoice)">{{rootChoice.DESCRIPTION}}</a>
     </li>
 </ul>
    </div>
</div>
</td>

我有这个 javascript 代码，使用 Protractor e2e 测试框架：

 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();
    };

如有任何关于 select 特定下拉选项的建议，我们将不胜感激。

此致，鲍勃

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();

};

使用 Protractor select uib-dropdown 选项

Using Protractor to select a uib-dropdown option

protractor

e2e-testing