ExpectedCondition methods should support element.all().first()

[marklagendijk]

The ExpectedConditions methods are very nice when testing stuff outside of Angular. However, there is a limitation. Currently it is impossible to wait for the first element matching a certain selector.

I would expect the following to work:

function waitForElementByLocator(locator, timeout){
    var elem = element.all(locator).first();
    var isClickable = protractor.ExpectedConditions.elementToBeClickable(elem);
    browser.wait(isClickable, timeout, 'Waiting for element  \'' + locator + '\' timed out');
    return elem;
}

// There are multiple .myElement elements, we want to click the first one
waitForElementByLocator(by.css('.myElement')).click();

However, this fails if .myElement is not present at the moment the wait is started. We get an error:

Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator LOCATOR

It does work when we use element(locator) instead of element.all(locator).first():

function waitForElementByLocator(locator, timeout){
    var elem = element(locator);
    var isClickable = protractor.ExpectedConditions.elementToBeClickable(elem);
    browser.wait(isClickable, timeout, 'Waiting for element  \'' + locator + '\' timed out');
    return elem;
}

// There are multiple .myElement elements, we want to click the first one
waitForElementByLocator(by.css('.myElement')).click();

However, when we do this, we get warnings about the fact that there are multiple matches:

WARNING - more than one element found for locator LOCATOR - the first result will be used.

I see two possible solutions for this:

1. Prevent / swallow the Index out of bound exception in the methods.
2. Support passing an ArrayElementFinder to the methods. E.g: protractor.ExpectedConditions.elementToBeClickable(element.all(by.css('.myElement')))

[marklagendijk]

If you are encountering the same issue you use the following terribly ugly and hacky workaround:

var _ = require('lodash');
console.log = _.wrap(console.log, function(log){
    var messages = _.slice(arguments, 1);
    if(!_.some(messages, message => _.includes(message, 'more than one element found for locator'))){
        log.apply(console, messages);
    }
});

[mradionov]

I was able to workaround this by adding custom expected condition, which resolves when elements count gets > 0, and then chaining it using EC.and with the expected condition I wanted to use for nth element :

function existanceOf(elements) {
    return function () {
        return elements.count().then(function (count) {
            return count > 0;
        });
    };
}

var els = $$('.some-els');

var isPresent = browser.wait( EC.and( existanceOf(els), EC.presenceOf(els.first()) ), 1000)
.then(function () { // success branch
    return els.first().isPresent();
}, function () { // fail branch
    return false; // handle timeouts, return desired falsy outcome
});

expect(isPresent).toBe(true);

[juliemr]

Closing in favor of #2917, as these have the same root cause.