Protractor: strategy for efficiently finding elements with identical attributes

Question

Protractor: strategy for efficiently finding elements with identical attributes

I am currently testing a website that is built as a single page application using Angular.

Due to the nature of this architecture, much of the DOM is loaded in advance and hidden until needed. Depending on user actions, certain elements are displayed while others remain hidden. Protractor interprets all elements, whether visible or hidden, as part of the overall DOM structure. For example, if I try to locate an element by its id:

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

Protractor recognizes multiple elements with the same id - one visible due to ng-show and the other hidden because of ng-hide.

My question is, is there a way for Protractor to only identify elements that are not hidden?

javascript selenium selenium-webdriver webdriver protractor

Answer 1

Answer №1

Have you experimented with this approach:

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

Answer 2

Have you experimented with this approach:

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

Answer 3

Answer №2

It is not possible to instruct the webdriver to specifically locate visible elements; instead, you must gather all elements that match a locator and then verify their visibility by checking their "displayedness".

In essence, utilize element.all() to identify all elements by id, and leverage filter() to sift through and isolate the one that is visible, as demonstrated in this code snippet:

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

When I mention "reliably," I am referring to the fact that while theoretically it is possible to check for the presence of display: none or visibility: hidden (reference), it is not recommended due to the complexity of determining visibility which is handled by the webdriver's isDisplayed() method.

Answer 4

It is not possible to instruct the webdriver to specifically locate visible elements; instead, you must gather all elements that match a locator and then verify their visibility by checking their "displayedness".

In essence, utilize element.all() to identify all elements by id, and leverage filter() to sift through and isolate the one that is visible, as demonstrated in this code snippet:

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

When I mention "reliably," I am referring to the fact that while theoretically it is possible to check for the presence of display: none or visibility: hidden (reference), it is not recommended due to the complexity of determining visibility which is handled by the webdriver's isDisplayed() method.

Protractor: strategy for efficiently finding elements with identical attributes

Answer №1

Answer №2

Similar questions

AngularJS ng-submit can be configured to trigger two separate actions

Passing information from the created hook to the mounted hook in VueJS

Establish a default route within a Node Express application to handle multiple generic URLs (url/index, url/index2, url/index3, and

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

Steps for displaying a deeply nested array and string within an object that is nested further in an array

Using Vue3 and Vuex4: How to efficiently render only a subset of items from an array with v-for

Error: Unable to locate sportsRecord due to missing function

Connecting events to maps in AngularUI

Display a few HTML elements sourced from a different online platform

WCAG-compliant Quasar q-table

"Utilizing the connect() and withStyles() methods in React for class components: A step-by-step guide

Create a canvas and include input boxes in an HTML document

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

The design of RESTful web applications with a client-server architecture

Ways to access the props value within the lifecycle hooks of Vue JS

Working with multi-line HTML content within Javascript

Guide on how to update a div element without losing submitted information with the help of AJAX and PHP

How can I display a loading message in bootbox during the execution of an ajax process?

Using async and await inside a setTimeout function within a forEach loop

I am encountering a problem with the app.patch() function not working properly. Although the get and delete functions are functioning as expected, the patch function seems to be