AngularJS & Protractor - Perform .click() while an element .isDisplayed()

Question

I want to test "Show more" button in my AngularJS app, so when user hits the button it will load some content and where there is nothing more to show the button hides.

How can I perform .click() while "Show more" is displayed. I don't want to hardcode the number of loops but somehow insert .isDisplayed() (even if it returns a promise) into while()

Answer 1

2 ways to do this imho,

• closures/recursion: https://stackoverflow.com/a/27910350/2374517

Since .click is actually creating promise, you cannot just while loop it - it will just create bunch of same promises. I created a recursive function for this:

reclick = function(elementos) {
        if (elementos.isDisplayed()) {
            elementos.click().then(function () {
                console.log('click');
                //YOUR CHECKS AFTER CLICK HERE
                return reclick(elementos);
            });
        }
    };
reclick(anyElement);

You could probably made it reusable with another function as a parameter with Code you want to execute after click...

• easier version is wrapping extra it('should have something after click') into while() loop, that way you don`t have to deal with promises(but it depends on what you have in afterEach(), beforeEach()...

Answer 2

I would find all Show More buttons and filter visible only using filter(). Implementation:

// find all "Show More" links by link text and filter only visible
var showMores = element.all(by.linkText("Show More")).filter(function (link) {
    return link.isDisplayed().then(function (value) {
        return value;
    });
});

// for each visible "Show More", click it
showMores.each(function (link) {
    link.click();

    // TODO: assertions/expectations
});