How to select a visible element in Protractor with Angularjs

You can filter() it out:

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

Working with angular, it is pretty common to have many layers of the same bit of html hidden, but earlier in the overall html page than the visible element you would like to work with.

For general debugging, open up your site to the position you expect your protractor test to be in, then open the html and do a search on the html for the element your protractor test is searching for. Note if it is visible or not and where it is located overall.

Consider if you would like to add a tag for different areas of the page where the element can appear, and then use parent and child selectors to get the one you'd like.

You can also use this to select just the first visible element:

// Takes a protractor webelement and returns the first displayed version
// Ex:
// var coolBox = $('.coolBox');
// var visibleCoolBox = getFirstVisibleProtractorElement(coolBox);
this.getFirstVisibleProtractorElement = function(selector){
    var allElementsOfSelector = element.all(by.css(selector.locator().value));
    return allElementsOfSelector.filter(function(elem) {
        return elem.isDisplayed().then(function(displayedElement){
             return displayedElement;
        });
    }).first();
};

Pass in any element you'd like, it will take the locator and get the first visible version of it. You can also take off the .first() portion to return an array of the visible elements to work with.

EDIT:

To use this, I will give a protractor+jasmine example. I thiiiink this should work given there is any number of desired elements on the page, with at least one being visible. This is off the top of my head though, so I may have made a mistake somewhere.

example_spec.js

var examplePage = require('./example_page.js');

describe('Extracting visible elements', function(){
    it('A visible element can be extracted', function(){
        expect(examplePage.isACoolBoxVisible()).toBeTruthy('Error: No visible CoolBoxes');
    });
});

example_page.js

var protractorUtils = require('./protractor_utils.js');

module.exports = new function(){
    var elements = {
        coolBox: $('.coolBox')
    };

    this.getVisibleCoolBox = function(){
        return protractorUtils.getFirstVisibleProtractorElement(elements.coolBox);
    };

    this.isACoolBoxVisible = function(){
        return getVisibleCoolBox.isDisplayed();
    };
};

protractor_utils.js

module.exports = new  function(){
    this.getFirstVisibleProtractorElement = function(selector){
        var allElementsOfSelector = element.all(by.css(selector.locator().value));
        return allElementsOfSelector.filter(function(elem) {
            return elem.isDisplayed().then(function(displayedElement){
                 return displayedElement;
            });
        }).first();
    };
};