typescript - Klicka på en knapp som finns flera gånger och också är inbäddad

Jag har ett problem där jag skulle vilja klicka på en knapp som finns flera gånger på sajten och är inbäddad i cards.

Jag söker efter kortet där husdjurets namn är Bala, se bilagan nedan, och jag skulle vilja klicka på knappen märkt Detalj på det.

Det längsta jag har kommit med min lösning är att jag kan söka efter det korrekta kortet och helt enkelt klicka på den första av dessa Detalj-knappar.

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>

Min kod :

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

Detta är vad jag har just nu men jag har redan försökt några olika tillvägagångssätt, som find('a').contains('Detail') eller find('a').contains('btn.btn-primary') och några andra liknande kodsnuttar.

Grafiskt :

Så här ser webbplatsen ut

Jag har också bläddrat igenom några liknande SO-ämnen, men de fungerade inte riktigt för mig.

Svar #1

Du har rätt idé att hitta kortet först. Så här kan du ändra ditt test för att göra det.

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

Du specificerar elementet och texten i ett kommando.

Svar #2

Du kan använda eq om du vill klicka på en viss knapp:

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

Eller om du vill klicka på alla knappar en efter en kan du använda each:

cy.contains('a', 'Detail').each(($ele) => {
  cy.wrap($ele).click()
})