如何使用Cypress.io单击与另一个DIV关联的链接？

Question

我在使用Cypress.io中的.click()函数找到与div中特定"行"相关的项目时遇到问题.下面是我的示例div表:

<div class="table"> 
  <div class="col-sm-10">Item 1</div>
  <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
  </div>

  <div class="col-sm-10">Item 2</div>
  <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
  </div>
</div>

我想要做的是点击指定行的A链接.例如,我想点击包含第2项文本的"行"的A链接.我需要动态执行此操作,因为项目的顺序以及项目的名称可能会根据具体情况而变化数据.

我正在尝试这样的事情:

cy.get('div:contains("Item 2")').click()

但是div不是可点击的,它是代码中的以下A. 有任何想法吗？

Answer 1

cy.contains('div', 'Item 2').next().find('a').click()

Answer 2

根据最佳实践| 赛普拉斯 - 选择元素,最好的方法是使用专用data-cy属性进行cypress测试,然后在测试中使用CSS属性选择器.

最佳实践:使用data-*属性为选择器提供上下文,并使它们与CSS或JS更改隔离.

在你的情况下,我会这样做:

<div class="table"> 
   <div class="col-sm-10">Item 1</div>
   <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
   </div>
   <div class="col-sm-10">Item 2</div>
   <div class="col-sm-2 action">
    <a href="#" data-cy="item-2-anchor"><i class="fa-times-circle-o"></i></a>
   </div>
</div>

cy.get('[data-cy="item-2-anchor"]').click();

我强烈建议做这种方式的项目范围内,因为它保证尽管到其他属性(所做的任何更改工作测试id,class,href正在开发..).