如何用Expect为每次PR加上真实浏览器验证：GitHub Actions部署与CI模式实战

如何用Expect为每次PR加上真实浏览器验证GitHub Actions部署与CI模式实战【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expectExpect 是一个面向 AI 编码 Agent 的真实浏览器验证工具它读取代码变更、自动生成测试计划并在真实浏览器里实际运行。本文带你 3 步完成GitHub Actions 部署用 Expect 的CI 模式--ci让每个 Pull Request 都自动跑一遍浏览器验证——无需手写一条测试脚本。为什么需要“真实浏览器”这一层验证单元测试和静态检查很难发现 UI 层面的回归按钮 hover 失效、表单提交后不跳转、页面 5xx 报错……这些只有真的打开浏览器才知道。Expect 的思路很直接详见 README.md 的 CI 问答读 diff分析 PR 中改动的文件自动生成一份测试计划跑浏览器基于 Playwright 在真实浏览器中模拟用户操作报结果把发现的问题反馈给 Agent由它修复后重新验证在 CI 场景下你不需要维护选择器、不需要编写断言——这正是它与传统 E2E 框架最大的区别。一键安装步骤生成 GitHub Actions 工作流在你的项目根目录不是 Expect 仓库里执行一条命令npx -y expect-clilatest add github-action命令会做 3 件事实现见 apps/cli/src/commands/add-github-action.ts自动探测环境识别你的包管理器npm / pnpm / yarn / bun / deno并探测项目的开发服务器端口生成工作流写出 [.github/workflows/expect.yml]每个 PR 都会触发测试配置密钥如果你的终端里gh已登录它可以通过claude setup-token一键生成 API Token 并写入仓库的ANTHROPIC_API_KEYsecret手动补密钥也很简单gh secret set ANTHROPIC_API_KEY 加-y参数可跳过所有交互提示直接使用默认值npm、http://localhost:探测到的端口。生成的工作流里有什么生成的 expect.yml 是一个可以直接读懂的标准 workflow关键设计配置项说明on: pull_request: branches: [main]只对合入 main 的 PR 触发if: ... permissions.write true外部 fork 提交不消耗 CI 额度、无法读取 secretsfetch-depth: 0拉取完整历史Expect 才能读到完整的 PR diffEXPECT_BASE_URL测试目标地址默认指向本地开发服务器timeout-minutes: 30单次执行最长 30 分钟permissions: pull-requests: write允许 Expect 在 PR 上自动评论测试结果执行链路是安装依赖 → 安装 Playwright 浏览器Chromium/WebKit/Firefox→ 启动开发服务器并等待就绪 → 运行expect-clilatest --ci→ 上传.expect/sessions/测试产物视频和截图。CI 模式实战30 分钟内它做了什么--ci标志等价于在 index.tsx 中注册的add github-action触发的无头执行会让 Expect 进入专为无人值守设计的运行方式Headless不开可见浏览器窗口跳过 Cookie 提取不读取你本地浏览器的登录态自动批准计划测试计划生成后无需人工确认-y效果30 分钟硬超时超时自动判负常量定义在 constants.ts可用--timeout ms覆盖心跳输出每 60 秒打印一次仍在运行防止 CI 日志看起来卡死标准退出码通过返回0失败返回1直接决定 PR 检查项红绿失败时还会向 CI 输出::error注解见 ci-reporter.ts让错误定位到具体步骤。结果回传PR 评论、步骤摘要与视频产物这是 GitHub Actions 集成最爽的部分——Expect 会在 PR 页面自动贴一条测试报告实现见 run-test.tsPR 评论一个带 ✅/❌ 的状态表格逐步骤列出标题、结果和耗时并附完整输出的折叠区重复运行时更新同一条评论不会刷屏Step Summary向GITHUB_STEP_SUMMARY写入结果徽章和报告全文见 gha-output.ts在 Actions 页面点开步骤即可回看产物上传整个会话的录屏视频和失败截图保存在.expect/sessions/随 workflow artifacts 下载进阶配置最快适配你的项目测部署后的预览环境在仓库 Variables 里设置EXPECT_BASE_URL工作流会跳过本地开发服务器直接测试你指定的线上/预览 URLJSON 输出加--output jsonExpect 会输出一份结构化的CiResultOutput状态、每步耗时、视频/截图路径方便你自己再加工成其他报表自定义测试意图配合-m 重点测试登录流程给测试计划补充自然语言指令复用已保存的 Flow-f slug可以直接复用你本地沉淀的测试流程更多 MCP 客户端的接入方式Claude Code、Cursor、VS Code 等见 docs/mcp.md。常见问题FAQQCI 里失败是代码问题还是 Expect 误报先看 PR 评论里失败步骤的耗时和完整输出再下载expect-test-results产物里的录屏视频30 秒内就能定位。Q本地开发服务器启动很慢怎么办把EXPECT_BASE_URL指向一个部署好的预览环境工作流会自动跳过启动开发服务器这一步。Q非 GitHub 的 CI 能用吗可以。--ci本身与平台无关任何支持无头环境的流水线都能跑只是自动评论 PR 等增强能力只在 GitHub Actions 生效。Q成本怎么控制工作流默认只对有写权限的提交者触发fork 提交不跑30 分钟超时兜底密钥存于 Secrets 不会被 fork 带走。按上面 3 步部署完成后你的每个 PR 都会多一道真实浏览器把关——Agent 写的代码由一个真的浏览器来验收。【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expect创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考