如何5分钟给Claude Code装上Expect:真实浏览器自动测试快速上手教程

发布时间:2026/9/27 3:05:11
如何5分钟给Claude Code装上Expect:真实浏览器自动测试快速上手教程 如何5分钟给Claude Code装上Expect真实浏览器自动测试快速上手教程【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expectExpect 是一款让 AI 编程助手在真实浏览器中自动测试代码的开源工具。装上它之后你可以直接让 Claude Code 扫描你的 git 改动、生成测试计划、驱动真实浏览器执行测试并把发现的 bug 自动修复掉。整个过程无需手写一行测试脚本新手 5 分钟即可完成配置。什么是 Expect先了解它解决什么问题写前端代码时传统的做法是手动打开浏览器点一点或者用 Playwright / Cypress 写一堆脚本、维护一堆选择器。而 Expect 的思路完全不同读取 git 改动自动分析你未暂存的修改或分支 diff生成测试计划由 AI Agent 根据改动生成测试步骤并在终端交互界面TUI中让你确认真实浏览器执行基于 Playwright 驱动真实浏览器还能复用你本地浏览器的 Cookie以已登录用户身份测试闭环修复发现报错后你的 Agent 会修复代码并重新运行测试验证简单说它就像给你的 Claude Code 装上了QA 超能力 一键安装步骤3 条命令搞定安装 Expect 不需要 clone 仓库直接通过 npx 即可整个过程约 1 分钟第 1 步运行初始化命令npx expect-clilatest init这条命令会自动完成三件事实现见 apps/cli/src/commands/init.ts检测你机器上已安装的编程 AgentClaude Code、Codex、Cursor、Gemini CLI 等安装 Expect Skill让 Agent 知道如何测试你的代码定义见 packages/expect-skill/README.md配置 Expect MCP 服务器默认写入项目级配置可选用户级初始化过程中会询问你偏好的浏览器模式Open a browser window推荐打开可见浏览器你能看着每一步测试Run headless无头模式适合 CI 和后台任务第 2 步验证安装成功npx expect-clilatest --version第 3 步可选全局安装如果不想每次都 npx可以npm install -g expect-cli之后直接敲expect命令即可。快速上手在 Claude Code 里跑第一次真实浏览器测试安装完成后在你的项目目录需是一个 git 仓库且改动尚未提交中启动 Claude Code输入/expect然后会发生什么Expect 扫描你的 git 改动默认是changes即暂存 未暂存也可用-t unstaged/-t branch指定AI 生成测试计划终端里以漂亮的交互界面展示确认后它启动一个可见的浏览器窗口像真实用户一样点击、填表、提交每个步骤实时显示 ✅ 通过或 ❌ 失败测试结束输出完整报告性能指标LCP、INP、长动画帧、控制台报错、网络请求异常4xx/5xx、可访问性问题WCAG 审计有失败项你的 Agent 会自动修复并重新跑一遍验证小技巧加-m用自然语言指定测试重点例如expect -m 重点测注册表单的校验逻辑加-y可跳过确认直接执行。常用命令选项速查表选项作用适用场景-m, --message 说明用自然语言指定测什么聚焦某个功能-t, --target 目标unstaged/branch/changes指定测试哪部分改动-u, --url 地址直接指定开发服务器地址跳过端口选择--browser-mode 模式headed/headless无头跑批--profile 名称复用 Chrome 配置如 Default带登录态测试--no-cookies跳过本地浏览器 Cookie 提取测试无需登录的页面--ciCI 模式无头 跳过 Cookie 自动确认 30 分钟超时接入流水线--output json输出 JSON 格式结果程序化处理报告进阶让 Expect 守护你的每个 PRExpect 支持 CI 模式。运行expect add-github-action即可自动生成一个 GitHub Action 工作流为每个 PR 自动执行真实浏览器测试。CI 模式下它会自动切换无头运行、跳过 Cookie 提取、自动批准测试计划并强制 30 分钟超时非常适合团队使用。项目结构源码都在哪里如果你想深入了解 Expect 的架构这是一个 pnpm monorepo核心模块一目了然模块路径职责终端 CLI 界面apps/cli/React Ink 实现的交互式 TUI任务编排packages/supervisor/状态管理、Agent 生命周期、git 操作Agent 接入packages/agent/对接 Claude Code、Codex 等后端浏览器自动化packages/browser/Playwright 驱动 会话录制Cookie 提取packages/cookies/读取 Chrome/Firefox/Safari 配置库公共领域模型packages/shared/测试计划、运行结果等数据模型MCP 客户端配置示例docs/mcp.md各客户端接入方式其中浏览器能力由 8 个 MCP 工具提供open打开页面、playwright执行脚本、screenshot截图/快照、console_logs控制台日志、network_requests网络请求、performance_metrics性能指标、accessibility_audit可访问性审计、close关闭会话详见 docs/mcp.md。常见问题快速解答Q没有检测到我的 AgentExpect 会自动检测PATH上的编程 Agent。用-a claude或codex、cursor等可手动指定。Q测试需要登录怎么办Expect 会读取你系统浏览器的 Cookie以已登录身份运行测试也可用--profile Default直接复用指定 Chrome 配置。Q它和 Puppeteer/Cypress 有什么区别不用写脚本、不用维护选择器。Expect 读取代码改动后自动生成测试计划并执行——相当于把写测试这件事也交给了 Agent。Q移动端测试呢官方标注 Coming soon目前聚焦桌面端 Web 测试。写在最后总结一下这套 5 分钟流程npx expect-clilatest init一键安装 → Claude Code 中输入/expect→ 看浏览器自动跑测试 → Agent 修复 bug 并复验。从此你的每次前端改动都有了真实浏览器级别的验证保障 【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expect创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考