Cypress如何捕获删除后重新加载的元素完成全量删除操作

仅在初始化时获取了一次待删除元素的总数量，递归终止条件为初始计数归零，因此删除完首次加载的10条元素后就会停止，不会感知到后续分页自动补位新加载的待删除元素。

将固定计数的递归改为每次删除后重新查询当前页是否还有待删除元素，只要存在就继续执行删除，直到所有符合条件的元素全部清理完成。

核心调整点 #

• 移除初始固定计数逻辑，递归终止条件改为「查询不到符合条件的待删除元素」
• 替换硬等待cy.wait(1000)为元素状态断言，利用Cypress自带重试机制提升用例稳定性
• 每次删除完成后重新查询元素列表，自动捕获分页补位的新元素

最终代码 #

deleteDeliveryAddresses() {
    const selector = 'foerch-delivery-addresses-item .row:contains("automated address name")'
    const deleteRow = () => {
        // 先检查当前页面是否存在待删除元素
        cy.get('body').then($body => {
            if ($body.find(selector).length === 0) {
                // 无待删除元素，终止递归
                return
            }
            // 执行单条删除逻辑
            cy.get(selector).eq(0)
              .as('rowDeleted')
              .find('button:nth-child(2)').click({force:true})
            cy.xpath("//button[normalize-space()='Bestätigen']").should('be.visible').click()
            cy.xpath("//button[normalize-space()='Bestätigen']").should('not.exist')
            // 递归执行下一次删除
            deleteRow()
        })
    }
    // 启动删除流程
    deleteRow()
}

可选优化：增加最大删除次数限制 #

如果担心选择器写错导致无限递归，可以增加最大删除次数阈值，避免用例卡死：

deleteDeliveryAddresses(maxDeleteCount = 100) {
    const selector = 'foerch-delivery-addresses-item .row:contains("automated address name")'
    let deletedCount = 0
    const deleteRow = () => {
        // 到达最大删除次数或无待删除元素时终止
        if (deletedCount >= maxDeleteCount) return
        cy.get('body').then($body => {
            if ($body.find(selector).length === 0) return
            
            cy.get(selector).eq(0)
              .as('rowDeleted')
              .find('button:nth-child(2)').click({force:true})
            cy.xpath("//button[normalize-space()='Bestätigen']").should('be.visible').click()
            cy.xpath("//button[normalize-space()='Bestätigen']").should('not.exist')
            
            deletedCount++
            deleteRow()
        })
    }
    deleteRow()
}

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