Getting a specific element from an ElementArrayFin

Question

This is a follow up question from Get a specific element from an ElementArrayFinder in protractor based on the text of getText()

So, using the answer I was given, I used the .filter() method. It finds the row I want, but I get

Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By(css selector, li)

So, I put some logging into it. Here's my code:

function getCardByName(name) {
    let cards = element.all(by.css(li));
    cards.count().then(c => console.log("The count is ", c));
    let theCard = cards.filter(function(el, i) {
        return el.getText().then(function(text) {
            text = text.substr(0, text.search(" ID:"));
            console.log(i + ") Does the text, " + text + ", match name, " + name + "?  " + (text == name) + " | " + (text === name));
            text == name
        });
     }).first();

     return new Card(theCard);
}

This code will select and return the first ElementFinder object and pass that into the Card object as a parameter.

The result I get on my actual page is (names are not real):

The count is  7
0) Does text, KERGER, FEYSAL, equal name, CRAVEN, LILLARD?  false | false
1) Does text, JENNINGS, JEWELLAN, equal name, CRAVEN, LILLARD?  false | false
2) Does text, CRAVEN, LILLARD, equal name, CRAVEN, LILLARD?  true | true
3) Does text, HORSTMANN, GREG, equal name, CRAVEN, LILLARD?  false | false
4) Does text, MEUSA, FRANKLIN, equal name, CRAVEN, LILLARD?  false | false
5) Does text, LAURITO, RANDOLPH, equal name, CRAVEN, LILLARD?  false | false
6) Does text, JHANSON, LORENE, equal name, CRAVEN, LILLARD?  false | false
0) Does text, KERGER, FEYSAL, equal name, CRAVEN, LILLARD?  false | false
1) Does text, JENNINGS, JEWELLAN, equal name, CRAVEN, LILLARD?  false | false
2) Does text, CRAVEN, LILLARD, equal name, CRAVEN, LILLARD?  true | true
3) Does text, HORSTMANN, GREG, equal name, CRAVEN, LILLARD?  false | false
4) Does text, MEUSA, FRANKLIN, equal name, CRAVEN, LILLARD?  false | false
5) Does text, LAURITO, RANDOLPH, equal name, CRAVEN, LILLARD?  false | false
6) Does text, JHANSON, LORENE, equal name, CRAVEN, LILLARD?  false | false
0) Does text, KERGER, FEYSAL, equal name, CRAVEN, LILLARD?  false | false
1) Does text, JENNINGS, JEWELLAN, equal name, CRAVEN, LILLARD?  false | false
2) Does text, CRAVEN, LILLARD, equal name, CRAVEN, LILLARD?  true | true
3) Does text, HORSTMANN, GREG, equal name, CRAVEN, LILLARD?  false | false
...


Failed: Index out of bound. ...

This goes on looping over the 6 rows 13 times (using the page I'm actually testing against). But it does find the row that I want to find (see the "true | true" on the 3 line of the results?) Why does it loop 13 times and not stop and not load the matching result in the resulting array?

Answer 1

You aren't actually returning a boolean, by what I see (if this is a copy-paste from your code). What you want to do is (notice the "return text == name"):

function getCardByName(name) {
    let cards = element.all(by.css(li));
    cards.count().then(c => console.log("The count is ", c));
    let theCard = cards.filter(function(el, i) {
        return el.getText().then(function(text) {
            text = text.substr(0, text.search(" ID:"));
            console.log(i + ") Does the text, " + text + ", match name, " + name + "?  " + (text == name) + " | " + (text === name));
            return text == name;
        });
     }).first();

     return new Card(theCard);
}