Pressing a button that appears multiple times and is also embedded within layers

I am facing an issue where I need to interact with a button that appears multiple times on the website within nested cards.

Specifically, I am trying to locate the card containing a pet named Bala, as shown in the attachment below, and click on the Detail labeled button within that card.

So far, I have managed to identify the correct card but have only been able to click on the first instance of the Detail button.

HTML:

<div _ngcontent-eng-1="" class="col-md-3 pt-3 pb-3">
            <app-pet _ngcontent-eng-1="" _nghost-eng-2="" class="dog"><div _ngcontent-eng-2="" class="pet">
  <!--template bindings={}--><div _ngcontent-eng-2="" class="card">
    <div _ngcontent-eng-2="" class="card-block">
      <h4 _ngcontent-eng-2="" class="card-title">Bala</h4> //Checking this?
      <h6 _ngcontent-eng-2="" class="card-subtitle mb-2">
        <!--template bindings={}--><div _ngcontent-eng-2="" class="badge badge-pill badge-success">
          New
        </div>
        <!--template bindings={}--><div _ngcontent-eng-2="" class="badge badge-pill badge-info">
          Important
        </div>
        &nbsp;
      </h6>
      <ul _ngcontent-eng-2="" class="list-group list-group-flush">
        <li _ngcontent-eng-2="" class="list-group-item">
          <div _ngcontent-eng-2="" class="age">
            <span _ngcontent-eng-2="">Age: </span>
            <span _ngcontent-eng-2="">20</span>
          </div>
        </li>
        <li _ngcontent-eng-2="" class="list-group-item">
          <div _ngcontent-eng-2="" class="type">
            <a _ngcontent-eng-2="" href="/pet/494">
              <img _ngcontent-eng-2="" src="/assets/dog.gif">
            </a>
          </div>
        </li>
        <li _ngcontent-eng-2="" class="list-group-item">
          <a _ngcontent-eng-2="" class="btn btn-primary" href="/pet/494">
            Detail
          </a> //CLICK
        </li>
      </ul>
    </div>
  </div>
</div>
</app-pet>
</div>

My code

Then('I click on the Detail button', () => {
  cy.get('div.card').contains('Bala').find('a.btn.btn-primary').click();
});

This is my current approach, however, I have experimented with different methods such as using find('a').contains('Detail') or 

find('a').contains('btn.btn-primary')
, among others.

Graphically

Here is a visual representation of the site

I have also explored similar queries on SO, but none seemed to provide a suitable solution for my specific scenario.

typescriptcypress

Answer №1

Great strategy on locating the card initially. Here's a modified version of your test to accomplish it.

When('I select the Detail button', () => {
  cy.contains('div.card', 'Bala').find('a.btn.btn-primary').click();
})

You're effectively pinpointing both the element and the text in a single action.

Answer №2

If you need to select a specific button to click, you can utilize the eq method:

cy.contains('a', 'Detail').eq(0).click() //Clicks first Detail button
cy.contains('a', 'Detail').eq(1).click() //Clicks second Detail button

Alternatively, if you want to click on all the buttons individually, you can make use of each:

