codebuddy code cli 可快速生成 vue 待办应用端到端测试：一、需先集成 cypress/playwright 并完成配置；二、用 cli 指令如 codebuddy e2e --browser chrome --page /todo 生成脚本；三、vs code 中通过右键或自然语言指令生成；四、支持从 figma 原型图反向生成；五、自动生成含截图断言与可视化报告的可调试测试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望为 Vue 待办应用生成端到端自动化测试代码，但尚未配置测试框架或缺乏手动编写 Cypress/Playwright 脚本的经验，则可通过 CodeBuddy Code CLI 快速触发结构化、可执行的端到端测试生成。以下是实现此目标的步骤：
一、集成 Cypress 或 Playwright 测试框架
CodeBuddy 依赖已安装并配置的端到端测试运行时环境，需确保项目中已初始化 Cypress 或 Playwright，并完成基础配置（如 cypress.config.ts 或 playwright.config.ts）。若未安装，CodeBuddy 将无法识别测试上下文，导致生成失败。
1、打开终端，进入项目根目录。
2、执行 npm install cypress --save-dev 或 npm install @playwright/test --save-dev 安装对应测试框架。
3、运行 npx cypress init 或 npx playwright install 完成初始配置与浏览器驱动安装。
4、确认项目中存在 cypress/ 或 tests/e2e/ 目录，且配置文件可被 CodeBuddy 自动探测。
二、通过 CLI 指令触发端到端测试生成
CodeBuddy Code CLI 提供标准化命令接口，支持基于用户指定浏览器与页面路径生成覆盖核心用户流程的测试脚本，无需手动描述交互步骤。
1、在终端中确保已全局安装或本地调用 codebuddy CLI 工具。
2、执行指令 codebuddy e2e --browser chrome --page /todo，其中 /todo 为待测页面路由路径。
3、CLI 将自动分析该页面 DOM 结构、关键交互元素（如添加任务输入框、完成复选框、删除按钮）及导航跳转逻辑。
4、生成的测试文件将保存至预设 e2e 目录下，文件名含时间戳与页面标识，例如 todo-create-and-complete.spec.ts。
三、使用对话式指令在 IDE 中生成端到端测试
在 VS Code 中启用 CodeBuddy 插件后，可通过自然语言指令结合上下文感知能力，直接为当前打开的 Vue 页面组件生成端到端测试逻辑，适用于快速验证单个功能模块。
1、在编辑器中打开 TodoList.vue 文件。
2、选中整个组件标签或其 区域。
3、右键选择 Tencent Cloud CodeBuddy > Generate E2E Test。
4、或在侧边对话面板中输入指令 /e2e test the todo creation and deletion flow，并提交。
5、CodeBuddy 将解析组件 props、事件绑定与 DOM 输出特征，生成包含访问、输入、点击、断言四阶段的完整 Playwright/Cypress 脚本。
四、基于 Figma 原型图反向生成端到端测试用例
当项目采用 Figma 进行 UI 设计并已接入 CodeBuddy 的设计稿解析能力时，可直接从原型图中提取用户操作路径，转化为可执行的端到端测试场景，避免测试逻辑与视觉设计脱节。
1、确保 Figma 文件已发布为公开链接，并在项目根目录下配置 .codebuddy/figma.json 指向该链接。
2、在 Figma 中为关键用户旅程添加命名图层，例如 [E2E] Add Task Flow 和 [E2E] Mark Complete Flow。
3、在终端执行 codebuddy e2e --from-figma --flow "Add Task Flow"。
4、CodeBuddy 解析图层跳转关系与按钮文本，自动生成模拟用户从输入到提交全过程的测试脚本，并注入对应截图断言点。
五、生成后注入可视化报告与调试支持
CodeBuddy 在生成端到端测试代码的同时，会同步注入配套的 CI 可视化支持逻辑，便于定位失败原因并回溯用户操作轨迹。
1、生成的测试文件顶部自动插入注释块，标明本次生成所依据的页面结构快照哈希值。
2、每个 test() 块内嵌入 await page.screenshot({ path: `e2e-snapshots/${testName}-step1.png` }) 调用。
3、CLI 执行 codebuddy e2e --report 时，自动聚合所有截图与控制台日志，生成 HTML 格式交互式报告。
4、报告中每一步操作均标注 DOM 元素选择器、等待超时值及实际匹配状态，支持点击跳转至对应源码行。
