Protractor typescript guide: Clicking an element with _ngcontent and a span containing buttontext

I'm struggling with creating a protractor TypeScript code to click a button with _ngcontent and span buttontext. Does anyone have any ideas on how to achieve this? The code snippet on the site is:

 <span _ngcontent-c6  class="braeting net-subheading-2"> ... </span>
 <button _ngcontent-c6  class="tulbar-button net-button" net-button>
   <span class="net-button-wrapper">
      <span _ngcontent-c6="">Login</span>
   </span>
  <div class="net-button-ripple net-ripple" matripple></div>
 <div class="net-button-focus-overlay"></div>
 </button>

I've tried various approaches below, but I can't get it to work:

clickSignin = element(by.cssContainingText('tulbar-button net-button','Login'));
clickSignin = element(by.xpath('//span[@class="tulbar-button net-button"][_ngcontent-c6="Login"]'));
clickSignin = element(by.xpath('//span[@class="tulbar-button net-button"][text()="Login"]'));

After trying the above, I then executed:

clickSignin.click();

Unfortunately, none of the methods seem to be effective as I receive an error stating: Failed: No element found using locator: By(xpath..... or by.cssContainingText....

angulartypescriptjasmineprotractor

Answer №1

Here's a suggestion for you:

Please note that your argument for cssContainingText may be incorrect

clickSignin = element(by.cssContainingText('.tulbar-button.net-button','Login'));

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 causes the distinction between entities when accessing objects through TestingModule.get() and EntityManager in NestJS?

Issue: When using TestingModule.get() in NestJS, why do objects retrieved from getEntityManagerToken() and getRepositoryToken() refer to different entities? Explanation: The object obtained with getEntityManagerToken() represents an unmocked EntityManag ...

typescripttestingjestjsnestjstypeorm

Steps for configuring a splash screen in Ionic 4

I am in the process of migrating source code from Ionic 3 to Ionic 4. After copying the Ionic 3 resources folder to the Ionic 4 project, I noticed that the Cordova symbol is now appearing on the splash screen. See image here for reference I am c ...

angularcordovaionic-frameworkionic3ionic4

Generating a jasmine spy on a connected promise

I am currently trying to test a service that utilizes Restangular, but I am facing difficulties in creating the correct spy on chained promises. var services = angular.module('services.dashboards', ['models.dashboards', 'models.me ...

angularjsjasminekarma-jasmine

Integrate a JS file into my Angular 4 project

For one of my components, I am looking to implement a specific effect: https://codepen.io/linrock/pen/Amdhr Initially, I attempted to convert the JavaScript code to TypeScript, but faced challenges. Eventually, I decided to directly copy the JS file from ...

angularangular-cli

Whenever I attempt to make changes to the React state, it always ends up getting reset

Currently, I am attempting to utilize Listbox provided by Headless UI in order to create a select dropdown menu for filtering purposes within my application. However, the issue I have encountered is that whenever I update my "selectedMake" state, it revert ...

reactjstypescriptnext.jstailwind-cssheadless-ui

How can I find the "types" specific to modules within the "firebase" library?

I have a question that applies to various scenarios, with Firebase serving as an example. When working on my react project, I find myself wanting to import firebase from "@firebase/app", which is logical. However, if I want the const locationRef ...

typescript

Dynamic class/interface in Typescript (using Angular)

Is there a way to achieve intellisense for an object created with a dynamic class by passing parameters? Here is the code snippet: Main: let ita: any = new DynamicClass('ITA'); let deu: any = new DynamicClass('DEU'); The DynamicClass ...

javascriptangulartypescript

Tips for addressing the ESLint issue stating that the package should be included in dependencies instead of devDependencies

Struggling to properly lint my React+Typescript project with ESLint. In one of my components, I'm utilizing the useParams hook from react-router. import { useParams } from 'react-router'; However, ESLint is throwing an error on that line: E ...

reactjstypescripteslint

Master the art of properly switching on reducer-style payloads in Typescript

Currently, I am dealing with two types of data: GenArtWorkerMsg and VehicleWorkerMsg. Despite having a unique type property on the payload, my Searcher is unable to differentiate between these data-sets when passed in. How can I make it understand and dis ...

typescript

Navigating the Angular2 @angular/router 3.0.0-alpha.3 - Ways to access the route name or path upon route transitions

In my app.component, I am currently looking for a way to access the current route name or path when the route changes. My goal is to use the route name as a page class for a wrapper div. I had previously been subscribing to the router changes property as ...

angularjsangularangular2-routing

Incorporating JSON data into data-groups within an Ionic application

I am currently working on developing an Ionic app using the newest version (Ionic 3xx and Angular 5) and I am attempting to incorporate the shuffleJS feature for filtering. Everything was working fine when I used static data in my template with the 'd ...

jsonhtmlangularionic-framework

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

While working in JavaScript, I had no issues with this code snippet. However, when I attempted to implement it in a TypeScript Project, an error surfaced. The problem seems to revolve around the fetch(...args) function call. const fetcher = (...args) =&g ...

javascriptreactjstypescript

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

cssangulartypescript

The AgGridModule type does not feature the property 'ɵmod'

Recently, I decided to update my application from Angular 12 to Angular 13. The tools I am using include webpack 5, ag-grid 15.0.0, and ag-grid-angular 15.0.0. While the compilation process goes smoothly for the app, I encountered an issue when trying to l ...

angularangular13

typescript React-Redux challenge: Boosting Your mapDispatchToProps Skills

I'm having trouble determining the type of my mapDispatchToProps function in the SignInComponent. See the code snippet below: Here is my authAction.ts file: import firebase from 'firebase/app' import { Dispatch } from 'react'; ty ...

reactjstypescriptreact-reduxmapdispatchtoprops

Tips on using constructor functions and the new keyword in Typescript

This is a demonstration taken from the MDN documentation showcasing the usage of the new keyword function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } const car1 = new Car('Eagle', 'Talon TSi&apos ...

javascripttypescriptnew-operator

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

htmlarraysangulartypescriptsorting

Issues have arisen with the functionality of Ionic2-Calendar on the device

I'm currently working on a project that involves developing an Ionic 4 app with Angular 8. I've encountered a peculiar issue while using this calendar plugin. It seems similar to the problem discussed in this thread. Despite reaching out for sol ...

androidangularcordovaionic-framework

Error message: Index1 is not defined in AngularJS 2

While working on my MeanStack Project, I encountered an error when trying to update. The error message displayed was: Error: The requested path contains undefined segment at index 1 Here is the Update Service code snippet: updateLocation(id, data) { ...

angularmean-stack

TypeScript version 3.7 has implemented a new feature where it will now display errors for each individual invalid prop instead of grouping them together as it

Scenario using TypeScript 3.5.3 https://i.stack.imgur.com/wykd6.png link to interactive playground - TS 3.5.3 demo running successfully Example with TypeScript 3.7.2 https://i.stack.imgur.com/BPckB.png link to demo - TS 3.7.2 demo not functioning correctl ...

reactjstypescripttypescript3.0react-typescript