cy.contains('a', 'Detail').each(($ele) => {
  cy.wrap($ele).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 are the steps to resolve the UglifyJs error stating 'Unexpected token operator'?

When running the following command in my Angular app: > ng build --prod --aot --env=staging I encounter this error message: ERROR in vendor.0625f773941bc83e6748.bundle.js from UglifyJs Unexpected token operator «*», expected punc «(» [vendor.0625 ...

angulartypescriptnpm

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

javascriptangulartypescript

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

csstypescripthighchartstypescript2.0

Typescript struggles to identify properties that have no business being there

In my function for formatting data, the "values" contained within this data are clearly defined. However, TypeScript is failing to recognize new properties that are invalid when mapping these values. The issue can be best understood by looking at the code ...

typescript

Generate types based on properties of a nested interface dynamically

Consider the setup provided: enum FormGroups { customer = 'customer', address = 'address', } interface Customer { 'firstName': string; } interface Address { 'street': string; } interface SomeFormEvent { ...

typescript

Develop an Angular 6 application that utilizes an observable to monitor changes in a variable

I am working with Angular 6 and I need to monitor a variable for any changes and then stop or unsubscribe when the variable has a value. My initial thought was to use an Observable: myValue; // The variable that needs to be monitored myObservable = Obse ...

angulartypescriptrxjsangular6rxjs6

Issue found in VS2015 with the sequence of AngularJS TypeScript ts files within the appBundle.js file

I've been diving into AngularJS and TypeScript with the VS2015 RC Cordova TypeScript project. Recently, I created a "MyController.ts" file in the same folder as "index.ts". The code worked perfectly fine: module MyTestApp{ export class MyContro ...

angularjscordovatypescriptvisual-studio-2015

Tips for isolating data on the current page:

Currently, I am using the igx-grid component. When retrieving all data in one call and filtering while on the 3rd page, it seems to search through the entire dataset and then automatically goes back to "Page 1". Is there a way to filter data only within th ...

javascriptangulartypescriptinfragisticsigx-grid

What's the best way to implement satisfies with a generic type?

In my development process, I am working with components that have default values combined with props. To streamline this process, I created a single function for all components: export function getAssignProps <T extends {}>(propsMass:T[]){ return ...

reactjstypescripttypescript-typingstypescript-generics

Encountering the issue of receiving "undefined" when utilizing the http .get() method for the first time in Angular 2

When working in Angular, I am attempting to extract data from an endpoint. Below is the service code: export class VideosService { result; constructor(private http: Http, public router: Router) { } getVideos() { this.http.get('http://local ...

angulartypescriptangular2-services

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Currently, I am working on coding a ReactJS class using Typescript and Material-ui in a .tsx file. In one of the custom components that I have created, I need to establish a reference to another component used within this custom component. export class My ...

reactjstypescriptvalidationmaterial-uitsx

How to retrieve a value from a base64-decoded string in Angular 6?

I successfully decoded a Base64 string using the xml2js library and obtained the following XML value: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="293" height="102" viewBox="0 0 293 102" xmlns="http://www.w3.org/2000/svg" ...

angulartypescriptbase64

What is the method for setting autofocus to the first input element within a loop?

I am currently working on a loop to display inputs, and I would like to be able to add focus to the first input element when it is clicked. Does anyone have any suggestions on how I can select that first element and set autofocus on it? ...

javascriptangulartypescriptfocus

What is preventing me from using property null checking to narrow down types?

Why does TypeScript give an error when using property checking to narrow the type like this? function test2(value:{a:number}|{b:number}){ // `.a` underlined with: "Property a does not exist on type {b:number}" if(value.a != null){ ...

typescript

ESLint is notifying that the prop validation for ".map" is missing, with the error message "eslint react/prop-types" occurring in a Typescript React environment

Hey everyone, excited to be posting for the first time! Currently, I'm working on a small project using Typescript and React. I've run into an issue with ESLint where it doesn't recognize that a prop variable of type string[] should have a ...

reactjstypescripteslint

Ways to verify if a certain type possesses an index signature during runtime

Is it possible to create a type guard in JavaScript that checks if a given type implements an index signature? I'm unsure if this concept would be viable, but here is the idea: I am looking for guidance on how to implement the logic within this funct ...

typescript

I am experiencing difficulties with my data not reaching the function in my component.ts file within Angular

My current project involves integrating Google Firebase to handle the login functionality. I encountered an issue where the data inputted from the HTML page to the component.ts file was not being processed or reaching Firebase. However, when I initialized ...

angulartypescriptfirebasefirebase-authentication

Create an Angular material table with expandable rows that become sticky when scrolled past, then automatically unstick once they are no longer in view

Currently, I am working with Angular Material Table v11.1.0 which includes a main row with expandable rows. I want the main row to become sticky once an expandable row is opened and remain sticky while scrolling through the table. My goal is for the main ...

htmlangulartypescriptangular-material

An error occurred in TSX + React: Uncaught TypeError - The property 'setState' cannot be read since it is undefined in Menu.handleClick

Currently, I am utilizing [email protected] along with react and react-dom @15.6.2. Encountering a troublesome issue that I can't seem to debug: Uncaught TypeError: Cannot read property 'setState' of undefined at Menu.handleClick. Thi ...

reactjstypescriptjsx

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

javascripthtmlangulartypescript