Protractor clicking through an array of elements

Question

I'm quite new to e2e testing and in using protractor / jasmine framework. I know how to get an array of elements and also how to click on an anchor. But how would / is it even possible to click through a list of anchors returned by a element selector / repeater?

I've been trying various ways, but as an example (latest one which hasn't been deleted lol) this is what I got:

element.all(by.repeater('link in links')).then(function(links) {
    links.forEach(function(link) {

        link.click().then(function() {
            console.log('callback for click ');

        });
    });
});

This appears to take the first element and click through, however come the next iteration it hangs (I can see why, but struggling to figure a way to resolve - is this some kind of promise & resolve factor i need to take into account?)

The error coming back is

Failed: stale element reference: element is not attached to the page document

Any guidance / link to help would be appreciated - googling hasn't returned anything of note to me so far...

Thanks in advance!

Answer 1

Managed to figure a workaround, although this doesn't feel quite right. Anyway, if anyone has better suggestion feel free to post :)

element.all(by.repeater('link in links')).map(
    function(link, index) {
        return {
            index: index,
            href: link.getAttribute('href')
        };
    })
    .then(function(links) {
        for (var i = links.length - 1; i >= 0; i--) {
        browser.get(links[i].href);
        // do some page specific stuff here.
    };
});

Answer 2

To avoid the "staleness" problem, you have to get an array of href resolved attribute values, which map()+then() can help you with (as you've already provided). You just don't need index and you can iterate over links starting from the first:

element.all(by.repeater('link in links')).map(function(link) {
    return link.getAttribute('href');
}).then(function(links) {
    for (var i = 0; i < links.length; i++) {
        browser.get(links[i]);
    }
});

Answer 3

Solution 01

public findSpecificElementAndClick(element: ElementArrayFinder,expected: number){
        let clickedIndex: number = -1;
        element.filter(function (elementItem, index) {
            clickedIndex++;
            if(index === (expected-1)){
                element.get(clickedIndex).click();
                return true;
            }
        }).then(function (bool) {

        }).catch(function (err) {
            throw new FrameworkException('Ooops ! Error... '+err.message);
        });
    }

Solution 02

public findTextAndClick(element: ElementArrayFinder,expected: string) {
        let clickedIndex: number = -1;
        let status :boolean = false;
        element.filter(function (elementItem, index) {
            return elementItem.getText().then(function (text) {
                if(text === expected) {
                    clickedIndex = index;
                    status = true;
                    return true;
                }
            });
        }).then(function (bool) {
            if(!status){
                throw new ApplicationException("Ooops ! Couldn't found "+expected+" Record ...");
            }else{
                element.get(clickedIndex).click();
            }
        }).catch(function (err) {
            throw new FrameworkException('Ooops ! Error... '+err.message);
        });
    }