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

Having some issues with validating numbers in typescript

When implementing react hook form in my React app, I encountered an issue while validating specific fields and had to add some conditions to the schema. yup .object({ test1: yup.number().when('test2', (test2: number, schema: yup.NumberSchem ...

reactjstypescriptreact-hook-formyup

Having trouble creating a unit test for exporting to CSV in Angular

Attempting to create a unit test case for the export-to-csv library within an Angular project. Encountering an error where generateCsv is not being called. Despite seeing the code executed in the coverage report, the function is not triggered. Below is the ...

javascriptangulartypescriptkarma-jasmineexport-to-csv

The page has been updated following a refresh

I'm currently working on developing an Instagram-inspired platform using Angular 6, but I've run into a puzzling issue. When I refresh the page in my home component, everything reloads correctly and displays all my posts as expected. However, if ...

angulartypescript

Issue encountered while importing TypeScript files from an external module in a Next.js project

Encountering an issue within my Next.js project with the following project structure: ├── modules/ │ └── auth/ │ ├── index.ts │ ├── page.tsx │ └── package.json └── nextjs-project/ ├─ ...

javascripttypescriptwebpacknext.jsbuild

What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Just a moment ago I posted this question on Stack Overflow, and now I have a follow-up query :) Take a look at this code snippet: import { ClassConstructor } from "class-transformer"; import { useQuery as useApolloQuery } from "@apollo/clie ...

typescripttypescript-typingsapollo-clienttypescript-genericsclass-transformer

Ensure that selecting one checkbox does not automatically select the entire group of checkboxes

Here is the code I'm using to populate a list of checkboxes. <label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item.id"> <input type="checkbox" name="item_{{item.id}}" ng-value="{{item.id}}" ng-model="vm.selectedItem" /& ...

angularjstypescriptcheckbox

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...

javascripttypescriptwebpackaurelia

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

Here is the code snippet I am working with: <template> <div> <ul v-if="list.length !== 0"> {{ list }} </ul> </div> </template> < ...

javascripttypescriptvue.jsvuejs3

After compiling the code, a mysterious TypeScript error pops up out of nowhere, despite no errors being

Currently, I am delving into the world of TypeScript and below you can find the code that I have been working on: const addNumbers = (a: number, b: number) => { return a + b } Before compiling the file using the command -> tsc index.ts, the ...

typescript

Determining the appropriate generic type in Typescript

In my code, there is a method designed to extend an existing key-value map with objects of the same type. This can be useful when working with database query results. export function extendWith< T extends { id: string | number }, O = | (T[" ...

javascripttypescriptgenerics

Troubleshooting Typescript with Chrome when packaged by Webpack on Visual Studio 2017 using .NET Core 2.2

Many questions have been asked about debugger issues in Visual Studio 2017 with TypeScript and Webpack. Despite the common answer being that it should work by default, my debugger is still not functioning properly. I am new to TypeScript and Webpack, so I ...

typescriptwebpack.net-coregulpsource-maps

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

cssangulartypescript

Tips for reusing a Jest mock for react-router's useHistory

When testing my code, I set up a mock for the useHistory hook from react-router-dom like this: jest.mock("react-router-dom", () => ({ useHistory: () => ({ length: 13, push: jest.fn(), block: jest.fn(), createHref: jest.fn(), go ...

reactjstypescriptreact-routerjestjs

Enhancing Request JSON Body Validation in Next.js 14 API Handler

I'm currently in the process of developing an API for my iOS application using Next.js 14. I have managed to get it up and running successfully, however, I am facing some challenges when it comes to properly validating the body of a request. ESLint is ...

javascripttypescriptnext.js

Transform the property of type any/unknown into a specific generic type T within the map

Suppose I start with... type TypeNonGeneric = { prop1: any, prop2: string }; How do I transform it into... type TypeGeneric<T> = { prop1: T, prop2: string }; I have reviewed the documentation and it appears that I need to create a new generic type ...

typescriptmapped-types

I am experiencing issues with my Angular2 project where not all of my component variables are being passed to the

My problem involves sending three variables to my HTML template, but it only recognizes one of them. The HTML template I am using looks like this: <div class="page-data"> <form method="post" action="api/roles/edit/{{role?.ID}}" name="{{role? ...

typescriptangularangular2-template

Retrieve a specific number from an equation

With my limited knowledge of TypeScript, I am attempting to extract a specific number from an expression. The goal is to locate and retrieve the digit from the following expression. ID:jv.link.weight:234231 In the given string, I aim to extract the numb ...

typescript

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

One exciting feature is the drag and drop component that allows users to add multiple files. However, there seems to be an issue with displaying the content of a JSON file once it's added. Below is the code snippet in question: if (files?.length) ...

javascriptreactjsjsontypescriptblob

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

Creating a TypeScript shell command that can be installed globally and used portably

I am looking to create a command-line tool using TypeScript that can be accessed in the system's $PATH once installed. Here are my criteria: I should be able to run and test it from the project directory (e.g., yarn command, npm run command) It must ...

node.jstypescriptnpmyarnpkgts-node