typescript - การคลิกปุ่มที่มีอยู่หลายครั้งและซ้อนอยู่ด้วย

ฉันมีปัญหาที่ฉันอยากจะคลิกปุ่มที่มีอยู่หลายครั้งบนเว็บไซต์และถูกซ้อนอยู่ใน cards

ฉันกำลังค้นหา การ์ด ที่ชื่อของสัตว์เลี้ยงคือ Bala ดูไฟล์แนบด้านล่าง และฉันต้องการคลิกปุ่มที่ติดป้าย รายละเอียด บนมัน

สิ่งที่ผมทำได้ไกลที่สุดกับวิธีแก้ของผมคือผมสามารถค้นหา การ์ด ที่ถูกต้องและเพียงแค่คลิกปุ่ม รายละเอียด อันดับแรกเหล่านี้

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>

โค้ดของฉัน :

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

นี่คือสิ่งที่ฉันมีอยู่ในตอนนี้ แต่ฉันได้ลองวิธีการที่แตกต่างกันไปบ้างแล้ว เช่น find('a').contains('Detail') หรือ find('a').contains('btn.btn-primary') และโค้ดตัวอย่างอื่น ๆ ที่คล้ายกัน

เชิงกราฟิก :

นี่คือหน้าตาของเว็บไซต์

ฉันก็ได้ท่องดูหัวข้อ SO ที่คล้ายกันบางส่วนแล้ว แต่หัวข้อเหล่านั้นก็ใช้งานได้ไม่ค่อยตรงกับฉันเท่าไหร่

คำตอบ #1

คุณมีแนวคิดที่ถูกต้องในการหาการ์ดก่อน นี่คือวิธีที่คุณสามารถปรับการทดสอบของคุณให้ทำได้

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

คุณกำหนดองค์ประกอบและข้อความในคำสั่งเดียว

คำตอบ #2

คุณสามารถใช้ eq หากคุณต้องการคลิกปุ่มใดปุ่มหนึ่ง:

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

หรือถ้าคุณต้องการคลิกปุ่มทั้งหมดทีละปุ่ม คุณสามารถใช้ each:

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