用柏树找到特定名称并做出反应然后按下按钮

Question

我的反应组件中有这段代码：

return (
    <div className="col">
      <div className="card border-secondary mb-3 text-center">
        <div className="card-header"> 
          <h5 data-cy='topicName' className="col-md"> {topicName} </h5> 
          <span> Rol: {capitalize(author)} </span>
        </div>
        
        <div className="card-body text-secondary">
          <p className="card-text">Última actualización: 16/06/2022</p>
        <div className="">                
        </div>
        </div>
      
        <div className="card-footer bg-transparent">
          <Link to='/responses' >
            <button data-cy='accederResponses' className="btn btn-outline-info " onClick={()=> onSetTopic(topicName, workspace_id, author, topicId)}>Acceder</button>
          </Link>
        </div>
      </div>
    </div>              
  );  

我想在柏树中加载页面，并在“加速器”按钮中单击（），但只是在名称为“CA2”的卡中。

但我不知道怎么做。 现在我在测试中有这个：

describe("LOAD OK", function() {
    it("should load without crashing", function() {
      cy.visit("http://localhost:3000");
      cy.contains('[data-cy="topicName"]', 'CA2');
      cy.get('[data-cy="accederResponses"]').click(); //the button in the card 'CA2'
    }); 
   
}); 

Answer 1

Try this :
describe("LOAD OK", function() {
  it("should load without crashing", function() {
    cy.visit("http://localhost:3000");
    cy.contains('[data-cy="topicName"]', 'CA2')
      .closest('.card-footer')
      .find('[data-cy="accederResponses"]')
      .click();
  });
});

Answer 2

您的 HTML 示例格式错误，我假设

.card-body

是（或应该是）如下所示，因为它在语义上是正确的。

<div className="card-body text-secondary">
  <p className="card-text">Última actualización: 16/06/2022</p>
</div>

在这种情况下，测试最简单：

cy.contains('[data-cy="topicName"]', 'CA2')
  .closest('.card')
  .find('[data-cy="accederResponses"]')
  .click()

.closest(selector)

是一个 ancester 搜索，也就是说它会 up DOM 树寻找最近的

selector

.

.find(selector)

是一个 descendent 搜索，它会 down DOM 树寻找

selector

.