如何在Cypress中定位指定名称的React卡片并点击对应按钮

你的问题在于当前测试代码会点击页面上所有data-cy="accederResponses"的按钮，无法精准定位到名称为"CA2"的卡片内的按钮。可以通过限定作用域的方式解决，以下是两种可行方案：

方案一：链式遍历父元素定位 #

通过找到"CA2"的标题元素，向上遍历到卡片容器，再在容器内定位按钮：

describe("LOAD OK", function() {
    it("should load without crashing and click CA2's Acceder button", function() {
      cy.visit("http://localhost:3000");
      // 定位CA2标题 → 找到所属卡片容器 → 点击容器内的按钮
      cy.contains('[data-cy="topicName"]', 'CA2')
        .parents('.card') // 向上查找最近的.card父容器
        .find('[data-cy="accederResponses"]')
        .click();
    }); 
}); 

方案二：使用within限定操作范围 #

直接定位包含"CA2"文本的卡片，然后在卡片内部执行点击操作：

describe("LOAD OK", function() {
    it("should load without crashing and click CA2's Acceder button", function() {
      cy.visit("http://localhost:3000");
      // 找到包含CA2的卡片，限定后续操作在该卡片内
      cy.contains('.card', 'CA2')
        .within(() => {
          cy.get('[data-cy="accederResponses"]').click();
        });
    }); 
}); 

说明 #

两种方案的核心都是缩小按钮的查找范围，确保只在目标卡片内定位按钮，避免误点击其他卡片的相同按钮。如果可以修改React组件代码，还可以给卡片添加专属data-cy属性（比如data-cy="topic-card"），进一步提升定位的精准性。

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