后端前端金融科技数据可视化【免费下载链接】ghostfolioOpen Source Wealth Management Software. Angular NestJS Prisma Nx TypeScript 项目地址https://gitcode.com/GitHub_Trending/gh/ghostfolio点击查看免费下载本篇技术指南围绕 e2e-testing.md 展开讲解在 Angular 工作区中从零接入端到端E2E测试的完整路径何时适合引入 E2E、如何通过ng add一次性接入 Playwright / Cypress / Nightwatch / WebdriverIO / Puppeteer 五种主流框架、如何用ng e2e统一执行测试以及如何在package.json中挂接企业级自定义测试工具。文章同时结合 Ghostfolio 开源仓库Angular 22 NestJS Prisma Nx 的 Nx 工作区的真实工程现状给出可直接落地的配置建议与源码级佐证读完即可在自己的 Angular 项目中复现整套 E2E 测试链路。何时才需要配置 E2E 测试原文档开篇有一条醒目的[!IMPORTANT]约束值得先理解仅当工作区中尚未配置任何 E2E 测试框架或用户明确要求变更 / 搭建 E2E 测试时才使用本文档中的搭建指南。这条约束背后的工程原则是E2E 测试依赖真实浏览器环境执行速度慢、维护成本高属于测试金字塔的顶层。Angular 项目正确的测试分层通常是这样单元测试Unit覆盖组件、服务、指令等最小逻辑单元由TestBed 测试运行器如 Jest驱动集成测试 / 组件测试验证多个单元协作常借助 Component Harness端到端测试E2E启动真实浏览器模拟用户完整操作路径验证前后端联动的真实行为。以 Ghostfolio 仓库为参照客户端应用 apps/client/project.json 当前只声明了testtarget执行器为nx/jest:jest基于 apps/client/jest.config.ts 的 jest-preset-angular 配置apps/client目录下也尚无e2e目录或对应 target。也就是说这个 Nx 工作区当前没有已配置的 E2E 测试框架——正好满足原文档启用搭建指南的前提条件。同时nx.json 中nx/angular:application生成器已把e2eTestRunner预设为cypress说明仓库对新建 Angular 应用的 E2E 测试器的默认倾向就是 Cypress详见下文“仓库中的 E2E 现状”。接入前的环境准备执行ng add之前需要确认以下几点Angular CLI 可用Ghostfolio 的 package.json 中封装了angular脚本node --max_old_space_size32768 ./node_modules/angular/cli/bin/ngCLI 版本为 22.1.x。执行ng add时可以直接使用工作区内的 CLInpm run angular add playwright-ng-schematics或直接调用全局 / 工作区内的ng命令。依赖已安装在仓库根目录执行npm install或npm ci确保node_modules就绪注意 Ghostfolio 的postinstall脚本会触发prisma generate首次安装耗时较长属正常现象。明确 E2E target 归属Ghostfolio 使用 Nx 管理多项目工作区apps/api、apps/client、libs/ui等E2E 测试通常挂在前端应用项目client之下因此接入框架后运行测试的命令是ng e2e client或nx e2e client。通过 ng add 接入主流 E2E 框架原文档给出了一套非常统一的接入方式借助 Angular CLI 的 schematics 机制用ng add一条命令完成框架依赖安装、配置生成与测试文件脚手架。五种受支持框架及对应命令如下框架安装命令特点Playwrightng add playwright-ng-schematics微软出品支持 Chromium / Firefox / WebKit 三内核自带自动等待与网络拦截能力Cypressng add cypress/schematic拥有图形化 Test Runner断言语法直观是 Nx 生态集成最深的方案之一Nightwatchng add nightwatch/schematics基于 W3C WebDriver 协议与 Selenium Grid 生态兼容WebdriverIOng add wdio/schematics也是 WebDriver 协议实现插件体系丰富适合已有 Selenium 技术栈的团队Puppeteerng add puppeteer/ng-schematicsChrome DevTools Protocol 直连适合只面向 Chromium 的场景以上五条命令必须逐字保留它们是原文档的核心可操作内容。schematics 安装器通常会自动完成以下工作在package.json的devDependencies中追加对应框架依赖在angular.json/ Nx 的project.json中注册e2etarget生成默认的 E2E 测试目录如e2e/或cypress/与首个示例用例。注意选择框架时应基于项目实际约束——例如 CI 环境是否允许下载浏览器二进制Playwright / Puppeteer 需要、团队是否已有 WebDriver 类工具链Nightwatch / WebdriverIO等。原文档不主张同时接入多个框架一般一个项目只保留一种 E2E 运行器。运行 E2E 测试ng e2e 与 Nx 的配合框架接入完成后统一通过以下命令运行ng e2e [project] [options]参数说明[project]可选。省略时作用于默认项目Ghostfolio 中应显式指定client即ng e2e client因为该工作区默认项目是api见 nx.json 的defaultProject: api而 E2E 属于前端范畴。[options]框架相关的运行选项例如指定浏览器、开启 headed 模式、过滤测试文件、设置 baseUrl 等具体以所选框架为准。在 Nx 工作区中同一 target 也可以用 Nx 语法触发nx e2e clientGhostfolio 的 nx.json 已为e2etarget 声明了全局默认配置e2e: { inputs: [default, ^production], cache: true }这意味着一旦e2etarget 存在Nx 会对它启用任务缓存与输入追踪——只有相关源码default输入或上游生产代码^production发生变化时才会真正重跑测试否则直接复用缓存结果显著节省 CI 时间。这正是将 E2E 测试注册为 Nx target 而非散落脚本的工程价值。自定义与企业级测试工具从 package.json scripts 挂接原文档指出对于自定义或企业级 runner如 Katalon Studio、TestCafe、Selenium 等Angular CLI 的 schematics 生态可能没有现成的ng add支持此时应在package.json的scripts中自行定义执行命令。以 Ghostfolio 的 package.json 为例其 scripts 结构本身就是这种模式的成熟实践每个工作流都封装为一个命名脚本再通过 Nx 转发到具体项目。参考写法{ scripts: { e2e:client: nx run client:e2e, e2e:client:ci: nx run client:e2e --configurationci, e2e:smoke: katalon -noSplash -runModeconsole -testSuitePath\Test Suites/Smoke\ } }实践建议统一入口把企业级工具的实际二进制调用封装进scripts团队成员无需记忆各工具专有命令与 CI 对齐为 CI 环境单独提供配置如无头模式、测试报告上传、失败重试避免本地与流水线行为不一致组合执行可仿照 Ghostfolio 的test脚本nx run-many --targettest --all用nx run-many批量跑多个项目的 E2E或将 E2E 串进build:production之类的发布流水线。无论使用哪种框架E2E 测试都应遵循「真实用户路径」原则登录 → 导航 → 操作 → 断言结果覆盖单元测试无法触达的浏览器渲染、路由跳转与 API 联调环节。仓库中的 E2E 现状与接入路径小结把上述通用指南落回 Ghostfolio 仓库可以得到一条清晰的接入路径确认现状apps/client仅有 Jest 单元测试 target无e2etarget、无e2e目录package.json的devDependencies中也未直接安装任何 E2E 框架依赖nx/cypress、nx/playwright仅作为 Nx 的可选集成出现在 package-lock.json 的传递依赖中。因此当前完全符合原文档“工作区未配置 E2E 框架”的启用条件。选择框架仓库的 Nx 生成器预设为 Cypressnx.json 的e2eTestRunner: cypress与 Nx 集成最深、文档最全若更看重多浏览器覆盖则选 Playwright。二选一即可。接入并注册 target执行对应ng add命令后确认client项目的project.json中新增了e2etarget此时 nx.json 预设的e2e缓存默认配置会自动生效。运行与沉淀用nx e2e client本地验证将首条冒烟用例如“打开仪表盘页面并断言资产卡片渲染”纳入 CI再逐步扩展关键用户旅程创建账户、录入交易、查看投资组合报表。配套资料E2E 之上可进一步参考本 skill 中的单元测试基础 testing-fundamentals.mdTestBed、ComponentFixture与“Act, Wait, Assert”模式与 component-harnesses.md把测试金字塔三层补齐。关键要点速查前提约束只有工作区尚无 E2E 框架、或用户明确要求时才执行搭建见 e2e-testing.md 的 IMPORTANT 提示五种框架一条命令ng add playwright-ng-schematics/cypress/schematic/nightwatch/schematics/wdio/schematics/puppeteer/ng-schematics统一执行ng e2e [project] [options]Nx 工作区写作nx e2e client且会自动享受任务缓存企业级工具Katalon、TestCafe、Selenium 等通过package.jsonscripts 封装调用入口仓库参照Ghostfolio 的 Nx 配置已为 E2E 预留 Cypress 默认与缓存策略接入成本主要在于选择框架并执行一次ng add。赞分享后端前端金融科技数据可视化【免费下载链接】ghostfolioOpen Source Wealth Management Software. Angular NestJS Prisma Nx TypeScript 项目地址https://gitcode.com/GitHub_Trending/gh/ghostfolio点击查看免费下载相关推荐AgentGPT 本地部署实战用内置 CLI 一键装配并运行浏览器内的自主 AI AgentAgentGPT 本地部署实战用内置 CLI 一键装配并运行浏览器内的自主 AI Agent AgentGPT 是一个开源的自主 AI Agent 平台允许AI AgentAI 应用后端前端Angular CLI 端到端E2E测试实战指南从 ng e2e 配置到自定义测试目标Angular CLI 端到端E2E测试实战指南从 ng e2e 配置到自定义测试目标 端到端End to End简称 E2E测试用于验证整个应用从前端Web框架Cortex E2E 测试框架实战指南从依赖安装到全量端到端测试运行Cortex E2E 测试框架实战指南从依赖安装到全量端到端测试运行 导读 本文基于 Cortex 仓库Production infrastructure后端云原生模型推理服务MLOps人工智能上一篇Aptos MoveFlow 规范推断评估round-v1.2-005-opus 轮次的准备、校验与可复现性实践下一篇MAS 激活工具速览免费 Windows 激活与 Office 激活四种方法一次讲清创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考