Cypress中如何在BDD步骤定义文件中导入fixtures的JSON文件

1. 修正路径引用逻辑 #

BDD步骤定义文件的存放路径（通常在cypress/e2e/features/step_definitions）和普通.cy.js文件不同，原生require()的相对路径会失效。放弃Node的文件读取方式，改用Cypress内置的cy.fixture()方法，它会自动基于配置的fixturesFolder路径加载文件，无需手动处理相对路径。

2. 重写自定义命令适配BDD环境 #

如果你的commands.js里用了require()加载fixture，改成基于cy.fixture()的异步封装：

// commands.js
Cypress.Commands.add('loadPageObject', (pageFileName) => {
  return cy.fixture(`pageObjects/${pageFileName}.json`)
})

Cypress.Commands.add('loadTestData', (dataFileName) => {
  return cy.fixture(`testData/${dataFileName}.json`)
})

3. 在步骤定义中正确调用 #

在.js步骤文件中，通过.then()处理异步加载的fixture数据，或者使用async/await：

方式1：使用.then()回调 #

// step_definitions/loginSteps.js
Given('访问登录页面', () => {
  cy.loadPageObject('loginPage').then(loginPage => {
    cy.visit(loginPage.loginUrl)
  })
})

When('输入有效登录信息', () => {
  cy.loadTestData('loginData').then(loginData => {
    cy.get('#user-name').type(loginData.valid.username)
    cy.get('#password').type(loginData.valid.password)
  })
})

方式2：使用async/await #

Given('访问登录页面', async () => {
  const loginPage = await cy.fixture('pageObjects/loginPage.json')
  cy.visit(loginPage.loginUrl)
})

4. 验证Cypress配置 #

检查cypress.config.js中的fixturesFolder配置，确保指向你的fixture根目录（默认是cypress/fixtures，如果你的结构一致无需修改）：

// cypress.config.js
export default defineConfig({
  e2e: {
    fixturesFolder: 'cypress/fixtures',
    // 其他配置项
  }
})

5. 避免同步/异步代码混用 #

不要在同步代码块中直接引用异步加载的fixture数据，所有依赖fixture的操作必须放在异步回调或await之后，否则会因数据未加载完成导致读取失败。

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