Cypress如何提取元素文本后续使用？多组列表提取时第二组为空报错

这是Cypress别名存DOM引用的经典问题，和XPath语法无关：

• 你当前写法存进别名的是DOM元素的实时引用，不是你真正需要的静态文本值列表
• 跑第一组列表的each逻辑时，只要操作触发页面重绘、虚拟DOM更新（React/Vue项目非常常见）、DOM重排（哪怕是滚动、状态类变更触发的重渲染），之前存的第二组列表对应的DOM节点就会被框架替换，存的引用直接变成脱离文档流的失效节点，Cypress读取时自然判定为空
• 调换执行顺序后始终是后读取的列表报空，完全匹配这个失效特征：先遍历的列表操作改了DOM，后读的那组引用就失效了。

核心思路是别存DOM引用，提前把需要的文本值提取成纯JS静态数组再存别名，从根源上和DOM状态解耦，同时修正第二组XPath的写法避免筛选逻辑偏差，修改后代码如下：

// 提取前先确认表格行加载完成，避免动态加载拿不全数据
cy.get('tbody tr').should('have.length.gte', 21)

// 提取第一组文本列表
cy.xpath('//tbody/tr[position()<10]/td[6]/span').then($items => {
  const multipleList = Array.from($items).map(el => el.innerText.trim())
  cy.wrap(multipleList).as('multipleList')
})

// 第二组XPath合并位置条件，避免连续谓词的筛选逻辑问题
cy.xpath('//tbody/tr[position() > 15 and position() < 21]/td[6]/span').then($items => {
  const commaList = Array.from($items).map(el => el.innerText.trim())
  cy.wrap(commaList).as('commaList')
})

// 后续遍历的是纯文本数组，完全不受DOM更新影响
cy.get('@multipleList').each((itemText, index) => {
  // 你的校验逻辑
})

cy.get('@commaList').each((itemText, index) => {
  // 你的校验逻辑
})

如果你的表格是虚拟滚动实现的，要先滚动到对应行区域，等目标span渲染完成再做提取，否则会拿不到对应位置的元素。

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