javascript - 如何单击与 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

根据Best Practices | Cypress - Selecting elements ，最好的方法是使用专用的 data-cy 属性进行 cypress 测试，然后在测试中使用 CSS 属性选择器。

Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.

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

<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 ..) 正在开发中。