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

我在使用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>

但是div不是可点击的，它是代码中的以下A。有什么想法吗？

根据，最好的方法是在cypress测试中使用专用的

数据cy

属性，然后在测试中使用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();

项目1
项目2
cy.get（'[data cy=“item-2-anchor”]'）。单击（）；

---

我强烈建议在整个项目范围内这样做，因为它可以保证工作测试，尽管对开发中的其他属性（

id

，

class

，

href

）进行了任何更改

我同意。。如果可能的话，你应该在你正在测试的东西上加上某种id。如果你有权使用该代码，我强烈建议。后来HTML的结构发生了变化，应用程序仍然可用，但测试中断了。用一个有意义的id来定位特定元素是更好的方法。我不喜欢使用data cy属性，我更喜欢id属性，因为它更容易选择on。感谢您的指导。继续前进，我一定会从这开始工作。但是在这一点上，我不能让他们更改div的属性值。@Maccurt明白你的意思了吗？我用cy.getByDataName扩展了cypress命令，它在

数据名

属性上进行选择（以防我们离开cypress）然后我在实际的应用程序代码中使用id——将测试和代码完全分开。是的，我同意，但这与他所寻求的最为相似。wscourge的答案显然是正确的是，我开始把你写的东西打出来，你比我快。我在工作中做了一些测试，他们使用cypress，他们正在和第n个孩子和第n个兄弟姐妹在一个div上进行选择，我阻止了这一点……谢谢塞吉奥，你是对的。我试过你的一个选择，但Cypress没有找到a。CypressError:超时重试：应查找元素“a”，但从未找到它。元素询问：我没有看到他不是祖先。使用next（）代替closes（）：cy.contains（'div'，'Item 2'）。next（）。查找（'a'）。单击（）；这是一个很好的答案，它符合创建HTML的模式，因此可能是健壮的。

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

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