James Be James Be - 4 months ago 24
AngularJS Question

Protractor not able to count links in a list (li)

This is my first message, basically because is the first time that I have not been able to find the answer to my question.

I am trying to count the number of li elements in a dropdown. Each

<li> has a
` link. Here is the HTML code:



<div ko-dropdown="ko-dropdown" ng-keyup="onKeyup($event)" ng-keydown="onKeydown($event)" class="dropdown ng-isolate-scope" ta-items="languages" ta-value="language" ta-onselect="select(lang)">
<div ng-click="toggle()" ng-class="{'is-open': open}" class="dropdown__toggle dropdown__toggle--top">English</div>
<ul ko-drop-menu="ko-drop-menu" ng-mouseleave="onMouseLeave($event)" class="dropdown__menu">
<!-- ngRepeat: item in items track by $index -->
<li ko-drop-item="ko-drop-item" ng-repeat="item in items track by $index" ng-mouseenter="onMouseEnter($event, item)" ng-click="select($event, item)" ng-class="{'is-active': item.selected}" class="dropdown__item ng-scope is-active"><a class="dropdown__link ng-binding ng-scope" href="" ng-bind="::item[label]" data-value="en">English</a>
</li>
<!-- end ngRepeat: item in items track by $index -->
<li ko-drop-item="ko-drop-item" ng-repeat="item in items track by $index" ng-mouseenter="onMouseEnter($event, item)" ng-click="select($event, item)" ng-class="{'is-active': item.selected}" class="dropdown__item ng-scope"><a class="dropdown__link ng-binding ng-scope" href="" ng-bind="::item[label]" data-value="fi">Suomi</a>
</li>
<!-- end ngRepeat: item in items track by $index -->
<li ko-drop-item="ko-drop-item" ng-repeat="item in items track by $index" ng-mouseenter="onMouseEnter($event, item)" ng-click="select($event, item)" ng-class="{'is-active': item.selected}" class="dropdown__item ng-scope"><a class="dropdown__link ng-binding ng-scope" href="" ng-bind="::item[label]" data-value="sv">Svenska</a>
</li>
<!-- end ngRepeat: item in items track by $index -->
<li ko-drop-item="ko-drop-item" ng-repeat="item in items track by $index" ng-mouseenter="onMouseEnter($event, item)" ng-click="select($event, item)" ng-class="{'is-active': item.selected}" class="dropdown__item ng-scope"><a class="dropdown__link ng-binding ng-scope" href="" ng-bind="::item[label]" data-value="no">Norsk</a>
</li>
<!-- end ngRepeat: item in items track by $index -->
<li ko-drop-item="ko-drop-item" ng-repeat="item in items track by $index" ng-mouseenter="onMouseEnter($event, item)" ng-click="select($event, item)" ng-class="{'is-active': item.selected}" class="dropdown__item ng-scope"><a class="dropdown__link ng-binding ng-scope" href="" ng-bind="::item[label]" data-value="de">Deutsch</a>
</li>
<!-- end ngRepeat: item in items track by $index -->
</ul>
</div>





The correct number of elements that protractor should return is 5 but when looking for the number of elements I am getting always 10.

I am using this piece of code to call but as said before I always get 10 even combining with dropdown__link, etc:

`elements.all(by.css('.dropdown__menu .dropdown__item')).count()`

Answer

Make you selector more specific:

div[ta-items=languages] ul.dropdown__menu > li.dropdown__item

Or, by chaining element and element.all and by.repeater:

var languageMenu = element(by.css("div[ta-items=languages]"));
var languages = languageMenu.all(by.repeater("item in items"));

expect(languages.count()).toEqual(5);
Comments