Finding a specific element in Protractor can be a challenge when two elements share identical attributes

Question

Finding a specific element in Protractor can be a challenge when two elements share identical attributes

How can I effectively locate a specific element when two input boxes have the same attributes?

<input name="inputText" ng-required="field.required" ng-change="handleEdit('First name',selectedSensor[field.key],field.key)" ng-model="selectedSensor[field.key]" ng-pattern="/^[a-z]+$/i" maxlength="100" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"  required="required" aria-invalid="true" style="">

<input name="inputText" ng-required="field.required" ng-change="handleEdit('Last name',selectedSensor[field.key],field.key)" ng-model="selectedSensor[field.key]" ng-pattern="/^[a-z]+$/i" maxlength="100" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-  required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"  required="required" aria-invalid="true" style="">

javascript angularjs testing automation protractor

Answer 1

Answer №1

Although I can't view the code, the solution is quite straightforward.

You need to assign both elements to an ElementArrayFinder using element.all -- http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.all

Then, utilize get() to retrieve the specific element based on its index in the ElementArrayFinder -- http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.get

Here's an example:

var userNavLinks = element.all(by.css('li.navbar-item'));
var targetLink = userNavLinks.get(2);
expect(targetLink.getText()).toEqual('My Link');

If you prefer, you can do it all in one line:

element.all(by.css('li.navbar-item')).get(1).click()

and so forth.

Answer 2

Although I can't view the code, the solution is quite straightforward.

You need to assign both elements to an ElementArrayFinder using element.all -- http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.all

Then, utilize get() to retrieve the specific element based on its index in the ElementArrayFinder -- http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.get

Here's an example:

var userNavLinks = element.all(by.css('li.navbar-item'));
var targetLink = userNavLinks.get(2);
expect(targetLink.getText()).toEqual('My Link');

If you prefer, you can do it all in one line:

element.all(by.css('li.navbar-item')).get(1).click()

and so forth.

Answer 3

Answer №2

If you are in charge of the application being tested, it is recommended to include unique identifiers such as ids or classes for elements to simplify end-to-end testing.

In the current scenario, you can make use of the ng-change attribute:

var user = $('input[ng-change*="Username"]');
var password = $('input[ng-change*="Password"]');

Answer 4

If you are in charge of the application being tested, it is recommended to include unique identifiers such as ids or classes for elements to simplify end-to-end testing.

In the current scenario, you can make use of the ng-change attribute:

var user = $('input[ng-change*="Username"]');
var password = $('input[ng-change*="Password"]');

Finding a specific element in Protractor can be a challenge when two elements share identical attributes

Answer №1

Answer №2

Similar questions

How to manage print preview feature in Firefox with the help of Selenium in the Robot Framework

Tips for loading JavaScript files after a view has been rendered in Angular

The functionality of Bootstrap Tabs is compromised when used within a jQuery-UI dialog window

Using TypeScript to Bind a Class Method as a jQuery EventHandler

Instructions on how to determine if a client is a "desktop terminal"

What is the significance of a window's "o" condition?

Styling the jQuery location picker input with background and focus effects

What strategies can I use to refactor this controller in Angular 1.5 to make it more concise and efficient

Enhancing the background of a website with the power of CSS

What could be causing the slow loading of my foreach loop?

Is there a way for mocha to conduct a recursive search within my `src` directory in order to find a specific

Patch causing issues in AngularJS 1.6 due to modifications in Array.prototype.filter by monkeys

Issue encountered when trying to reach breakpoints within JavaScript libraries using DevTools

Tips on incorporating "get_template_directory_uri" into a JavaScript function

Clipboard information inserts arbitrary line breaks into text

Unable to load JSON data model

Issue with hide.bs.modal event not triggering in Bootstrap 3.2 when using Django 1.6.5 with remote modal content

Angular Google Maps displaying only the map controls without rendering the actual map

Mastering the art of connecting multiple input fields in both parent and child components with the Vue3 composition API

Troubleshooting problem with triggering radio button clicks and setting the checked attribute