Cypress批量删除问题：遍历跳转页面执行删除操作

算力阿峰

2026-8-1

处理Cypress批量删除购物列表项的问题

问题分析

你当前的代码直接用each遍历初始获取的所有删除按钮，会遇到DOM元素失效的问题：因为每次删除后页面会更新（返回列表页），一开始获取的元素列表已经和当前DOM不匹配，后续点击会报错。

解决方案：递归删除（每次基于最新DOM获取元素）

改用递归方式，每次只处理第一个删除按钮，操作完成后回到列表页，再检查是否还有剩余按钮，直到全部删除：

const deleteAllItems = () => {
  // 尝试获取第一个删除按钮
  cy.get('a[href*=delete][href$=confirm]').first()
    .then(($firstBtn) => {
      // 点击跳转到确认页
      cy.wrap($firstBtn).click({ force: true });
      // 断言确认页跳转成功（可根据实际URL调整）
      cy.url().should('include', 'delete/confirm');
      // 点击红色Delete按钮
      cy.contains('button', 'Delete').click({ force: true });
      // 断言回到列表页（可根据实际URL调整）
      cy.url().should('include', 'shopping-list');
      // 递归执行，处理剩余项
      deleteAllItems();
    })
    .catch(() => {
      // 没有找到删除按钮时结束流程
      cy.log('所有购物列表项已删除完成');
    });
};

// 启动批量删除
deleteAllItems();