Cypress技术问询：如何在beforeEach钩子中传递多个变量至测试用例并保持代码整洁

嘿，这个问题我太有共鸣了！多层嵌套的.then确实让人头大，而且Cypress不推荐用全局let也是有道理的——容易因为异步时序问题踩坑。我给你几个既符合Cypress最佳实践，又能让代码保持清爽的解决方案：

方案1：合并变量为单个对象，用别名统一管理 #

这是最直接的解决办法：把所有需要传递的变量打包成一个对象，只存一个别名，测试用例里通过对象解构一次性拿到所有变量，彻底告别嵌套。

beforeEach(() => {
  // 把所有需要的变量合并成一个对象
  cy.wrap({
    foo: { foo: 1 },
    bar: { bar: 2 },
    // 哪怕再加8个变量，这里也只是多写几行，不会有嵌套
    baz: { baz: 3 },
    qux: { qux: 4 }
  }).as('testData')
})

it('some test', () => {
  cy.get('@testData').then(({ foo, bar, baz, qux }) => {
    // 直接解构获取所有变量，代码清爽得很
    cy.log('foo的值:', foo)
    cy.log('bar的值:', bar)
    
    // 后续操作直接用这些变量就行
    cy.wrap(foo).should('deep.equal', { foo: 1 })
  })
})

这个方案的优势在于：完全遵循Cypress的异步处理逻辑，没有全局变量的风险，不管变量数量多少，都只会有一层.then，可读性拉满。

方案2：利用Cypress的this共享上下文 #

Cypress在beforeEach和测试用例（it）的普通函数里，会提供一个共享的上下文对象this，只要不用箭头函数，就可以把变量直接挂载到this上，测试用例里直接访问。

beforeEach(function() { // 注意：这里必须用普通函数，不能用箭头函数
  cy.wrap({ foo: 1 }).then(foo => {
    this.foo = foo
  })
  cy.wrap({ bar: 2 }).then(bar => {
    this.bar = bar
  })
  // 再多变量也只是重复类似的赋值操作，没有嵌套
})

it('some test', function() { // 同样要用普通函数
  // 直接通过this访问变量，不用.then嵌套
  cy.log('foo的值:', this.foo)
  cy.log('bar的值:', this.bar)
  
  // 如果需要在后续回调里使用，也可以先解构出来
  const { foo, bar } = this
  cy.wrap(bar).should('deep.equal', { bar: 2 })
})

为什么不能用箭头函数？因为箭头函数会绑定外部的this，无法访问Cypress提供的共享上下文。这个方案适合变量需要单独处理异步逻辑的场景，每个变量的初始化可以独立，测试用例里访问也很直接。

方案3：封装自定义命令，复用初始化逻辑 #

如果你的变量初始化逻辑比较复杂（比如需要调用多个接口、处理复杂数据），可以把这些逻辑封装成自定义命令，一次性返回所有变量，让测试文件更简洁。

// 在cypress/support/commands.js中定义自定义命令
Cypress.Commands.add('initTestData', () => {
  // 这里可以加入各种异步操作，比如请求接口
  return cy.wrap({
    foo: { foo: 1 },
    bar: { bar: 2 },
    // 示例：异步获取用户数据
    user: cy.request('/api/user').its('body')
  }).then(data => {
    // 统一处理所有异步变量，确保全部就绪后返回
    return Promise.all([data.foo, data.bar, data.user]).then(([foo, bar, user]) => {
      return { foo, bar, user }
    })
  })
})

// 在测试文件中使用
beforeEach(() => {
  cy.initTestData().as('testData')
})

it('some test', () => {
  cy.get('@testData').then(({ foo, bar, user }) => {
    // 直接使用所有初始化好的变量
    cy.log('用户信息:', user)
  })
})

这个方案的好处是把复杂的初始化逻辑抽离出去，测试文件只需要关注测试逻辑，而且命令可以在多个测试文件中复用。

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