Блог

Главная - Вопросы по программированию - Использование транспортира для выбора выпадающего параметра uib

Использование транспортира для выбора выпадающего параметра uib

#protractor #e2e-testing

#транспортир #e2e-тестирование

Вопрос:

DOM, который я тестирую на основе выпадающего списка uib (https://angular-ui.github.io/bootstrap/#/dropdown ), но возникли проблемы с выбором конкретной опции из выпадающего списка.

Например, взяв этот отображаемый фрагмент HTML, я хочу выбрать 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();
    };

Приветствуются любые советы по выбору конкретного выпадающего варианта.

с уважением, Боб

Ответ №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();

};

Комментарии:

1. Я бы сказал, что это один из лучших подходов — довольно простой и читаемый!