Cypress封装通用校验函数时forEach循环不生效的问题排查

改造代码抛出异常和Cypress是否支持循环逻辑没有关系，本质是踩了两个Cypress元素处理的常见坑：

• .then()回调拿到的元素集合是jQuery类数组结构，没有原生JS数组的forEach方法，直接调用会触发“方法不存在”的类型错误
• 从类数组通过索引取出的是原生DOM节点，不是Cypress封装的jQuery对象，直接使用依赖jQuery能力的断言会找不到对应方法

原来的硬编码实现能正常运行，是因为仅通过索引访问元素，Cypress的expect会自动把原生DOM节点包装为jQuery对象完成断言，没有触发上述两个问题。

方案1：使用Cypress内置each命令（推荐） #

完全贴合Cypress的命令链式调用风格，不需要手动处理类数组转换、DOM包装问题，代码更简洁稳定：

verifyModuleTitles(expectedTitles) {
  cy.get('h3[class*="block-module_title"]')
    .should('have.length', expectedTitles.length)
    .each(($item, index) => {
      expect($item).to.contains.text(expectedTitles[index])
    })
}

这个写法中，.each()是Cypress内置的遍历命令，回调接收的第一个参数已经是包装好的jQuery对象，第二个参数是当前元素的索引，完全匹配传入的期望标题数组的遍历逻辑，支持任意长度的入参，且命令会自动纳入Cypress的执行队列，时序更可靠。

方案2：在.then()回调中手动处理元素集合 #

如果需要在遍历过程中完成更多自定义逻辑，可以先将jQuery类数组转换为标准数组，遍历过程中重新包装DOM对象完成断言：

verifyModuleTitles(expectedTitles) {
  cy.get('h3[class*="block-module_title"]')
    .should('have.length', expectedTitles.length)
    .then(($items) => {
      // 将jQuery类数组转为标准JS数组，支持原生forEach方法
      const itemList = Array.from($items)
      itemList.forEach((domNode, index) => {
        // 将原生DOM节点包装为jQuery对象，保证断言方法可用
        const $item = Cypress.$(domNode)
        expect($item).to.contains.text(expectedTitles[index])
      })
    })
}

Cypress本身完全支持循环、遍历类逻辑，不存在不支持循环的限制。只要处理好类数组结构、jQuery对象包装这两个细节，动态适配任意长度入参的函数完全可以正常运行。

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