Cypress如何定义全局变量存储类文本值供后续URL断言使用

核心原因说明 #

Cypress 所有cy.开头的命令都是异步排队执行的，在外层同步代码中直接声明变量调用，会因为同步代码执行时机早于Cypress命令执行时机，出现变量未定义的问题，并非单纯的作用域限制。

无嵌套多变量断言方案 #

• 方案1：批量获取别名，单回调处理（最推荐）
  不需要为每个变量写嵌套回调，直接给cy.get()传入别名数组，即可在同一个回调中拿到所有目标值，完全避免多层嵌套：

// 提前将需要的所有值存为别名，取文本直接用invoke('text')拿到纯文本值，不需要手动包装
cy.get(".cat").eq(0).invoke('text').as('catTitleText')
// 其他需要用到的变量也按同样方式存别名
cy.get(".sub-category").eq(0).invoke('text').as('subCatText')
cy.get(".page-num").invoke('text').as('pageNum')

// 一次性获取所有别名，在同一个回调内完成URL断言
cy.get(['@catTitleText', '@subCatText', '@pageNum']).then(([catTitleText, subCatText, pageNum]) => {
  const targetUrl = `${Cypress.config().urlLive}faq.html?category=${catTitleText.trim()}&sub=${subCatText.trim()}&page=${pageNum.trim()}`
  cy.url().should('eq', targetUrl)
})

• 方案2：使用Cypress.env全局存储（适合提前获取固定值的场景）
  如果变量值是测试执行前/前置步骤中就可以确定的固定值，可以直接存入Cypress全局环境变量，后续任意位置直接调用即可：

// 前置钩子中提前获取并存储值
before(() => {
  cy.get(".cat").eq(0).invoke('text').then(text => {
    Cypress.env('catTitleText', text.trim())
  })
})

// 用例中可直接读取使用，无需嵌套回调
it('校验URL正确性', () => {
  // 执行完页面跳转等操作后直接断言
  const targetUrl = `${Cypress.config().urlLive}faq.html?category=${Cypress.env('catTitleText')}`
  cy.url().should('eq', targetUrl)
})

注意：如果变量是在用例执行过程中动态生成的，不建议用该方式，容易因为执行时序问题拿到空值，优先选方案1。

• 方案3：通过this上下文读取别名（适合普通函数写法的用例）
  如果用例使用普通function声明而非箭头函数，Cypress会自动将别名挂载到测试上下文this上，命令顺序执行时可直接读取：

// 注意不要用箭头函数，否则this指向会出错
it('校验URL参数', function () {
  // 按顺序存储所有需要的别名
  cy.get(".cat").eq(0).invoke('text').as('catTitleText')
  cy.get(".active-tag").invoke('text').as('activeTag')

  // 所有存别名的命令执行完后，直接通过this读取值断言
  const targetUrl = `${Cypress.config().urlLive}faq.html?category=${this.catTitleText.trim()}&tag=${this.activeTag.trim()}`
  cy.url().should('eq', targetUrl)
})

内容的提问来源于stack exchange，提问作者Bartłomiej Ambroziak