Locating elements with the same class for links by their href attribute using Protractor and Typescript

I am facing an issue with my HTML code where all the class names are similar, but only the href links are different.

What would be the most effective method to locate these links using CSS? I attempted the following approach:

test = element.all(by.css('.xyz')).get(1);

However, upon running the code:

await browser.actions().mouseMove(await locators.test.getWebElement()).click().perform();

I encountered the following error:

Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By(css selector, .xyz)

typescriptcss-selectorsprotractorhref

Answer №1

The recommended locator strategy for your situation is to utilize the cssContainingText method. This method enables you to locate elements based on CSS and specific text content, as demonstrated below:

const elementToClick = element(by.cssContainingText('.xyz', 'linkText'));
await elementToClick.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

What is the reason that TypeScript cannot replace a method of the base class with a subtype?

Here's a straightforward example. type Callback<T> = (sender: T) => void; class Warehouse<T> { private callbacks: Callback<T>[]; public constructor(callbacks: Callback<T>[]) { this.callbacks = callbacks; ...

typescriptclassgenericsextends

Issue with Angular 5 Application - "Implementations cannot be declared in ambient contexts"

Recently in my Angular 5 project, I started encountering an issue with the observable object. Everything was working smoothly until about a week ago when I began receiving this error message: ERROR in node_modules/rxjs/Observable.d.ts(20,31): error TS1183 ...

angulartypescript

Angular 5 - capturing form inputs - activating event upon selecting suggested values

When I click on suggested values below the input field, the (click)="doSomething()" event doesn't fire. How do I handle this issue? I would like to be able to type something in the input field and then have an event triggered when clicking on the su ...

angularformstypescriptinputevent-handling

Encountering build issues post upgrade to Angular 9 and Typescript 3.8.3

I recently updated my WebAPI project to Angular 9 and Typescript 3.8.3, but encountered errors during the build process: https://i.sstatic.net/KRzgU.png To try and resolve the issue, I executed various commands such as deleting node_modules and running np ...

angulartypescript

Error message occurs when using Typescript with es2017 target, indicating a potential need for a loader despite successful project builds in es5

We are working on a typescript react 'main' project. In the package.json file, there is a dependency on another internal library that we utilize. The 'main' project builds successfully when both projects are set to target es5. However, ...

typescriptwebpackbabeljs

Implementing the withAuthenitcationProps method in all page.tsx files to integrate Amazon Cognito authentication

I have been working on my Next.js app and wanted to share the project structure with you: ├── README.md ├── amplify │ ├── #current-cloud-backend │ ├── README.md │ ├── auth │ ├── backend │ ├── cl ...

reactjstypescriptnext.jsamazon-cognitoaws-amplify

Tips for accentuating a chosen cell

When selecting an item from the list, I want to highlight the selected item. How can I achieve this? Here is the code snippet: <li class="nav-item dropdown"> <div class="dropdown"> <a class="nav-link dropdown-toggle text-white" hre ...

angulartypescript

"Encountering connectivity issues between NestJs and TypeORM when trying to establish a

My current challenge involves connecting to MySQL. I have set the database connection variables in a .env file located in the root directory, and I am initializing the connection in the app.module.ts file. The problem arises when I attempt to create or run ...

mysqlnode.jstypescriptnestjstypeorm

Exploring the potential of utilizing dynamic types in a TypeScript React application alongside React Hook Form

Currently, I am in the process of converting a React application that was previously not using TypeScript to now incorporate TypeScript. I am facing an issue with the use of React Hook Form's setValue method. The component I am working on serves as a ...

typescriptreact-hook-formreact-typescript

Discovering if a page can be scrolled in Angular

Hey there, I recently started working with Angular and created an app using the angular material stepper. The issue I'm facing is that some of the steps have longer content, causing the page to become scrollable. I am now trying to find a way to deter ...

javascriptcssangulartypescriptangular-material

Function in Typescript that accepts an array or a single instance of a constructor and then returns a list

UPDATE:: reproducible link to the TypeScript playground I have also found a solution in the provided link, but I am still open to learning why my initial approach didn't work. TLDR; This method does not yield the expected results getEntitiesByComp ...

typescriptgenericsentityentity-component-system

Phaser.js troubleshooting: Overcoming TypeScript errors

I encountered two persistent errors that I have been unable to resolve. While the application runs smoothly in Vite, it fails to transpile due to the mentioned errors outlined below: import Phaser from "phaser"; export default class GameScene ex ...

typescriptphaser-frameworkphaserjs

Angular2 and Typescript paired with Visual Studio 2013

Currently, I am utilizing the angular2 QUICKSTART and encountering an issue where Visual Studio fails to recognize Angular2 with typescript import Modules. However, everything else seems to be functioning correctly: https://i.stack.imgur.com/0s46Y.jpg Th ...

visual-studiovisual-studio-2013typescriptangular

Is there a gap in the Nativescript lifecycle with the onPause/onResume events missing? Should I be halting subscriptions when a page is navigated

My experience with NativeScript (currently using Angular on Android) has left me feeling like I might be overlooking something important. Whenever I navigate to a new route, I set up Observable Subscriptions to monitor data changes, navigation changes, an ...

angulartypescriptrxjsnativescriptangular2-nativescript

The server response value is not appearing in Angular 5

It appears that my client is unable to capture the response data from the server and display it. Below is the code for my component: export class MyComponent implements OnInit { data: string; constructor(private myService: MyService) {} ngOnInit ...

javascriptangulartypescripthttpspring-mvc

Guide on creating a static method to generate a subclass instance

I am currently working on creating an abstract class called Enum, which consists of static methods that return instances of the class they are invoked upon. However, I am encountering difficulties in properly typing these methods. My goal is to help TypeS ...

typescriptabstract-classsubclassstatic-methods

Unlocking the power of React using TypeScript for optimal event typing

I need assistance with properly typing events in TypeScript. Consider the following function: import * as React from 'react'; someHandler = (event: React.SyntheticEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) =&g ...

javascriptreactjstypescript

Refresh ngx-graph with updated information

I'm experimenting with swimlane ngx-graph in my app, where users can delete or add nodes. How do I update the graph without refreshing the entire page? ...

javascriptangulartypescriptngx-graph

NextJS and Context API throwing a Typescript error

I've been working on my _app.tsx file and here's the code snippet I have: import React from 'react' import type { AppProps } from 'next/app' /* Import Styles */ import '@themes/index.scss' /* Import Template */ imp ...

reactjstypescriptnext.js

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

javascripttypescript