Cypress数组迭代问题：存储元素后数组长度归零无法进入循环

你的代码里数组长度变为0，核心是Cypress命令的异步执行特性导致的：

• cy.get('.tag-wrapper-item').each()是异步命令，会被加入Cypress的命令队列延迟执行
• 而外面的cy.log(Array.length)和for循环是同步代码，会在异步队列执行前直接运行，此时数组还没被推入任何元素，自然长度为0，for循环无法进入。

要让遍历逻辑等待元素获取完成后再执行，有两种可靠的写法：

写法1：先获取所有元素集合再遍历 #

利用cy.get().then()等待所有元素加载完成，将DOM元素集合转为数组后遍历，同时注意处理页面跳转后的元素有效性：

cy.get('.tag-wrapper-item').then(($pills) => {
  // 将Cypress的DOM元素集合转为普通数组
  const pillsArray = [...$pills]

  for (const element of pillsArray) {
    // 先获取当前元素的文本（避免跳转后DOM失效无法获取）
    const tagText = Cypress.$(element).text().trim()
    
    // 点击元素
    cy.wrap(element).click()
    // 点击激活的标签区域
    cy.wrap(element).find('.--tag.tag-link.--active.tag-selector-button-link').click()
    
    // 断言页面标题包含标签文本
    cy.get('.heading-markdown').contains(tagText)
    
    // 返回上一页
    cy.go('back')
    // 等待页面回到初始状态，确保下一次遍历的元素可交互
    cy.get('.tag-wrapper-item').should('be.visible')
  }
})

写法2：先收集所有标签文本，再按文本定位操作 #

这种方式更稳定，因为页面跳转后DOM会重新渲染，按文本定位能避免原DOM元素失效的问题：

// 先收集所有标签的文本内容
cy.get('.tag-wrapper-item').then(($pills) => {
  const tagTexts = [...$pills].map(pill => Cypress.$(pill).text().trim())

  tagTexts.forEach(tagText => {
    // 按文本找到对应的标签项并点击
    cy.contains('.tag-wrapper-item', tagText).click()
    // 点击激活的标签区域
    cy.contains('.--tag.tag-link.--active.tag-selector-button-link', tagText).click()
    
    // 断言页面标题匹配标签文本
    cy.get('.heading-markdown').contains(tagText)
    
    // 返回上一页并等待页面就绪
    cy.go('back')
    cy.get('.tag-wrapper-item').should('be.visible')
  })
})

• 不要在Cypress异步命令外部依赖异步修改的变量，所有需要等待异步操作完成的逻辑，都要放到then、each这类命令的回调函数内
• 页面跳转后原DOM元素会失效，优先通过文本、属性等稳定定位方式重新获取元素，避免直接复用之前的DOM对象

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