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

根据Best Practices | Cypress - Selecting elements，最好的方法是为赛普拉斯测试使用专用的data-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();

我强烈建议在整个项目范围内使用此方法，因为即使正在开发中的其他属性（id，class，href ..）进行了任何更改，它也可以保证工作测试。

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

2 个答案: