Protractor - Wait for multiple elements

Question

I am trying to wait for multiple elements on the page, I don't know how many there could be but there will be at least one. I understand waiting for a single element using the following, which works fine.

var EC = protractor.ExpectedConditions;
    browser.wait(EC.presenceOf(element(by.css("h3[title='Test Form']"))), 10000);
    expect(element(by.css("h3[title='Test Form']")).isPresent()).toBeTruthy();

I wanted to change this slightly to wait for multiple elements and so tried the below (adding .all to element).

var EC = protractor.ExpectedConditions;
    browser.wait(EC.presenceOf(element.all(by.css("h3[title='Test Form']"))), 10000);
    expect(element.all(by.css("h3[title='Test Form']")).isPresent()).toBeTruthy();

Unfortunately when I try this I get

Cannot read property 'bind' of undefined

Any help on this would be very much appreciated.

p.s. Newbie to Protracor and its quirks.

Answer 1

presenceOf expects a single element (ElementFinder) to be passed in.

You would need a custom Expected Condition to wait for. If I understand you correctly, you need to wait until N elements are present. Here is how you can do it:

function waitForCount (elementArrayFinder, expectedCount) {
    return function () {
        return elementArrayFinder.count().then(function (actualCount) {
            return expectedCount === actualCount;  // or <= instead of ===, depending on the use case
        });
    };
};

Usage:

var forms = element.all(by.css("h3[title='Test Form']"));
browser.wait(waitForCount(forms, 5), 10000);