Laracasts/Cypress 脚手架深度拆解cypress:boilerplate 命令生成的 8 个文件逐一解析【免费下载链接】cypressLaravel Cypress Integration项目地址: https://gitcode.com/gh_mirrors/cyp/cypressLaracasts/Cypress 是 Jeffrey Way 出品的Laravel Cypress 集成脚手架包只需执行一条php artisan cypress:boilerplate命令就能把一套开箱即用的 Cypress 前端 E2E 测试脚手架完整生成到你的 Laravel 项目中。它解决的核心痛点是让前端浏览器测试可以直接调用 Laravel 的登录、工厂、Artisan 等后端能力。本文带你把这条命令生成的 8 个文件逐一拆解看懂每个文件的职责帮你从零真正跑通 Laravel Cypress 测试。 快速开始三步生成 Cypress 脚手架整个集成非常轻量只需三步详细流程见 README.md安装 Cypress 本体Node 侧安装本包Composer 侧仅开发依赖执行php artisan cypress:boilerplatenpm install cypress --save-dev composer require laracasts/cypress --dev php artisan cypress:boilerplate小贴士若提示找不到 Cypress说明第 1 步没做若提示已有配置文件可加--force覆盖源码见 CypressBoilerplateCommand.php。 生成文件总览8 个文件各管一摊命令执行后会在项目根目录默认tests/cypress落地以下文件核心生成逻辑位于 copyStubs 方法文件生成方式一句话职责support/index.js更新测试前后自动切换环境文件的总入口plugins/index.js更新插件入口注册task钩子plugins/swap-env.js新建.env与.env.cypress互换的核心逻辑support/laravel-commands.js新建定义cy.login()、cy.create()等命令support/laravel-routes.js新建把命名路由解析成真实 URLsupport/assertions.js新建扩展assertRedirect等断言support/index.d.ts新建为自定义命令提供 TypeScript 类型integration/example.cy.js新建开箱即跑的示例测试此外还会额外生成全局配置cypress.config.js和测试专用环境.env.cypress下文单独说明。 support/index.js测试前后自动切换环境这是整个脚手架的“开关中枢”。它在每个测试文件运行前把环境切到 Cypress 专用配置运行完再切回保证测试与开发数据库隔离源码见 support/index.jsbefore(() { cy.task(activateCypressEnvFile, {}, { log: false }); // 切到 .env.cypress cy.artisan(config:clear, {}, { log: false }); cy.refreshRoutes(); // 拉取全部命名路由 }); after(() { cy.task(activateLocalEnvFile, {}, { log: false }); // 切回 .env });它同时import了laravel-commands、laravel-routes、assertions三个模块等于把后两个文件的自定义命令一并挂到了全局cy上。 plugins/ 目录环境文件切换的幕后功臣plugins/index.js是 Cypress 的插件入口它只做一件事——把swap-env注册成一个taskmodule.exports (on, config) { on(task, require(./swap-env)); };而真正的“魔法”在 swap-env.js它通过fs.renameSync把.env备份成.env.backup再让.env.cypress顶替.env测试结束后再原样换回。这样 Laravel 就会加载.env.cypress里的独立数据库避免污染开发数据。想手动排查失败现场注释掉index.js里的activateLocalEnvFile环境就会保持 Cypress 状态方便你用浏览器复现问题。 support/laravel-commands.js把 Laravel 能力搬进浏览器这是脚手架最“值钱”的文件它把 Laravel 后端能力封装成浏览器里可调用的cy命令全部对接后端/__cypress__/*接口路由见 routes/cypress.php。最实用的几个cy.login()找到或创建用户并登录等价于User::factory()-create()auth()-login()源码cy.create()用 Laravel 工厂在数据库落一条 Eloquent 记录cy.artisan()在测试环境直接触发任意 Artisan 命令cy.refreshDatabase()/cy.seed()一键migrate:fresh或跑种子cy.php()执行任意 PHP 表达式并取回结果cy.login({ username: JohnDoe }); cy.visit(/dashboard).contains(Welcome Back, JohnDoe!); support/laravel-routes.js用路由名访问页面它重写了cy.visit()让你可以按命名路由而不是硬编码 URL 访问页面路由改名也不会导致测试失效。底层是 Cypress.Laravel.route() 方法cy.visit({ route: team.dashboard, parameters: { team: 1 } });路由清单由cy.refreshRoutes()在套件启动时拉取并缓存还能写入support/routes.json方便排查。️ assertions.js 与 index.d.ts断言 类型提示两个“小而美”的辅助文件assertions.js扩展了cy.assertRedirect()一行代码断言跳转后的路径名源码。index.d.ts为上面所有自定义命令声明 TypeScript 类型写.ts测试时能享受完整补全和检查类型定义。 integration/example.cy.js你的第一个测试开箱即跑的示例直接验证首页包含 “Laravel” 字样帮你确认整套脚手架真的通了源码describe(Example Test, () { it(shows a homepage, () { cy.visit(/); cy.contains(Laravel); }); });跑通它后你就可以放心删掉开始写自己的业务用例。⚙️ 补充cypress.config.js 与 .env.cypresscypress.config.js全局配置中枢命令会用你的APP_URL自动填充baseUrl并把视频/截图/示例都指向 cypress 目录配置模板。.env.cypress默认复制自.env建议改成独立数据库如DB_DATABASEcypress实现测试数据隔离。 安全设计生产环境自动失效这套测试接口为什么敢暴露因为 CypressServiceProvider 在production环境下直接 return不会注册任何/__cypress__/*路由——这些接口只在开发/测试环境存在绝不会泄露到线上。 相关源码导读生成命令主体CypressBoilerplateCommand.php服务提供者与安全开关CypressServiceProvider.php后端测试接口路由routes/cypress.php接口控制器CypressController.php掌握这 8 个文件后你就完全理解了 Laravel Cypress 的“脚手架 后端桥接”思路前端写浏览器用例后端用cy.*命令无缝调用 Laravel 能力。下一步直接npx cypress open选 “E2E Testing” 开始你的第一个用例吧 【免费下载链接】cypressLaravel Cypress Integration项目地址: https://gitcode.com/gh_mirrors/cyp/cypress创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考