Finding the second through eighth elements in a protractor using a CSS locator

Recently, I have been experimenting with protractor and facing a limitation when trying to reference elements. The only way to refer to them is through CSS, as they only have a class attribute provided. The issue arises when there are more than 7 elements with the same class name. To locate the elements, I initially used the following syntax:

element.all(by.css('h4.ng-binding')).first(); 

This worked perfectly for the first element, but the same logic failed to work for the others. Below are the snippets of code I attempted to use to locate the subsequent elements:

element.all(by.css('h4.ng-binding')).second();
element.all(by.css('h4.ng-binding')).third();
element.all(by.css('h4.ng-binding')).fourth();
element.all(by.css('h4.ng-binding')).fifth();
element.all(by.css('h4.ng-binding')).sixth();
element.all(by.css('h4.ng-binding')).seventh();
element.all(by.css('h4.ng-binding')).eighth();

Answer №1

Protractor does not offer functions like the ones you mentioned. The only available functions are first(), last() and get(). You can achieve everything by utilizing these 3 functions with the ElementArrayFinder. Here's an example -

element.all(by.css('h4.ng-binding')).first(); //retrieve the first element
element.all(by.css('h4.ng-binding')).get(0); //retrieve the first element as get() function uses a '0' based index
element.all(by.css('h4.ng-binding')).get(1); //retrieve the second element
element.all(by.css('h4.ng-binding')).get(2); //retrieve the third element
element.all(by.css('h4.ng-binding')).last(); //retrieve the last element

Hopefully this explanation is useful.

Answer №2

You now have the ability to effortlessly access functions such as .second(); .third(); .fourth(); and more. I have created a handy tool called https://github.com/Marketionist/protractor-numerator that can be seamlessly integrated with protractor for selecting various elements.

Answer №3

To select the second child element, you can use nth-child like so:

element.all(by.css('h4.ng-binding:nth-child(2)'))...

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 most secure method for retrieving User Id in AngularFire2

I'm currently facing a dilemma in determining the most secure method to obtain an authenticated user's uid using AngularFire2. There seem to be two viable approaches available, but I am uncertain about which one offers the best security measures ...

Tips on redirecting the treeview menu using Material-UI 4

Currently, I am utilizing Material UI 4's Treeview component. However, I am struggling to figure out how to include a parameter that allows me to redirect to other pages when the user clicks on an item. In the past, I relied on a different method. Ch ...

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Initially, my goal is to verify the existence of the modal and then proceed by clicking "continue". However, I am facing an issue where I can click continue without successfully determining if the modal exists in the first place. This occurs because when I ...

Is it possible to improve the cleanliness of a dynamic button in Jquery?

I've just finished creating a dynamic button on the screen as per my boss's request. When this button is clicked, it triggers an email window for feedback submission. My aim is to streamline this script so that I can avoid digging into ASP marku ...

Getting the json array value and populating it in a dropdown list in angularjs - a step-by-step guide!

{"id":1,"firstName":"John1","lastName":"Doe1","**accountIds**":[12345,12346,12347],"recipients":[{"accountNumber":22222,"firstName":"Mary1","lastName":"Jane1"},{"accountNumber":33333,"firstName":"Mary2","lastName":"Jane2"}]} Show the "accountIds" as a dro ...

EJS is refusing to render the HTML page

When utilizing Express with EJS to display the response from a database query as a basic Html page, an error is encountered in the development tools. "Access to fetch at 'https://o189131.ingest.sentry.io/api/5478725/envelope/?sentry_key=504fcb6 ...

Determining whether JQuery animations are currently active

When running Cucumber tests with Capybara and Selenium, I encounter the need to establish if specific JQuery effects have finished before proceeding to the next step. Is there a universal method to verify if JQuery is currently executing effects (similar ...

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I'm a beginner when it comes to Javascript, and I'm still getting the hang of CSS/HTML. Currently, I am working on creating a vertical menu using CSS and javascript. My goal is to have the sublevels appear on the right side of the menu when someo ...

JavaScript, change syntax from arrow to regular

Currently I'm in the process of learning and grasping JavaScript. In a tutorial video that I'm following, the instructor utilized this specific code snippet: app.post('/content/uploads', (req,res) => { upload(req, res, (err) => ...

Attempting to verify if a function is being invoked within a subscription, but finding that it never gets activated

I have a method that needs to be tested when called in an ngOnInit. Specifically, I want to ensure that when the ngOnInit is triggered, this.anotherService.methodToCall() is executed and verify what parameters it is called with. However, despite my effort ...

ChromeDriver for Selenium: element remains invisible

Struggling to send keys to an input field despite multiple attempts... I've experimented with various methods to wait for the element to become visible, but keep getting timeout exceptions. IWebElement userName = driver.FindElement(By.Id("UserName")) ...

Issues encountered when trying to modify the Content-Type of POST requests using ngResource versions 1.0.6 and 1.1.4

Despite numerous attempts and trying various solutions found online, I am still unable to solve this issue. Similar questions have been asked in the following places: How to specify headers parameter for custom Angular $resource action How can I post da ...

Executing Python script via AJAX or jQuery

I need to execute Python scripts from JavaScript. The goal is to provide an input String to the Python script as an argument and then showcase the output on our webpage. Below is the Python code that runs smoothly on my Linux box: ./sample.py 12345 produc ...

RobotFramework encounters difficulty locating an element using JavaScript

After working with RF for the past few weeks, I came across a persistent issue that has been bothering me. I keep getting the following error: The element with the locator 'XXX' (just a template) cannot be found. Upon investigating the span tha ...

Divide the identical elements and distinct elements from a provided array into two separate arrays storing unique elements and recurring elements

Can anyone help me with this query? I have an array of objects that need to be separated into repeating and non-repeating objects based on the segments they belong to, each in a separate array. For example- [ {name:"abc",id:1,segments:[1,2]}, {n ...

Unable to trigger a function on the button within the ng-repeat directive

As a beginner in AngularJS, I am facing an issue while working with it. My problem involves a table structure like this: ... <tr ng-repeat="line in lines"> <remove-line> <input id="line_id" type="hidden" value="{{line.id}}"> ...

Alternatives to AMP in AngularJS

My current project is based on Angular 1.x and I recently received advice from an SEO specialist to enhance the initial mobile load speed of my website. One suggestion was to implement AMP, but after some research, it appears that integrating AMP with Angu ...

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

Identify Unintended Javascript Modifications in Ajax Request

We have developed a unique Javascript file for our clients to utilize. This innovative snippet captures a screenshot of the website it is executed on and then securely transmits it back to our server using jQuery.post() Given the sensitive nature of our i ...

Using Javascript to delete an HTML list

Currently, I am working on a webpage that includes notifications along with options to mark them as read individually or all at once. However, when attempting to use my loop function to mark all notifications as read, I noticed an issue. let markAllAsRead ...