How to chain `element` and `element.all`?

Question

The problem is very similar to this one "More than one element found for locator" warning: I have ng-repeat, inside it I have two divs, with ng-if on them, so only one div is shown. Every div in ng-repeat has equal class login__cell-link.

I need to check value in this divs, so I choose the block with them using

element.all(by.repeater('item in array')).then( allElements => {
  allElements[i].element(by.className('login__cell-link')).getText();
});

The problem is warning:

WARNING - more than one element found for locator By(css selector, .login__cell-link) - the first result will be used

This answer https://stackoverflow.com/a/28464809/4753661 says to use: element.all(by.css("ul.nav button")).first()

But I get error:

[TypeError: allElements[i].element.all is not a function]

How can I chain element and element.all, or are there better solutions to check one div in this case? Thank you.

Answer 1

Use .all() not .element.all() when chaining:

allElements[i].all(by.className('login__cell-link')).first().getText();

By the way, you don't need to resolve the promise explicitly here and can chain it all the way:

element
  .all(by.repeater('item in array'))
  .get(i)
  .all(by.className('login__cell-link'))
  .first()
  .getText();

Shameless self-promotion: if you want to catch this kind of errors early, you can use ESLint static code analysis tool together with eslint-plugin-protractor's correct-chaining rule.