Tips for selecting multiple elements with the same class name in Protractor for Angular:1. Use the `element

Snippet of HTML code:

<div class="block ng-scope" ng-repeat="skills in data.primary_skills">
                    <div class="block skillsLineItem" ng-class="{manditorySkillsLineItem:skills.mandatory, skillsLineItem:!skills.mandatory}"> 

 <label title="Testing" class="skill-name col-xs-5 text-overflow-ellipsis ng-binding" ng-click="toggleMandatory(skills)">
                              <!-- ngIf: skills.mandatory -->
                              <!-- ngIf: skills.userdefined -->
                              &nbsp;Testing
                            </label>

Another snippet of HTML code

<label title="Test Scripts" class="skill-name col-xs-5 text-overflow-ellipsis ng-binding" ng-click="toggleMandatory(skills)">
                          <!-- ngIf: skills.mandatory -->
                          <!-- ngIf: skills.userdefined -->
                          &nbsp;Test Scripts
                        </label>

I am facing an issue with clicking on multiple elements with the same class name and ng-click values in our application. I need to click on both elements, so any assistance in achieving this would be greatly appreciated.

Answer №1

If you want to access and manipulate all elements, you can utilize the each() method:

element.all(by.css("label[ng-click*=toggleMandatory]")).each(function (label) {
    label.click();
});

To specifically target certain elements, you can employ the filter() function:

element.all(by.css("label[ng-click*=toggleMandatory]")).filter(function (label, index) {
    return index <= 5;
}).each(function (label) {
    label.click();
});

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

Alter Text Using Typewriter

Recently, I have been experimenting with code on my glitch website, trying to create typewriter text. Thanks to help from a user on StackOverflow, I was able to achieve this effect successfully. However, I am now facing a new challenge. My goal is to make ...

Utilizing external JavaScript libraries in Typescript for integration with nodeJS

We've recently made the switch to using Typescript + Electron for developing a browser-based desktop application. However, we often encounter delays when loading external Javascript libraries. While typings helps with most of our needs, there are stil ...

German-formatted jQuery datepicker

Need help in changing jQuery datepicker formatting from MM/DD/YYYY to German style as d MMMM yyyy. Tried implementing the following code but encountering issues. <script type="text/javascript"> $(function () { $('.datepicker&ap ...

Ways to verify an NPM package for non-JavaScript code

How can we determine if an npm package consists purely of JavaScript without any bindings or dependencies that require compiling? For instance, the node-speaker package (https://github.com/TooTallNate/node-speaker) requires compilation (mpg321), while req ...

Attempting to generate a fresh document by duplicating the data from a specific variable

Currently attempting to generate a new csv file within a specific directory. The goal is to save the data of a variable inside the created csv file: handleRequest(req, res) { var svcReq = req.body.svcReq; var csvRecData = JSON.stringify(req.bod ...

What is the method to increase a counter in the view component using Angular?

Suppose I need to implement a counter in a recursive script that tracks the number of times the script is executed. However, instead of seeing an output like this: 1 2 3 ... I'm encountering this: 1 1 1 ... Below is the basic code I am working wi ...

PHP is unable to show items containing special characters such as double quotes and apostrophes

I am facing an issue with ordering food items. Names that do not contain apostrophes work fine, but those like Pasqua Nero D'Avola Sicilia are causing problems. I have tried replacing ' with \', but the issue persists. Here is the relev ...

I possess information stored within the array object below, and I aim to transform it into a different array object format

Here is the response I received from my API: let data = [ { date: '2021-04-27', formatted_date: 'Apr 27', location: [ { date: '2021-04-27', formatted_date: 'Apr 27', countr ...

A comprehensive guide on retrieving data from API across several pages

Struggling with pulling data from an API using React and facing the challenge of retrieving more than one page of data. "info": { "count": 493, "pages": 25, "next": "https://rickandmortyapi.com/api/character/?pa ...

Error: Unable to retrieve the "error" property as the data is not defined

Encountered a title error and struggling to fix it :(. Attempting to retrieve data from a signup page, here is the snippet of my JavaScript code: const SignupComponent = () => { const [values, setValues] = useState({ name: 'ryan', emai ...

When utilizing an 'imported' asynchronous function, make sure to clean up the useEffect

Please do not mistake this for a duplicate. Despite my thorough search on various blogs and sources, I have yet to find a solution. My primary question is 'how can I address the error of react state change in unmounted component, and also cancel an a ...

Stopping the initial page of the Firefox add-on from appearing

Currently, I am developing a Python program that utilizes the Selenium Webdriver API with a Firefox browser to browse the web. My program requires the first page of the NoScript add-on version to be disabled and not shown when the browser starts working. ...

Optimal method for detecting changes in a React webpage

As I create React hook components that utilize Material-UI input controls, I have searched extensively but have not found a satisfactory example. My goal is to display a popup message to the user if they have made changes to an input field, checkbox, rad ...

Exploring Android Webview capabilities using HTML 5 geolocation

Utilizing a webview to load a web application, I am using the HTML 5 geolocation API within the page to detect the user's location. While this feature works seamlessly in all browsers and even in an iOS application, I am facing issues getting it to fu ...

Is there a way to retrieve the class value and store it in a CSV file using Selenium?

Is there a way to extract and store a value using selenium with Python? I am aiming to save this value in a CSV file. Here is what I have attempted: #element= driver.find_element_by_xpath("//*[@class='rt-tr-group']") elements = driver ...

Displaying Angular UI Views: A Comparison of Old and New Views During View Transition in Firefox

I am currently facing an issue with my AngularJS application that uses UI router. While the application works perfectly fine in Chrome, it encounters problems in Firefox. The issue arises when a state is changed, leading to the DOM displaying 2 ui-views - ...

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

I'm in the process of developing a dynamic wages table with HTML and JavaScript to compute each employee's wage based on input from each row. In order to achieve this, I've utilized a loop to assign a unique ID to the total cell in every ro ...

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

"The printing function of the "Print page" button appears to be malfunctioning

I am having some trouble with my JavaScript code for a "print page" button in an HTML document. The button appears and is clickable, but it doesn't actually print the page as intended. I keep receiving 3 errors related to the `document` object being u ...

Exploring the capabilities of ExcelJS for reading xlsx files within an Angular environment

I'm trying to access a source file, make some changes to it, and then provide it for the user to download. However, I am facing an issue with reading the source file from my project directory. Below is my implementation using excelJS for file reading: ...