Protractor Iterate through ng-click

Question

Protractor Iterate through ng-click

I have a following code

<div class="btn btn-success form-control ng-binding" ng-click="test(uid)">
                First
            </div>
    <div class="btn btn-success form-control ng-binding" ng-click="test(uid)">
                Second
            </div>
<div class="btn btn-success form-control ng-binding" ng-click="test(uid)">
                Third
            </div>

How do i iterate elements based on ng-click to check for a specific text value(First or Second or Third) in Protractor?I tried the following but i get undefined for uids.length. What is wrong here?

var uids = element.all(by.css('[ng-click="test(uid)"]'));
for(var i=0;i<uids.length;i++)
console.log(uids.get(i).getText());

javascript
angularjs
protractor

Answer 1

The problem is element.all() returns an ElementArrayFinder rather than a simple array. If you look at the linked documentation you'll see some functions that allow you to easily interact that data structure. I believe you want to use the each() function like so:

element.all(by.css('[ng-click="test(uid)"]')).each(function(element, index) {
  element.getText().then(function (text) {
    console.log(text);
  });
});

Also worth noting that the getText() function, like nearly all functions in Protractor, returns a promise and therefore needs to be resolved before you can access the value you really want.