protractor: locating strategy for elements with the same attributes

Question

The site I'm testing on is a single page application with angular.

Because of this a lot of the DOM is loaded ahead of time and are hidden. Depending on what the user does, the hidden DOM will be displayed. Regardless of if the DOM is displayed or hidden, protractor sees this as part of the entire DOM tree. When I locate an element by id:

this.usernameTextbox = element(by.id('username'));

It detects that there are multiple elements with that same id, one element being visible (ng-show) and the other being hidden (ng-hide).

Is there a way for protractor to only locate elements that are not hidden?

I used this solution to interact with visible elements only: http://stackoverflow.com/questions/27905584/select-first-visible-element-in-protractor — awaken, May 20 '15 at 01:14

score 1 · Answer 1 · answered May 20 '15 at 04:58

1

Have you tried the following:

browser.wait(function(){
    return element(by.id('username')).isDisplayed();
}, 1000).then(function(){
    //Your code here
});

answered May 20 '15 at 04:58

Tom Nijs

3,835
3
22
40

score 1 · Answer 2 · edited May 23 '17 at 12:05

You cannot reliably tell the webdriver to locate visible elements only, you need to get all of the elements matching a locator and filter them out checking the "displayedness".

In other words, use element.all() to find all elements by id, and use filter() to filter out the one that is visible, example code:

var username = element.all(by.id("username")).filter(function (elm) {
    return elm.isDisplayed().then(function (value) {
        return value;
    });
}).first();

By "reliably" here I mean that theoretically you may check the presence of display: none or visibility: hidden (reference), but don't ever do it, since the "displayedness" itself is a quite complicated thing that webdriver exposes/implements through that isDisplayed() method.

protractor: locating strategy for elements with the same attributes

2 Answers2