Protractor: "wait" does not work with "element.all"

Question

I am writing Protractor automation tests and have encountered a problem. The wait command does not actually wait for one of the elements in the array. See the example below: I'm trying to wait for the first element after going to a web page.

var category = element.all(by.repeater('category in listCtrl.categories')); var category2 = $$('.category-name.custom-tooltip-link.ng-binding'); var EC = protractor.ExpectedConditions; describe('wait for the first category', function() { it('wait', function() { browser.get('http://www.deep.mg/'); browser.wait(EC.visibilityOf(category.get(0)), 20000); browser.wait(EC.visibilityOf(category2.get(0)), 20000); }); }); 

But the test fails with the following error: Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator by.repeater("category in listCtrl.categories") Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator by.repeater("category in listCtrl.categories") .

The error does not depend on the type of locator, because it appears for both: "by.repeater" and "by.css". The selectors are fine, test passes after adding the "sleep" command:

 var category = element.all(by.repeater('category in listCtrl.categories')); var category2 = $$('.category-name.custom-tooltip-link.ng-binding'); var EC = protractor.ExpectedConditions; describe('wait for the first category', function() { it('wait', function() { browser.get('http://www.deep.mg/'); browser.sleep(15000); browser.wait(EC.visibilityOf(category.get(0)), 20000); browser.wait(EC.visibilityOf(category2.get(0)), 20000); category.count().then(function(count1) { console.log(count1); //count returns 5, which means there are actually elements in array }); category2.count().then(function(count2) { console.log(count2); }); }); }); 

Also, the timeout parameter does not help, it just ignores it and does not work immediately.

So the question is, how to wait for a specific element of an array? Am I missing something? Thanks.

Answer 1

Create your own expected condition to expect the number of elements in the array to be greater than 0:

 function presenceOfAll(elementArrayFinder) { return function () { return elementArrayFinder.count(function (count) { return count > 0; }); }; } 

Using:

 browser.wait(presenceOfAll(category), 10000); browser.wait(presenceOfAll(category2), 10000); 

It works for me.

Answer 2

element.all(by.repeater('category in listCtrl.categories')).get(0) ALWAYS element.all(by.repeater('category in listCtrl.categories')).get(0) error if there are no elements for 'get' (source: element.js ElementArrayFinder.prototype.get)

You can do:

 browser.wait(function() { return category.count().then(function(catCount) { if (catCount > 0) { return EC.visibilityOf(category.get(0)); } } }, 20000); 

Or you could just wait until all the elements are visible and he will do what you ask him to do (because he will wait until the promise “all” is fully resolved, and not just break out when it appears first ):

 browser.wait(EC.visibilityOf(category), 20000);