页面每次重载图片时如何使用cy.each()实现全量图片删除测试？

问题根源在于你当前的代码一次性获取了所有删除按钮的DOM元素，点击第一个按钮后页面重载，剩余元素已脱离当前DOM树，导致后续点击操作失效。

针对你的场景（每次删除后页面重载，最多显示15张图片），可以用递归查询+删除的方式，每次只处理当前页面存在的删除按钮，确保操作基于最新DOM：

// 定义递归函数删除所有图片
const deleteAllImages = () => {
  // 每次重新查询当前页面的删除按钮
  cy.get('[datacy="deleteImageIconX"]').then($deleteButtons => {
    if ($deleteButtons.length > 0) {
      // 点击第一个删除按钮
      cy.wrap($deleteButtons.first()).click()
      // 等待页面重载完成：替换为你页面中表示加载完成的元素标识
      cy.get('[datacy="imageItem"]').should('exist')
      // 递归调用，继续删除剩余图片
      deleteAllImages()
    }
  })
}

// 执行删除操作
deleteAllImages()

关键说明： #

• 每次操作前重新查询删除按钮，确保基于最新DOM状态，避免操作已失效的元素
• 点击后等待页面重载完成（比如等待图片列表重新渲染），保证页面状态稳定后再进行下一次删除
• 递归逻辑会自动终止，直到页面中无剩余删除按钮

你也可以用循环方式实现，适配性稍弱但逻辑直观：

// 先获取初始删除按钮总数，循环执行删除
cy.get('[datacy="deleteImageIconX"]').its('length').then(totalImages => {
  Cypress._.times(totalImages, () => {
    // 每次重新获取第一个删除按钮
    cy.get('[datacy="deleteImageIconX"]').first().click()
    // 等待页面更新，验证页面最多显示15张图片
    cy.get('[datacy="imageItem"]').should('have.length.at.most', 15)
  })
})

这两种方式都能解决页面重载导致的DOM元素失效问题，确保所有图片被成功删除。

内容的提问来源于stack exchange，提问作者Luke