Cypress滚动加载测试问题：循环无法终止的排查

你的代码循环停不下来，核心原因是Cypress命令的异步特性和循环调度逻辑不匹配，具体问题点如下：

• stopScroll的赋值在异步的.then()回调中，但cy.wrap(scrollArray).each()是同步调度所有循环迭代的——在Cypress开始执行命令队列前，100次循环就已经被全部安排好了，后续stopScroll变为true也无法终止已经调度的迭代。
• return false的位置错误，它嵌套在内部的.then()里，无法触发each()循环的终止逻辑。

正确实现方案（递归式滚动判断） #

改用递归函数来控制滚动流程，完全适配Cypress的异步执行逻辑：

const scrollUntilAllCardsLoaded = () => {
  // 先获取当前最后一张卡片的文本
  cy.get('[data-testid="card"]').last().invoke('text').as('lastCardText')

  // 滚动到页脚触发加载
  cy.get('[data-testid="footer"]').scrollIntoView().should('be.visible')

  // 替换固定等待为更可靠的逻辑：等待新卡片出现（可选）
  // cy.get('[data-testid="card"]').then($cards => {
  //   const initialCount = $cards.length
  //   cy.get(`[data-testid="card"]:nth-child(${initialCount + 1})`).should('exist')
  // })
  
  cy.wait(1000) // 若用上面的卡片数量判断，可删除此行固定等待

  // 获取滚动后的最后一张卡片文本，对比判断是否继续滚动
  cy.get('[data-testid="card"]').last().invoke('text').then(currentCardText => {
    cy.get('@lastCardText').then(lastCardText => {
      if (currentCardText !== lastCardText) {
        scrollUntilAllCardsLoaded() // 文本不同，递归继续滚动
      } else {
        cy.log('所有卡片已加载完成，停止滚动')
      }
    })
  })
}

// 启动测试流程
scrollUntilAllCardsLoaded()

方案优势 #

1. 递归逻辑完全遵循Cypress异步执行顺序，每次滚动后才判断是否继续，不会出现提前调度的问题。
2. 使用as()和@语法共享异步获取的文本，避免了全局变量的作用域陷阱。
3. 可替换固定等待为等待卡片数量增加的逻辑，比固定时间等待更稳定，适配不同加载速度的场景。

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