如何点击嵌套在含宠物名Bala的card中的Detail按钮？

页面上存在多个嵌套在card中的按钮，需要找到宠物名为Bala的card，并点击其中标注为Detail的按钮。目前思路是定位正确的card后点击首个Detail按钮，但现有代码及尝试的写法均未成功。

现有代码 #

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')

对应的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>
      <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>
        </li>
      </ul>
    </div>
  </div>
</div>
</app-pet>
</div>

解决方案 #

方法1：精准定位标题后向上找父级card #

通过精准匹配Bala的标题元素，再向上定位到对应的card容器，最后查找内部的Detail按钮：

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

方法2：使用within()限定查找范围 #

用within()把后续操作的范围限定在目标card内部，避免其他元素干扰：

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

失败原因说明 #

• find('a').contains('btn.btn-primary')错误：contains()是匹配文本内容，而btn.btn-primary是类名，应该用类选择器而非文本匹配。
• find('a').contains('Detail')可能失效：card内存在其他<a>标签，未限定类名的情况下可能匹配到错误元素，加上.btn.btn-primary类选择器可精准定位目标按钮。

内容的提问来源于stack exchange，提问作者Blain