尧图网页设计 
在 Nx 中运行 Cypress 测试从模式检测到单文件定位的完整指南【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nxNx 的 Cypress 集成经历了从显式 Executor 到推断式 PluginInference的演进在 Nx 中nx/cypress/plugin会自动扫描每个项目下的cypress.config.*文件并生成对应的测试目标而传统的nx/cypress:cypressExecutor 则作为兼容路径保留并标记为将在 Nx v24 移除。本指南基于 packages/cypress/PLUGIN.md完整讲解两种运行模式下如何定位与执行测试文件并结合仓库源码剖析底层实现帮助你快速定位单个用例、按 pattern 批量筛选测试理解 Nx 与 Cypress 的协作机制。两种模式Inference 与 ExecutorNx 运行 Cypress 测试前会先检测当前项目以何种方式接入 Cypress。检测按顺序进行第一个匹配者胜出规则如下模式检测条件Inference推断nx.json的plugins数组中注册了nx/cypress/pluginExecutor执行器project.json的某个 target 使用了nx/cypress:cypressexecutorInference 模式声明式、零配置生成目标当nx.json中声明了该插件后Nx 会扫描工作区中所有匹配**/cypress.config.{js,ts,mjs,cjs}的文件见 plugin.ts并为每个找到配置的项目自动生成目标。从源码看createNodes即 createNodesV2会依次生成以下目标e2e默认可用targetName覆盖执行cypress run负责 E2E 测试open-cypress默认可用openTargetName覆盖执行cypress open打开 Cypress 交互界面component-test默认可用componentTestingTargetName覆盖执行cypress run --component负责组件测试可选e2e-ci/ciComponentTestingTargetName当配置了ciWebServerCommand时插件还会按 spec 文件粒度拆分出原子化的 CI 目标。插件在生成目标时会读取 Cypress 配置中的__NxPluginOptions__预设选项对应源码中的 NX_PLUGIN_OPTIONS包括webServerCommands、ciWebServerCommand、reuseExistingServer、ciBaseUrl等并将videosFolder、screenshotsFolder解析为 Nx 可缓存的outputs见 getOutputs。同时目标默认启用缓存cache: true输入包含default、^production以及externalDependencies: [cypress]见 getInputs。插件单测 plugin.spec.ts 通过快照验证了e2e、open-cypress等目标的完整生成结果。Executor 模式传统显式配置Executor 模式需要你在project.json中显式声明 target例如{ targets: { e2e: { executor: nx/cypress:cypress, options: { cypressConfig: apps/app-e2e/cypress.config.ts, devServerTarget: my-react-app:serve, testingType: e2e } } } }Executor 的完整参数定义见 schema.json其中cypressConfig为必填项其余常用参数包括watch文件变更时重编译并重跑、headed显示浏览器而非无头运行、baseUrl、browser、spec逗号分隔的 glob 字符串、record/parallel仅 CI 使用、env、reporter等。需要注意该 Executor 已被标记为废弃x-deprecated将在 Nx v24 移除。仓库中的 deprecation.ts 定义了明确的警告信息——当运行 Executor 目标时会提示运行nx g nx/cypress:convert-to-inferred迁移到推断式插件。从源码结构看迁移由 convert-to-inferred 生成器 完成它会将现有 target 改写为 Cypress 配置中的插件预设选项并移除project.json中的显式 executor 声明。运行指定测试文件修改代码后通常希望只运行相关的一个或几个测试文件来快速验证。两种模式下的命令略有不同核心差异在于参数传递方式Inference 目标使用--分隔符把参数透传给底层cypress runExecutor 目标则直接把--spec作为目标参数。Inference 模式nx e2e project -- --specpath/to/file.cy.tsExecutor 模式nx run project:e2e --specpath/to/file.cy.ts在 Inference 模式下Nx 生成的e2e目标本质是一条cypress run命令见 plugin.ts因此--之后的参数会原样透传给 Cypress CLI--spec即 Cypress 原生的 spec 筛选参数。快速参考日常开发中最常用的两个场景——按文件运行与按模式匹配运行——在两种模式下的命令对照如下任务InferenceExecutor运行单个文件nx e2e proj -- --specpath/file.cy.tsnx run proj:e2e --specpath/file.cy.ts按 pattern 匹配运行nx e2e proj -- --spec**/*login*nx run proj:e2e --spec**/*login*关于--spec的 pattern 语义schema.json中对spec参数的定义是逗号分隔的 glob 字符串即支持一次性传入多个模式例如--spec**/examples/**,**/actions.spec**。Cypress 使用 minimatch 进行匹配选项为{dot: true, matchBase: true}因此**/*login*可以命中项目内所有路径中带login的测试文件。上述命令中的相对路径均以对应项目的根目录为基准与 Cypress 自身的specPattern解析规则一致。底层调用链Executor 如何消费--spec在 Executor 模式下--spec的值最终会被传给 Cypress 模块执行器入口 cypress.impl.ts 先通过startDevServer启动开发服务器或复用baseUrl随后调用runCypress其中options.spec会被直接写入 Cypress 的调用参数见 cypress.impl.tsif (opts.spec) { options.spec opts.spec; }这意味着--spec是运行时透传不会影响project.json中的静态配置。通过配置文件替代命令行筛选除了在命令行传--spec也可以在 Cypress 配置中调整 spec 相关字段来改变测试范围specPattern定义哪些文件被当作测试文件默认 E2E 为cypress/e2e/**/*.cy.{js,jsx,ts,tsx}组件测试为**/*.cy.{js,jsx,ts,tsx}见 plugin.tsexcludeSpecPattern排除特定文件如组件测试默认排除/snapshots/*与/image_snapshots/*。在 Executor 模式下ignoreTestFiles别名excludeSpecPattern参数可直接在project.json的 options 中配置运行时会被写入config[testingType].excludeSpecPattern见 cypress.impl.ts。实践建议新项目优先使用 Inference 模式注册nx/cypress/plugin后无需在project.json维护 executor 配置目标由插件从 Cypress 配置自动派生且天然获得缓存、原子化 CI 目标等能力存量 Executor 项目尽早迁移运行目标时的废弃警告即迁移入口nx g nx/cypress:convert-to-inferred会完成配置改写定位单文件测试时注意分隔符Inference 模式务必使用--透传--spec否则参数可能被 Nx 误解析为目标选项善用 pattern 组合--spec支持逗号分隔的多个 glob适合在提交前快速回归与本次改动相关的多个测试文件。本指南的命令与参数说明均以当前仓库 packages/cypress 的实现为准配套示例可进一步参考 cypress-examples.md 中的 E2E 与组件测试配置样例。【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Nx 中运行 Cypress 测试：从模式检测到单文件定位的完整指南
在 Nx 中运行 Cypress 测试从模式检测到单文件定位的完整指南【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nxNx 的 Cypress 集成经历了从显式 Executor 到推断式 PluginInference的演进在 Nx 中nx/cypress/plugin会自动扫描每个项目下的cypress.config.*文件并生成对应的测试目标而传统的nx/cypress:cypressExecutor 则作为兼容路径保留并标记为将在 Nx v24 移除。本指南基于 packages/cypress/PLUGIN.md完整讲解两种运行模式下如何定位与执行测试文件并结合仓库源码剖析底层实现帮助你快速定位单个用例、按 pattern 批量筛选测试理解 Nx 与 Cypress 的协作机制。两种模式Inference 与 ExecutorNx 运行 Cypress 测试前会先检测当前项目以何种方式接入 Cypress。检测按顺序进行第一个匹配者胜出规则如下模式检测条件Inference推断nx.json的plugins数组中注册了nx/cypress/pluginExecutor执行器project.json的某个 target 使用了nx/cypress:cypressexecutorInference 模式声明式、零配置生成目标当nx.json中声明了该插件后Nx 会扫描工作区中所有匹配**/cypress.config.{js,ts,mjs,cjs}的文件见 plugin.ts并为每个找到配置的项目自动生成目标。从源码看createNodes即 createNodesV2会依次生成以下目标e2e默认可用targetName覆盖执行cypress run负责 E2E 测试open-cypress默认可用openTargetName覆盖执行cypress open打开 Cypress 交互界面component-test默认可用componentTestingTargetName覆盖执行cypress run --component负责组件测试可选e2e-ci/ciComponentTestingTargetName当配置了ciWebServerCommand时插件还会按 spec 文件粒度拆分出原子化的 CI 目标。插件在生成目标时会读取 Cypress 配置中的__NxPluginOptions__预设选项对应源码中的 NX_PLUGIN_OPTIONS包括webServerCommands、ciWebServerCommand、reuseExistingServer、ciBaseUrl等并将videosFolder、screenshotsFolder解析为 Nx 可缓存的outputs见 getOutputs。同时目标默认启用缓存cache: true输入包含default、^production以及externalDependencies: [cypress]见 getInputs。插件单测 plugin.spec.ts 通过快照验证了e2e、open-cypress等目标的完整生成结果。Executor 模式传统显式配置Executor 模式需要你在project.json中显式声明 target例如{ targets: { e2e: { executor: nx/cypress:cypress, options: { cypressConfig: apps/app-e2e/cypress.config.ts, devServerTarget: my-react-app:serve, testingType: e2e } } } }Executor 的完整参数定义见 schema.json其中cypressConfig为必填项其余常用参数包括watch文件变更时重编译并重跑、headed显示浏览器而非无头运行、baseUrl、browser、spec逗号分隔的 glob 字符串、record/parallel仅 CI 使用、env、reporter等。需要注意该 Executor 已被标记为废弃x-deprecated将在 Nx v24 移除。仓库中的 deprecation.ts 定义了明确的警告信息——当运行 Executor 目标时会提示运行nx g nx/cypress:convert-to-inferred迁移到推断式插件。从源码结构看迁移由 convert-to-inferred 生成器 完成它会将现有 target 改写为 Cypress 配置中的插件预设选项并移除project.json中的显式 executor 声明。运行指定测试文件修改代码后通常希望只运行相关的一个或几个测试文件来快速验证。两种模式下的命令略有不同核心差异在于参数传递方式Inference 目标使用--分隔符把参数透传给底层cypress runExecutor 目标则直接把--spec作为目标参数。Inference 模式nx e2e project -- --specpath/to/file.cy.tsExecutor 模式nx run project:e2e --specpath/to/file.cy.ts在 Inference 模式下Nx 生成的e2e目标本质是一条cypress run命令见 plugin.ts因此--之后的参数会原样透传给 Cypress CLI--spec即 Cypress 原生的 spec 筛选参数。快速参考日常开发中最常用的两个场景——按文件运行与按模式匹配运行——在两种模式下的命令对照如下任务InferenceExecutor运行单个文件nx e2e proj -- --specpath/file.cy.tsnx run proj:e2e --specpath/file.cy.ts按 pattern 匹配运行nx e2e proj -- --spec**/*login*nx run proj:e2e --spec**/*login*关于--spec的 pattern 语义schema.json中对spec参数的定义是逗号分隔的 glob 字符串即支持一次性传入多个模式例如--spec**/examples/**,**/actions.spec**。Cypress 使用 minimatch 进行匹配选项为{dot: true, matchBase: true}因此**/*login*可以命中项目内所有路径中带login的测试文件。上述命令中的相对路径均以对应项目的根目录为基准与 Cypress 自身的specPattern解析规则一致。底层调用链Executor 如何消费--spec在 Executor 模式下--spec的值最终会被传给 Cypress 模块执行器入口 cypress.impl.ts 先通过startDevServer启动开发服务器或复用baseUrl随后调用runCypress其中options.spec会被直接写入 Cypress 的调用参数见 cypress.impl.tsif (opts.spec) { options.spec opts.spec; }这意味着--spec是运行时透传不会影响project.json中的静态配置。通过配置文件替代命令行筛选除了在命令行传--spec也可以在 Cypress 配置中调整 spec 相关字段来改变测试范围specPattern定义哪些文件被当作测试文件默认 E2E 为cypress/e2e/**/*.cy.{js,jsx,ts,tsx}组件测试为**/*.cy.{js,jsx,ts,tsx}见 plugin.tsexcludeSpecPattern排除特定文件如组件测试默认排除/snapshots/*与/image_snapshots/*。在 Executor 模式下ignoreTestFiles别名excludeSpecPattern参数可直接在project.json的 options 中配置运行时会被写入config[testingType].excludeSpecPattern见 cypress.impl.ts。实践建议新项目优先使用 Inference 模式注册nx/cypress/plugin后无需在project.json维护 executor 配置目标由插件从 Cypress 配置自动派生且天然获得缓存、原子化 CI 目标等能力存量 Executor 项目尽早迁移运行目标时的废弃警告即迁移入口nx g nx/cypress:convert-to-inferred会完成配置改写定位单文件测试时注意分隔符Inference 模式务必使用--透传--spec否则参数可能被 Nx 误解析为目标选项善用 pattern 组合--spec支持逗号分隔的多个 glob适合在提交前快速回归与本次改动相关的多个测试文件。本指南的命令与参数说明均以当前仓库 packages/cypress 的实现为准配套示例可进一步参考 cypress-examples.md 中的 E2E 与组件测试配置样例。【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考