How to select a visible element in Protractor with Angularjs

Question

I have a SPA where there are multiple divs with the same class. I want protractor to select the visible div and click it. I keep getting the Failed: element not visible which makes be believe it's getting some element that isn't on this particular page (maybe?). I also get WARNING - more than one element found for locator By.cssSelector('.myDiv') - the first result will be used which again makes me think it's not clicking the visible one, but the invisible one.

Here is my spec:

describe('User actions', function () {
    it("should be able to click a my div.", function () {
    var myDiv = element(by.css('.myDiv'));
    myDiv.click();

    // some expect... haven't gotten this far yet.
});

How do I select the visible .myDiv and click it?

Answer 1

You can filter() it out:

var myDiv = element.all(by.css('.myDiv')).filter(function (elm) {
    return elm.isDisplayed().then(function (isDisplayed) {
        return isDisplayed;
    });
}).first();