Angular集成Cypress+Cucumber时cypress.json是否废弃及替代方案

• cypress.json 已在Cypress 10.0及以上版本正式废弃，该变更属于Cypress官方的版本迭代调整，和Angular生态版本无关联。你查阅到的存量集成文档均未同步Cypress的版本更新信息，才会提及自动生成cypress.json的过时逻辑。
• 你项目中现存的cypress.config.ts就是官方指定的替代配置文件，Cypress可正常运行已经证明该文件已被正确识别加载。

你搭配cypress-cucumber-preprocessor使用时，原cypress.json承载的两类配置可按以下规则迁移到新方案中：

• Cypress框架本身的基础配置（包括baseUrl、测试文件匹配规则、视口参数、超时时间、环境变量等），全部写入cypress.config.ts的配置对象中，基础配置示例：

import { defineConfig } from "cypress";
import addCucumberPreprocessorPlugin from "@badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:4200", // 本地Angular项目默认启动地址
    specPattern: "cypress/e2e/**/*.feature", // Cucumber .feature文件匹配规则
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 10000,
    async setupNodeEvents(on, config) {
      // 注册Cucumber预处理器插件
      await addCucumberPreprocessorPlugin(on, config);
      on(
        "file:preprocessor",
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );
      return config;
    },
  },
});

• cypress-cucumber-preprocessor的专属配置（包括步骤定义文件路径、测试报告输出规则、非全局步骤配置等），不再写入Cypress配置文件，统一放置在package.json的cypress-cucumber-preprocessor字段下，或项目根目录下独立的.cypress-cucumber-preprocessorrc配置文件中，package.json内配置示例：

{
  "devDependencies": {
    // 依赖版本省略
  },
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/support/step_definitions/**/*.ts",
    "json": {
      "enabled": true,
      "output": "cypress/reports/cucumber-result.json"
    }
  }
}

提示：目前网络上大部分Cypress+Cucumber的Angular集成教程基于Cypress 9及更早版本编写，配置章节中所有涉及cypress.json的操作都可以直接跳过，核心逻辑不变，仅配置存放位置按上述规则调整即可。

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