Cypress - 迭代每个元素并在移动到下一个迭代/元素之前执行一些操作

Question

我在 cypress 中遇到以下问题：

1. 获取包含按钮的特定列的所有表格单元格。
2. 迭代每个单元格 --> 找到该单元格内的按钮。
3. 单击该按钮。
4. 等待模式对话框出现
5. 接受模式并等待它消失。
6. 等待通知出现然后消失。
7. 移动到下一个单元格元素/迭代

我目前拥有的代码：

cy.get("tr[some attribute]").each(($element, $index, $list) => {
cy.wrap($element).find("button").click();
cy.get(".modal-dialog").should('be.visible');
cy.get(".modal-dialog button[type='submit']").should('be.visible').click();
cy.get("toast").should('be.visible').as('@toast')
cy.get('@toast').should('not.be.visible')
})

问题在这里：

1. cypress 不会等待第一次迭代完成并运行所有迭代。我可以看到打开了多个模式对话框。
2. Cypress 异步单击所有按钮，无需等待上一次迭代完成。
3. cypress 在期望 toast 消失的步骤上失败，尽管我可以看到 toast 消息不存在。

提前致谢！

Answer 1

我运行了一个带有模式和吐司的简单应用程序。如果修复测试的吐司部分，则可以使用

.each()

迭代行

要修复吐司，您需要删除别名并第二次

cy.get('toast')

。

别名值存储在内部，当

should()

执行重试时不会改变。请记住，Toast 会在屏幕上停留几秒钟，因此您必须使用重试来测试它是否已经消失。 （您可能需要根据 Toast 持续时间增加超时）。

需要修复的最小更改：

cy.get("tr[some attribute]").each(($row) => {
  cy.wrap($row).find("button").click();
  
  cy.get(".modal-dialog").should('be.visible');
  cy.get(".modal-dialog button[type='submit']").should('be.visible').click();

  cy.get("toast").should('be.visible')
  // timeout must exceed toast auto-close period
  // if you run the test in background or in CI, allow a few seconds extra
  cy.get('toast', {timeout:10000}).should('not.be.visible') 

})

我一次只在屏幕上显示一个吐司，迭代等待

cy.get('toast', {timeout:10000}).should('not.be.visible') 

完成。

Answer 2

1/2。从外观上看，您似乎正在获取所有行，然后迭代每一行。如果按钮 html 元素仅存在于您指定的列中，则将

.find()

命令移至

.each()

上方。

3. 如果您仅在别名设置后立即将其用于命令，则别名似乎有点不必要。同样从 v6.0.0 开始，断言应该是

   not.exist

   。

您的更新代码应如下所示。

cy.get("tr[some attribute]")
  .each( $row => {
     cy.wrap($row)
       .find("button[type=submit") // get only cell with button type submit
       .should('be.visible') // may want to play around with command timeouts based on your button appearing
       .click()
     cy.get(".modal-dialog")
       .should('be.visible') // modal appears
       .find(button[type='submit']")
       .should('be.visible') // button appears in modal
       .click();
     cy.get("toast").should('be.visible') 
     cy.get("toast").should('not.be.visible')
})