reactjs 找到具体的名称与柏树和React，然后按下按钮

mgdq6dx1 于 2023-04-05 发布在 React

关注(0)|答案(2)|浏览(145)

我在react组件中有这样的代码：

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

reactjs

来源：https://stackoverflow.com/questions/75906347/find-specifc-name-with-cypress-and-react-to-then-press-button

2条答案

按热度按时间

0yg35tkg1#

您的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搜索，也就是说，它在DOM树中向上寻找最近的selector。
.find(selector)是一个派生搜索，它会向下DOM树查找selector。

赞(0）回复(0）举报 2023-04-05

hmae6n7t2#

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();
  });
});

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 找到具体的名称与柏树和React，然后按下按钮

2条答案

相关问题

热门标签

最新问答