Cypress中使用.as命令存储变量后用This调用返回Null的问题

问题原因 #

• 测试上下文隔离：每个it块是独立的测试用例，Cypress会为每个it创建全新的上下文，第一个it里用.as存储的变量，第二个it的this根本访问不到。
• .as绑定的是命令返回值：你写的cy.log('ASDF').as('print')，实际上存的是cy.log()命令的返回结果，不是字符串'ASDF'本身。
• 大小写错误：代码里的This应该是小写的this，JavaScript里上下文对象是小写的this。

解决方法 #

1. 同一个测试用例（it）内使用.as #

如果不需要跨测试用例共享，把逻辑放到同一个it里，同时修正写法确保存储的是目标内容：

it('存储并打印变量', function() {
  // 用cy.wrap把目标变量转为Cypress命令链，再绑定
  cy.wrap('ASDF').as('print')

  // 小写this访问存储的变量
  cy.log(this.print) // 此时能正常输出'ASDF'
})

2. 跨测试用例（it）共享数据 #

如果必须跨it块共享数据，.as做不到（它只在当前测试上下文生效），可以用以下两种方式：

• 用Cypress.env()存储全局变量

it('存储变量', function() {
  Cypress.env('print', 'ASDF') // 存入全局环境变量
})

it('打印变量', function() {
  cy.log(Cypress.env('print')) // 取出变量，输出'ASDF'
})

• 用before/beforeEach初始化共享变量
  如果多个测试用例都需要用到这个数据，可以在测试组的前置钩子中定义：

describe('测试组', function() {
  let printValue // 定义共享变量

  beforeEach(function() {
    printValue = 'ASDF'
  })

  it('打印变量1', function() {
    cy.log(printValue)
  })

  it('打印变量2', function() {
    cy.log(printValue)
  })
})

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