如何优化Cypress项目结构 实现多文件复用公共Given测试步骤

• 第一步：创建公共步骤存储目录
  在你的Cypress项目中新建cypress/support/step_definitions/目录，该目录默认会被cypress-cucumber-preprocessor全局加载，里面定义的所有步骤可以在全项目的步骤文件中直接调用。
• 第二步：提取重复步骤到公共文件
  在上述目录中新建公共步骤文件，比如common-navigation.js，将你重复定义的Given步骤移入该文件：

Given('I navigate to page one', () => {
  cy.visit(`${Cypress.env('baseUrl')}/page-one`);
});

• 第三步：删除原有重复代码
  删掉check-hero.js和check-custom-block.js两个文件中重复的该Given步骤定义，直接在两个文件对应的逻辑中正常调用该步骤即可，无需额外导入。

如果你使用的是较新版本的cypress-cucumber-preprocessor，需要确认cypress.config.js中包含公共步骤目录的加载配置，示例配置如下：

const { defineConfig } = require('cypress')
const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor', cucumber())
    },
    specPattern: "cypress/integration/**/*.feature",
  },
  "cypress-cucumber-preprocessor": {
    stepDefinitions: [
      "cypress/support/step_definitions/**/*.js",
      "cypress/integration/**/*.js"
    ]
  }
})

• 可选优化建议
  你可以根据步骤的功能对公共步骤做分类存储，比如导航类步骤统一放到navigation.js、表单操作类步骤统一放到form-actions.js，方便后续维护查找。

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