本文介绍如何使用 cypress 和 cypress-recurse 插件高效处理分页场景：自动遍历多页商品列表，定位指定名称的商品并点击，避免递归陷阱与异步状态失控。
本文介绍如何使用 cypress 和 cypress-recurse 插件高效处理分页场景：自动遍历多页商品列表，定位指定名称的商品并点击，避免递归陷阱与异步状态失控。
在电商类 Web 应用测试中，常需在分页商品列表（如 #product_list）中查找特定商品并执行交互（如点击）。由于目标元素可能位于后续分页，直接使用 .each() 或手动递归极易引发 Cypress 命令队列混乱、状态不可控、超时失败等问题。推荐采用 声明式 + 重试驱动 的方案——即借助社区成熟插件 cypress-recurse 实现健壮、可读、可维护的分页搜索逻辑。
✅ 推荐方案：使用 cypress-recurse 插件
首先安装插件：
npm install -D cypress-recurse
并在 cypress/support/e2e.js（或 commands.js）中导入：
import { recurse } from 'cypress-recurse'
Cypress.Commands.add('recurse', recurse)
接着编写稳定可靠的分页查找逻辑：
const itemsSelector = '#product_list li div.produkti' // 定位到每个商品容器（非仅 h5 文本节点）
const nextPageSelector = '#pagination_next_bottom'
const targetProductName = 'Printer Brother MFP Laser HL1222WEYJ1'
// 递归查找：直到页面包含目标商品，或达到默认超时（4s）
recurse(
() => cy.get(itemsSelector), // 每次获取当前页所有商品容器
(items) => expect(items).to.contain(targetProductName), // 断言目标文本存在于其中
{
post: () => cy.get(nextPageSelector).click(), // 若未找到，则点击「下一页」
limit: 10, // 最大尝试页数（防无限翻页）
timeout: 30000 // 总超时时间（30s）
}
)
.contains(targetProductName) // 在最终匹配的页面中精准筛选出含该文本的元素
.click() // 执行点击（自动等待元素可见/可交互）
? 关键设计说明
为何选择 div.produkti 而非 h5？
直接定位商品容器更稳妥：.contains() 可在其子树内搜索文本；而若只取 h5 元素，.contains() 将严格匹配其直接文本内容，易因空格、换行或 DOM 结构变化失效。-
expect(items).to.contain(...) 的适用前提
该断言依赖目标文本在页面中唯一且显式存在。若多个商品名含相似关键词（如 “Laser” 出现在多个型号中），应改用 .each() 进行精确匹配：recurse( () => cy.get(itemsSelector), (items) => { let found = false cy.wrap(items).each($item => { if (Cypress.$($item).find('h5').text().trim() === targetProductName) { found = true } }) expect(found).to.be.true }, { post: () => cy.get(nextPageSelector).click() } ) .find('h5') .contains(targetProductName) .click() 务必设置 limit 与 timeout
防止因分页异常（如无下一页按钮却持续点击）导致测试卡死或超长等待。cypress-recurse 默认 limit: 5、timeout: 4000，生产环境建议显式配置。
⚠️ 注意事项总结
- ❌ 避免手写递归函数（如原问题中的 findInPage()）：Cypress 命令异步性会导致 found 状态无法跨命令同步，极易出现“已找到却不点击”或“无限点击下一页”。
- ✅ 使用 recurse() 是 Cypress 官方推荐的重试模式实践，天然兼容命令队列与自动重试机制。
- ✅ .contains() 后链式调用 .click() 会自动等待元素满足可点击条件（visible、enabled、not covered），无需额外 cy.wait() 或 .should('be.visible')。
- ? 测试前确保分页按钮在最后一页时被禁用或隐藏，否则需在 post 回调中添加存在性校验，例如：
post: () => cy.get(nextPageSelector).should('be.enabled').click()
通过以上方式，你将获得一个高可靠性、低维护成本、符合 Cypress 编程范式的分页交互解决方案。
