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

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular

Guide to combining an Angular 2 (angular-cli) application with Sails.js

I am looking to integrate the app created using angular-cli with Sails.js. My background is in PHP, so I am new to both of these frameworks. What are the steps involved in setting them up together? How can I execute commands like ng serve and/or sails li ...

angularsails.jsangular-cli

Encountering 404 errors when reloading routes on an Angular Azure static web app

After deploying my Angular app on Azure static web app, I encountered an error. Whenever I try to redirect to certain routes, it returns a 404 error. However, if I navigate from one route to another within the app, everything works fine. I have attempted t ...

javascriptangulartypescriptazure-web-app-service

Data fetched by Next.js is failing to display on the web page

After writing a fetch command, I was able to see the data in the console.log but for some reason it is not showing up in the DOM. export default async function links(){ const res = await fetch('https://randomuser.me/api/'); const data = ...

reactjstypescriptdomnext.js

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Looking to develop a component that combines Text Input and FlatList to capture user input from both manual entry and a dropdown list. Has anyone successfully created a similar setup? I'm facing challenges in making it happen. Here's the scenari ...

typescriptreact-nativeuse-statereact-native-flatlistreact-native-textinput

Converting milliseconds into days, hours, minutes, and seconds using Angular

Currently, I am attempting to convert milliseconds to the format dd:hh:mm:ss. For example, given 206000 milliseconds. The desired format for this value would be: 00:00:03:26. However, when utilizing the following code: showTimeWithHour(milliSeconds: numb ...

javascriptangulartypescript

How come the inference mechanism selects the type from the last function in the intersection of functions?

type T = (() => 1) & (() => 2) extends () => infer R ? R : unknown What is the reason that T is not never (1 & 2)? Does the type always come from the last function, or can it come from one of them? ...

typescripttypescript-generics

Adding TypeScript definition file to an npm package: A step-by-step guide

Is it possible to include typescript definitions (.d.ts files) in a pure javascript project without using TypeScript itself? I'm struggling to find any information on how to do this directly in the package.json. ...

typescriptnpm

Encountering problems with TypeScript in a Node application when using the package manager

I am facing an issue while trying to package my node app into an exe using "pkg". I work with TypeScript, and when I attempt to run pkg index.ts --debug, an error pops up. Node.js v18.5.0 Warning Failed to make bytecode node18-x64 for file /snapshot/ ...

node.jstypescriptpackageexepkg-config

Deliver transcluded data to the descendant element of a hierarchical roster

I understand that there have been similar questions asked before, but my situation is slightly different. I am currently constructing a nested list and I want to include custom HTML content in each grandchild element alongside some common HTML. The problem ...

javascriptangulartypescript

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular

The option value in mat-autocomplete is not displaying correctly on IOS devices

When I click on the first option in the dropdown menu, it does not display the selected option in the field. However, when I select the second option, then the value of the first option appears, and when I choose the third option, the value of the second o ...

javascriptangulartypescriptangular-materialangular8

Tips for properly importing types from external dependencies in TypeScript

I am facing an issue with handling types in my project. The structure is such that I have packageA -> packageB-v1 -> packageC-v1, and I need to utilize a type declared in packageC-v1 within packageA. All the packages are custom-made TypeScript packa ...

typescriptnpmdependenciesyarnpkg

Utilizing TypeScript with dc.js for enhanced data visualization capabilities

I've encountered an issue with types while working with dc.js version 4.2.7. To address this, I went ahead and installed what I believe to be the standard types module for dc.js using the following command: Command I used for Installation npm i @type ...

typescripttypescript-typingsdc.js

What is the best way to host a single page application within a sub-directory using nginx?

Trying to set up nginx to host an Angular application from a unique child path. Adjusted the app to use a base href of fish, able to serve root page and assets correctly. However, encountering a 404 error when attempting to reload the page on a child rout ...

angularnginx

typegrapql encounters an issue with experimentalDecorators

I'm currently delving into TypeGraphQL and working on building a basic resolver. My code snippet is as follows: @Resolver() class HelloReslover { @Query(() => String) async hello(){ return "hello wtold" } } However, ...

node.jstypescriptgraphqltypegraphql

Angular CDKScrollable not triggering events

I'm having trouble making the angular CdkScrollable work when creating my own div: <div class="main-section" id="mainsection" #mainsection CdkScrollable> <div class="content" style="height: 300px; backgr ...

javascriptangularangular-cdk-virtual-scroll

How to bypass validation for a hidden textbox in Angular 8

<form [formGroup]="userForm" > <div class="form-group" *ngIf="isHidden"> <label for="firstName">First Name</label> <input class="form-control" name="firstName" id="firstName" type="text" formControlName="firstName"> ...

angular

Angular: Enhancing URL links

Recently, I discovered a function in my code that allows me to cycle through different pictures and change the URL accordingly. The initial URL is obtained using angular routes, where the "domain" parameter consists of the domain.id and the domain.category ...

javascriptangularurl

Leveraging the power of the map function to manipulate data retrieved

I am working on a nextjs app that uses typescript and a Strapi backend with graphql. My goal is to fetch the graphql data from strapi and display it in the react app, specifically a list of font names. In my react code, I have a query that works in the p ...

typescriptnext.jsgraphqlstrapi