如何使用Cypress将同一根元素下的多个元素值存入对象数组

Cypress 所有操作命令都是异步入队、按顺序执行的，你在 each 循环外的同步代码执行时，each 内部的DOM提取、.then()回调逻辑还没有实际运行，因此此时读取的singleResult还未被赋值，自然为空。

将所有依赖提取结果的逻辑全部放入Cypress命令链的异步回调中即可，参考代码如下：

// 初始化存储结果的数组
const extractedList = []

// 选中所有子项遍历
cy.get('.results .result').each(($resultItem) => {
  // 提取当前子项的字段，jQuery对象操作是同步的可直接取值
  const name = $resultItem.find('.name').text().trim()
  const amount = $resultItem.find('.price').text().trim()
  // 直接推入数组
  extractedList.push({ name, amount })
}).then(() => {
  // 遍历全部完成后会进入该回调，这里拿到的就是完整的结果数组
  console.log(extractedList)
  // 所有需要用到该数组的业务逻辑都需要写在此回调内部
  // 如果需要后续命令复用该结果，可通过别名存储
  cy.wrap(extractedList).as('goodsList')
})

// 后续其他位置需要用到该结果时，通过别名异步获取
cy.get('@goodsList').then((list) => {
  // 在这里处理提取好的数组
})

• 不要尝试在Cypress命令链外的同步上下文读取异步操作的结果，所有依赖异步结果的逻辑必须放在.then()回调中执行
• 提取DOM文本时建议加trim()处理，避免空格、换行符影响结果正确性

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