Cypress从fixture拉取测试数据时出现Cannot read property 'key' of undefined报错

触发报错的核心原因 #

• 硬编码空值访问：密码输入框的取值逻辑误写为this.login.key.Password，整个测试代码中从未定义过this.login对象，读取该不存在对象的key属性时，就会直接抛出对应空值错误。
• 测试上下文丢失：Cypress 依赖 Mocha 测试上下文挂载共享数据时，所有关联的钩子（beforeEach）、测试用例（it）必须使用普通function声明，不能使用箭头函数。如果it块用箭头函数写法，会丢失对beforeEach中挂载值的访问权限，此时读取this.key也会触发同类空值报错。
• 异步加载时序错位：cy.fixture()是异步执行命令，如果没有正确等待fixture加载完成就提前读取赋值后的this.key，也会出现未定义的空值报错。

修正后的可运行代码 #

describe('My First Test', () => {
  // 用function声明获取Mocha测试上下文
  beforeEach(function() {
    // 返回fixture命令，确保异步执行完成
    return cy.fixture("DataFile").then((data) => {
      this.key = data
    })
  })

  // 必须用普通function声明，避免箭头函数丢失this上下文
  it('Does not do much!', function() {
    cy.visit('https://rahulshettyacademy.com/angularpractice/')
    cy.get("form input[name='name']").type(this.key.Name)
    cy.get("form input[name='email']").type(this.key.Email)
    // 修正拼写错误，移除不存在的login属性
    cy.get("#exampleInputPassword1").type(this.key.Password)
    cy.get('select').select(this.key.Gender)
  })
})

Cypress 推荐的替代写法（无需依赖this绑定） #

如果觉得this上下文的约束容易写错，可以使用Cypress原生的别名机制加载fixture数据，避免上下文指向问题：

describe('My First Test', () => {
  beforeEach(() => {
    // 将fixture数据注册为测试别名
    cy.fixture("DataFile").as('testData')
  })

  it('Does not do much!', function() {
    cy.visit('https://rahulshettyacademy.com/angularpractice/')
    // 通过别名获取fixture数据，在回调中执行后续操作
    cy.get('@testData').then((data) => {
      cy.get("form input[name='name']").type(data.Name)
      cy.get("form input[name='email']").type(data.Email)
      cy.get("#exampleInputPassword1").type(data.Password)
      cy.get('select').select(data.Gender)
    })
  })
})

注意：别名写法不需要严格区分函数声明类型，从根源上减少this指向错位的问题

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