每次页面重新加载图像时如何使用 cy.each() ？

Question

期望的结果：我想编写一个单击每个“X”的测试。我想这样做，直到没有任何图像留下。

使用案例：

我每次都会重新加载图像列表，以确保回填最多 15 个图像。

1. 用户有18张图片
2. 在第一页我显示 15
3. 当用户删除 1 个图像时，我重新加载图像，因此第 1 页上再次有 15 个图像，而现在第 2 页上只有 2 个图像。

错误：

由于重新加载图像，导致.eachCypress 的功能中断并出现以下错误消息：

cy.click() 失败，因为该命令导致页面更新，但您尝试继续命令链。主题不再附加到 DOM，并且 Cypress 无法在 cy.click() 等命令之后重新查询页面。

赛普拉斯代码实施：

cy.get('[datacy="deleteImageIconX"]').each(($el) =>  cy.wrap($el).click());

我该怎么做才能成功运行满足我的用例的测试？

Answer 1

我以前见过这个，这个答案极大地帮助了我waiting-for-dom-to-load-cypress。

诀窍不是迭代元素，而是对总数 (18) 使用循环并在循环内确认删除。

for (let i = 0; i < 18; i++) {
  cy.get('[datacy="deleteImageIconX"]')
    .first()
    .click()
    .should('not.exist');  
}

该策略消除了以下问题：

• 尝试使用过时的元素引用（分离）
• 迭代太快（首先确认当前操作完成）
• 页数小于总计数（迭代之间的页面调整）