如何在Cypress中用变量写入JSON值？解决变量无数据问题

问题根源 #

原代码无法获取link1_value并写入JSON的核心原因是Cypress命令的异步特性：cy.writeFile在前面的异步DOM查询和文本提取操作完成前就执行了，此时变量还未被赋值，最终写入的是初始的undefined。此外，代码中存在不必要的嵌套cy.get调用，也会干扰执行顺序。

修改方案（推荐命令链写法） #

以下是修复后的代码，确保所有异步操作完成后再执行文件写入：

it('check link', () => {
  cy.visit('/')

  // 初始化结果对象，设置默认值
  const linkResults = { link1: '0', link2: '0' }

  // 处理link1
  cy.get('[class="classname"]')
    .then(($container) => {
      const link1Element = $container.find('[data-type="link1"]')
      if (link1Element.length > 0) {
        // 直接用cy.wrap处理已获取的元素，避免重复查询DOM
        return cy.wrap(link1Element).invoke('text').then(text => {
          linkResults.link1 = 'Link1:' + text
        })
      }
    })
    // 处理link2（复用容器查询，提升效率）
    .then(() => {
      return cy.get('[class="classname"]').then(($container) => {
        const link2Element = $container.find('[data-type="link2"]')
        if (link2Element.length > 0) {
          return cy.wrap(link2Element).invoke('text').then(text => {
            linkResults.link2 = 'Link2:' + text
          })
        }
      })
    })
    // 所有异步操作完成后写入文件
    .then(() => {
      cy.writeFile('txt.json', linkResults)
    })
})

关键修改点 #

• 命令链同步化：将cy.writeFile放在最后一个.then()回调中，确保前面所有DOM操作和文本提取完成后再执行写入。
• 避免重复DOM查询：使用cy.wrap处理已获取的DOM元素，减少不必要的cy.get调用，提升测试效率。
• 初始化默认值：提前设置linkResults的默认值'0'，确保即使目标元素不存在，也有合法值写入JSON。
• 变量作用域优化：用const定义结果对象，避免var带来的变量提升问题。

可选方案（async/await写法） #

如果习惯异步函数写法，也可以使用async/await，但需注意Cypress命令队列的兼容性：

it('check link', async () => {
  cy.visit('/')

  // 等待容器元素加载完成
  const $container = await cy.get('[class="classname"]')
  
  let link1_value = '0'
  if ($container.find('[data-type="link1"]').length > 0) {
    const link1Text = await cy.wrap($container.find('[data-type="link1"]')).invoke('text')
    link1_value = 'Link1:' + link1Text
  }

  let link2_value = '0'
  if ($container.find('[data-type="link2"]').length > 0) {
    const link2Text = await cy.wrap($container.find('[data-type="link2"]')).invoke('text')
    link2_value = 'Link2:' + link2Text
  }

  cy.writeFile('txt.json', { link1: link1_value, link2: link2_value })
})

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