How to select a visible item in a transporter using Angularjs

Question

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

Here is my specification:

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 to select visible .myDivand click it?

Answer 1

angular, html, html, , .

, , , html html , . , .

, , , , , .

, :

// 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();
};

, , . .first(), .

, + . thiiiink , , , . , , , , , .

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();
    };
};

Answer 2

filter():

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