深入Laracasts/Cypress源码：/__cypress__八大端点与Node任务桥接的实现原理

深入Laracasts/Cypress源码/__cypress__八大端点与Node任务桥接的实现原理【免费下载链接】cypressLaravel Cypress Integration项目地址: https://gitcode.com/gh_mirrors/cyp/cypressLaracasts/Cypress是一款 Laravel 与 Cypress 的集成包让你在浏览器里用几行 JS 就能建数据、登录用户、执行 Artisan 命令完成完整的 E2E 验收测试。深入源码可以发现它的全部架构只靠两根支柱一组由 Laravel 暴露的__cypress__测试专用端点以及一套跑在本机 Node 进程里的任务桥接机制。看懂这两处你就看懂了整个项目。 先搞懂为什么必须搭桥Cypress 的测试代码运行在浏览器里而 Laravel 的 Model、Factory、Artisan 命令全部活在PHP 进程里。两个世界之间没有共享内存唯一合法的沟通方式就是 HTTP。所以这个包的设计思路极其直白三层各司其职层运行位置职责核心文件PHP 端Laravel 应用提供 8 个__cypress__端点src/routes/cypress.php、src/Controllers/CypressController.phpJS 端浏览器cy.login()等自定义命令本质是发 HTTP 请求src/stubs/support/laravel-commands.jsNode 端Cypress 进程浏览器做不到的本地操作如换 env 文件src/stubs/plugins/swap-env.js、src/stubs/cypress.config.js一句话记住命令在浏览器、逻辑在 PHP、文件在 Node。__cypress__八大端点速查表8 条路由集中注册在src/routes/cypress.php中全部由CypressController统一实现端点方法干什么对应 JS 命令/__cypress__/loginPOST按条件查找用户查不到就用 Factory 造一个并登录cy.login()/__cypress__/current-userPOST返回当前已登录用户cy.currentUser()/__cypress__/logoutPOST登出当前用户cy.logout()/__cypress__/factoryPOST按 Model state 数量批量创建 Factory 数据cy.create()/__cypress__/artisanPOST执行任意 Artisan 命令cy.artisan()、cy.seed()、cy.refreshDatabase()/__cypress__/run-phpPOST直接 eval 任意 PHP 表达式并返回结果cy.php()/__cypress__/csrf_tokenGET获取 CSRF Token其余 POST 的前置步骤cy.csrfToken()/__cypress__/routesPOST导出全部命名路由cy.refreshRoutes()认证三件套login / current-user / logoutlogin端点是设计最巧的一个传入属性时先在数据库里where($attributes)查找查不到再用User::factory()带 state 造一个并创建最后调用auth()-login()完成登录。也就是说浏览器里一句cy.login({ username: JohnDoe })等价于在 PHP 侧执行了查用户 → 造用户 → 登录三连。current-user和logout分别等价于auth()-user()和auth()-logout()让浏览器侧能断言登录态。数据与命令三驾马车factory / artisan / run-phpfactory支持model state count attributes load五个参数能复现 PHP 侧Model::factory(3)-guest()-create([...])-load(profile)的完整能力这是 Cypress 测试里造测试数据的绝对主力。artisan一个命令通道cy.artisan(migrate:fresh)、cy.seed(PlansTableSeeder)其实都是它的包装。run-php先自动给代码补上return然后直接eval()执行并返回结果。它是调试神器比如随手App\User::count()也是风险最高的端点——正因如此它才有下面这套安全设计兜底。路由端点与命名路由访问routes端点会把 Laravel 全部命名路由映射成{ name, domain, uri, method }结构返回。JS 侧收到后既缓存在Cypress.Laravel.routes内存对象里也落盘一份routes.json见src/stubs/support/laravel-routes.js。这就解锁了一个很 Laravel 的体验——cy.visit({ route: team.dashboard, parameters: { team: 1 } })用路由名代替硬编码 URL。一个容易被忽略的细节CSRF Token注意csrf_token是唯一一个GET端点。因为CypressServiceProvider注册路由时套了web中间件组所有 POST 都会触发 CSRF 校验。所以 JS 侧每个自定义命令的模式都是先cy.csrfToken()拿 token再拼进请求体的_token字段。这套先取令牌、再发请求的链式结构是laravel-commands.js里反复出现的固定套路。 Node 任务桥接浏览器摸不到本地文件怎么办这是整个项目最精妙的部分。Cypress 测试运行在浏览器沙箱里无法读写项目目录下的文件。而 Laravel 做 E2E 测试又有个经典诉求测试期间要用独立的.env.cypress比如指向专门的测试库测试结束后还原。换文件这事只能交给有文件系统权限的 Node 进程——Cypress 恰好提供了cy.task()这个浏览器 → Node 的官方通道。整个桥接链只有三步注册任务src/stubs/plugins/index.js里一行on(task, require(./swap-env))把两个本地任务挂到 Node 侧。实现任务src/stubs/plugins/swap-env.js提供activateCypressEnvFile和activateLocalEnvFile本质只是fs.renameSync——前者把.env备份后让.env.cypress顶上后者反向还原。编排时机src/stubs/support/index.js在before()里调用切换任务after()里还原。还有一个细节非常值得注意切换 env 文件后before()和after()都会紧跟一条cy.artisan(config:clear)。为什么因为 Laravel 会缓存配置env 换掉后必须清缓存新数据库连接才会生效——这里正好复用了__cypress__/artisan端点Node 桥和 PHP 端点在这里形成了闭环。 另一种玩法用php artisan serve --envcypress起服务手动指定环境就不再需要换文件before/after里的任务可以删掉。 一键脚手架cypress:boilerplate 干了什么这些文件从哪来src/CypressBoilerplateCommand.php定义了cypress:boilerplate命令一次执行完成检查package.json里是否装了 cypress没装会提示先npm install cypress --save-dev把src/stubs/下的support、plugins、integration三个目录拷进你的tests/cypress生成cypress.config.js自动把APP_URL注入baseUrl设置 spec 匹配规则并通过setupNodeEvents把plugins/index.js接进 Node 侧——这正是上面任务桥的接线点顺手创建.env.cypress先拷贝一份.env作为起点。️ 三层安全设计生产环境自动隐身__cypress__/run-php这种能执行任意 PHP 的端点暴露到生产环境就是灾难。源码里其实只有三道闸门环境闸门src/CypressServiceProvider.php的boot()开头直接判断——production环境直接return8 条路由根本不会被注册中间件闸门所有端点都套在web中间件组里CSRF 闸门POST 端点全部要求携带 Token。三道叠加意味着这套后门只存在于本地开发环境且无法被匿名跨站请求利用。 总结回到源码这个包其实讲了一个非常干净的故事7 个业务端点 1 个 Token 端点src/routes/cypress.php里 8 行路由撑起浏览器侧cy.login()、cy.create()、cy.artisan()等全套 Laravel 风格命令Node 任务桥swap-env.js用两次文件重命名 两次清配置解决浏览器碰不到本地磁盘的根本矛盾一条命令落地cypress:boilerplate把 stubs、配置、env 文件一次铺好。理解了这个HTTP 端点 任务桥的双通道模型你以后面对任何前端测试框架如何操作后端环境的问题都会有现成的思路了。【免费下载链接】cypressLaravel Cypress Integration项目地址: https://gitcode.com/gh_mirrors/cyp/cypress创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考