Cypress多测试用例复用fixture文件报错问题求助

问题场景 #

在多个it测试函数中传递URL及其他变量时，第一个测试用例运行正常，但第二个测试用例报错Cannot read properties of undefined (reading 'baseUrl')，即this.testdata未定义。原代码如下：

describe('Document Upload', function()
{
    before(function () {
        cy.fixture('Credential').then(function (testdata) {
            this.testdata = testdata
        })
    })
    // 第一个测试用例
    it('Login as manager',function()  
    {
    const login = new loginPage()

    cy.visit(this.testdata.baseUrl);
    login.getUserName().type(this.testdata.userDocumentM)
    login.getPassword().type(this.testdata.passwordDocumentM)
    login.getLoginButton().click()
    // 登出
    login.getUser().click()
    login.getLogout().click()

    })
    // 第二个测试用例
    it('Create Documents',function()  
    {
    const login = new loginPage()

    cy.visit(this.testdata.baseUrl);
    login.getUserName().type(this.testdata.userDocumentM)

    })
 
})

报错截图：

重复使用before函数后问题依旧。

解决办法 #

方案一：使用Cypress环境变量存储 #

将fixture数据存入Cypress全局环境变量，所有测试用例均可直接访问：

describe('Document Upload', function() {
  before(function () {
    cy.fixture('Credential').then(function (testdata) {
      // 将测试数据存入Cypress环境变量
      Cypress.env('testdata', testdata);
    })
  })

  it('Login as manager',function() {
    const login = new loginPage()
    const testdata = Cypress.env('testdata');
    
    cy.visit(testdata.baseUrl);
    login.getUserName().type(testdata.userDocumentM)
    login.getPassword().type(testdata.passwordDocumentM)
    login.getLoginButton().click()
    // 登出
    login.getUser().click()
    login.getLogout().click()
  })

  it('Create Documents',function() {
    const login = new loginPage()
    const testdata = Cypress.env('testdata');
    
    cy.visit(testdata.baseUrl);
    login.getUserName().type(testdata.userDocumentM)
  })
})

方案二：使用闭包变量存储 #

在describe块内定义变量，在before中赋值，利用闭包特性让所有it块访问：

describe('Document Upload', function() {
  let testdata; // 定义闭包变量

  before(function () {
    cy.fixture('Credential').then(function (data) {
      testdata = data; // 给闭包变量赋值
    })
  })

  it('Login as manager',function() {
    const login = new loginPage()
    
    cy.visit(testdata.baseUrl);
    login.getUserName().type(testdata.userDocumentM)
    login.getPassword().type(testdata.passwordDocumentM)
    login.getLoginButton().click()
    // 登出
    login.getUser().click()
    login.getLogout().click()
  })

  it('Create Documents',function() {
    const login = new loginPage()
    
    cy.visit(testdata.baseUrl);
    login.getUserName().type(testdata.userDocumentM)
  })
})

方案三：使用beforeEach（可选） #

如果需要每个测试用例执行前都重新加载fixture，可替换before为beforeEach，确保每个it块都能获取到最新的this.testdata：

describe('Document Upload', function() {
  beforeEach(function () {
    cy.fixture('Credential').then(function (testdata) {
      this.testdata = testdata
    })
  })

  // 测试用例代码不变...
})

问题原因 #

原代码中this.testdata在第二个it块中未定义，是因为Mocha（Cypress基于Mocha）的上下文this在不同it块间无法可靠共享，异步加载的fixture数据无法通过this跨用例传递。使用环境变量或闭包变量可以规避这个上下文绑定问题。

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