Protractor: Selecting elements using attribute-based syntax in HTML

I need to target these elements:

 <span class="required" ng-class="{'disabled': saveInProgress}" 
 input-control="{okCallback:setFieldValue, params:['firstName'], 
 title:'First Name', value: person.firstName, 
 validate:{length:100},empty:false}">
     <span hs-placeholder="Type First Name" class="ng-binding"></span>
 </span>

And also this one:

 <span class="required" ng-class="{'disabled': saveInProgress}" 
  input-control="{okCallback:setFieldValue, params:['lastName'], 
  title:'Last Name', value: person.lastName, validate:{length:100}}">
      <span hs-placeholder="Type Last Name" class="ng-binding">
      </span>
 </span>

I attempted to achieve this by using

 var input = element(by.css('span.required span.ng-binding'));  
 browser.actions().mouseMove(input).click().perform();

However, it was only interacting with the first name element. Any suggestions? Thank you :)

Answer №1

Ensure you make use of

element.all(by.css('span.required span.ng-binding')).get(0) //to reach the 1st element
element.all(by.css('span.required span.ng-binding')).get(1) //to access the 2nd element

This is necessary because there are two elements present in the DOM for the specified selector

by.css('span.required span.ng-binding')

If you opt for

 element(by.css('span.required span.ng-binding'))

Protractor will automatically select the first visible element by default.

We trust that this solution resolves your issue!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Google pie chart legend with the position labeled is malfunctioning and not displaying properly

In my project, I have integrated Google Charts to display a pie chart as a tooltip within a column chart. However, I am facing an issue where using legend: { position: 'labeled' } in the pie-chart settings is causing the bars of the column chart ...

When utilizing Simple Git in Node.js, conducting a Git diff on a specified file will result in the retrieval of the

I'm currently integrating the Simple Git library into my Node.js project to retrieve the diff of a particular file. However, I am facing an issue where using the git.diff(["--"], file) function returns the entire diff instead of just the diff for the ...

Placing a dropdown menu on top of an image

I currently have a slightly rotated menu bar with two buttons as an example: https://i.stack.imgur.com/0sI2P.jpg Due to the rotation, normal HTML handling is not feasible. I am considering using a <map> element to create hyperlinks over the menu it ...

Guide to initiating an independent angular service

I have a unique service that monitors specific data on the root scope and performs actions accordingly. This service is not needed as a dependency by anyone else. How can I instruct the service to start its operations? This is my current approach. angula ...

Ways to extract code within delimiters

After loading a template from a file, the structure is as follows: [[style]].someclass{padding:10px 15px}[[/style]] [[code]]<tr><td class="someclass">{{text}}</td></tr>[[/code]] The template is loaded using .get() and stored in th ...

The issue with the Nextjs build is stemming from problems related to jsonwebtoken in the _middleware

I need some assistance with deploying on Vercel. I have created a _middleware.ts file that checks for a JWT in the user's cookie. import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { Jw ...

Develop a search function that can be utilized throughout the entire

At the top of my angular application, I have a single search text box. Here is an example: Users are able to enter keywords and search throughout the application. They will receive a list of links with descriptions. I have the capability to implement thi ...

Maintaining TextBox State in ASP.Net Through Postbacks

Can anyone help me figure out how to maintain the control state that has been modified in Javascript? I am working with two TextBoxes, one DropDownList, and a button (all Runat=Server) in C# ASP.net 2010 Express. The first textbox accepts any user in ...

There are occasions when ng-show and/or ng-if fail to work as expected

My Chrome extension utilizes an ng-show expression to check a variable in Chrome storage and display a large blue button if the value is zero. However, upon opening the extension, the button may not appear on the first click, requiring multiple closures an ...

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format. let _columns = []; let commonStyle = {"width":"20 ...

Modify the tooltip of the selected item in an ng-repeat loop in AngularJS

Upon clicking an element, a function is executed which, upon successful completion, should change the tooltip of that specific element. Within an ngRepeat loop, I have multiple elements displaying the same tooltip. However, I only want to update the toolt ...

Guide to fetching data from database based on selection in dropdown list using PHP and MySQL

Is there a way to retrieve information from a database and automatically populate a textarea field based on the option selected from a dropdown list using an onSelect event? You can view a screenshot of my form here. Basically, I want the description ass ...

Is there a way to stop myself from accidentally clicking twice on the same tile?

I'm currently working on a game and facing an issue where my "X" gets deleted when clicking twice on the same tile. I am able to move my "X" around, but the double-click deletion is causing trouble. I attempted using booleans but struggle with them. I ...

Toggle the visibility of a div and dynamically insert it after a specific div on the page

I have a div that is initially hidden with the style display set to none. Later, I change the display property to null and move it to appear after another div. However, the hidden content is now being displayed. Can anyone provide assistance with this issu ...

Issue with AngularJS ng-repeat and ng-show not functioning properly upon page reload

Hey there! I'm facing an issue with my web application that I built using AngularJS and Spring. This platform allows users to post messages, and I've written the following code in my Angular controller. <div class="row" ng-repeat="message in ...

Is there a method for configuring NextAuth to utilize the /src/app directory instead?

Is there a specific method to instruct NextAuth to redirect to this particular directory, but within the src/app directory? All of my routes are now located there due to the changes in Next.js 13. Below is an example of the code I am using: export const a ...

There seems to be an issue with the calculation in my React app as it only displays the correct result after the second symbol

I've been developing a react app that features a button labeled "Add" for users to input data to calculate volume. Each line includes two input fields for the thickness and surface area values. I've noticed an issue where, if a user inputs the th ...

The 404 error is showing up when attempting to access 'socket.io/socket.io.js' through Express.js

I'm currently working on implementing a live user count feature on my website. You can check it out at . The backend is built using Express JS, but I encountered an error while trying to install socket.io: GET /socket.io/socket.io.js 404 1.911 ms - 1 ...

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Within my design, I have implemented an <input type="number" step="1"> element for selecting font size. However, in the context of working on a large canvas, adjusting the number by 1 is hardly noticeable. It would greatly enhance ...

Tips for streamlining IF statements with multiple conditions

When looking at various code samples, I often see something like this: if(X == x && A == a){ } else if (X == y && A == b){ } else if (X == z && A == c){ } else if (X == zz && A == d){ } Alternatively, there are conditions ...