How to choose the second anchor element in a list with Protractor

I am facing a challenge where I need to click on the 2nd anchor tag in a list of anchor tags.

<ul id="shortcuts">
    <li><a ui-sref="app.journeyExplorer" href="#/journey-explorer/"><span class="ng-binding">1</span></a></li>
    <li><a ui-sref="app.userGroupManager" href="#/user-group-manager"><span class="ng-binding">2</span></a></li>
</ul>

After trying different approaches, it was determined that the correct code should be:

element(By.id('shortcuts')).element(By.tagName('a')).get(1).click();

However, this code is showing as undefined. Using get() does not work and without it, the first anchor tag in the list is clicked with a warning stating 'More than one anchor tag found, in such case the 1st one is selected'.

If anyone has a solution to this problem, please assist. Thank you.

Answer №1

If you're looking to target all anchor elements, you can use the selector below (replace element() with all() for matching all anchors). This will ensure that the subsequent .get() function actually has a purpose.

element(By.id('shortcuts')).all(By.tagName('a')).get(1).click();

Alternatively, you can achieve the same result using CSS:

element(By.css('#shortcuts a:nth-child(1)').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

Java web driver proxy connection available for purchase

I am looking to connect web drivers through proxy networks. I am open to using paid proxies, but I am unsure how to integrate them with the web driver. Besides Firefox, I have used Tor with Firefox before. ...

v-treeview component triggering method execution twice upon input

I'm facing an issue with my Vue component that contains a treeview. Upon selecting a node, the goal is to update an array and display the checkbox as selected. However, I'm encountering a problem where if I select elements from one folder in the ...

Adjust CardMedia Images to match their content in the new MUI 5 version

I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...

What is the method for accessing an anonymous function within a JavaScript Object?

Currently facing an issue with a Node.js package called Telegraf, which is a bot framework. The problem arises when trying to create typings for it in TypeScript. The package exports the following: module.exports = Object.assign(Telegraf, { Composer, ...

Utilizing the fetch method for sending cross-origin JSON data to an Express backend

When attempting to use Fetch to send JSON data from a form and receive a response from an Express server, I am encountering an issue where I only see an empty object in the console instead of the expected JSON response with the form values. You can find t ...

Pagination in AngularJS that allows users to easily "jump to page"

Looking to enhance my pagination function by adding a textbox and button for users to input the desired page number. Any ideas or reference links on how to go about this? Thanks in advance! Here's my current HTML: <div class="pagingDiv"> <b ...

Data retrieval error, function returned instead of expected value

Hey everyone, I'm currently working on fetching data using the GET method and I would like the data to be displayed after clicking a button, following standard CRUD operations. As a beginner in programming, I could use some help. Any assistance is gre ...

Attempting to use automated translation on both Google Chrome and Microsoft Edge browsers, but encountering issues with the translation

I've been experimenting with running webpage translations in both Google Chrome and Microsoft Edge. https://i.sstatic.net/Kdq0C.png I've been trying to set the default translation option for all languages to English using the code below, but it ...

Unable to enable headless mode in Firefox with preferences while using Webdriver

Is there a way to launch Firefox headlessly using Selenium without losing my preferences? from selenium import webdriver; from selenium.webdriver import Firefox; cProfile = webdriver.FirefoxProfile(); options = webdriver.FirefoxOptions(); dwnd_path = os. ...

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

I've encountered the TypeError: Cannot read properties of undefined (reading 'prototype') error in my javascript file. Despite researching online, it seems that many attribute this issue to importing {response} from express, but I am not doi ...

Maximize the sum of diverse numbers effectively

I have an array that contains objects structured like this: [ { "id": 91, "factor": 2, "title": "Test Product", "price": 50, "interval": 1, "setup": 0, "optional": false }, { "id": 92, "factor": 1, "title": "A ...

Loading a new view within AngularJS using the ng-view directive opens up a fresh

I am currently working on integrating Angular with a REST API for the login process. After successfully setting up Angular with my REST calls, I aim to redirect to a new page upon successful login. In my success handler, I have implemented the following ...

The static folder in Express server is failing to serve files

I have an application with certain static files that I want to send to the client, however the server is not sending them. app.use(express.static(__dirname, '/public')); I need help fixing this particular code snippet. ...

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

While attempting a synchronous ajax request during the beforeunload event, I encountered an error stating that synchronous ajax requests are not supported in chromium browsers during page unload events. I am seeking alternatives for making a synchronous a ...

From PHP to Javascript and back to PHP

I'm currently tackling an issue within my project: My database, utilizing PHP, provides an array containing a collection of JavaScript files that require loading. This list is stored in the $array(php) variable. My task is to extract these source fil ...

Trigger offcanvas modal and backdrop simultaneously using Bootstrap v5.0

Working with Bootstrap v5.0 offcanvas has been smooth sailing until I hit a roadblock. Clicking on the offcanvas button seems to be triggering both the offcanvas-backdrop and modal-backdrop divs simultaneously. <div class="modal-backdrop fade show ...

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

My goal is to utilize the Google Maps API for retrieving coordinates based on an address. In my understanding, using await with the subscribe line should ensure that the code block completes before moving on to the subsequent lines. async getCoordinates ...

Using AngularJS to effectively receive and handle chunked data for displaying real-time status updates

Can someone assist me with utilizing angularjs for a specific task? I am dealing with a situation where the rest server is providing several instances of status records representing a long-running process. The data comes back in chunks and I need to displ ...

Are you harnessing the power of ng-view for your highly dynamic content?

I'm currently in the process of developing a website that offers users the ability to search for various products, such as laptops. Below is the code snippet from my main index div: <div class="content" id="main"> <div id="search-wrap" ...

What are the steps for implementing custom edit components in material-react-table?

I am currently using the official material-react-table documentation to implement a CRUD table. You can find more information at this link: . However, I encountered an issue while trying to utilize my own custom modal components for the "create new" featur ...