写一堆 click(‘#id-xxx’)、fill(‘.input-xxx’, ‘xxx’)后来有了 Playwright、Puppeteer，脚本是好写了，但页面一改版，测试照样挂一片。最近在折腾OpenCode + Agent Browser做自动化测试，发现思路一下变了：与其自己把每一步都写死，不如让 AI 看着页面自己做决策。这篇文章就聊聊，怎么用OpenCode 作为“大脑”，Agent Browser 作为“手和眼睛”，搭建一套 AI 驱动的自动化测试流程。
主角介绍：OpenCode & Agent Browser
OpenCode 是一个终端优先的 AI 编程框架，可以在本地或 CI 环境里，通过自然语言让它帮你写代码、生成测试、执行脚本。它支持多种模型，能读取项目上下文，非常适合做“AI 驱动开发”和“AI 生成测试”这类玩法。Agent Browser：为 AI 代理而生的浏览器 CLIAgent Browser 是 Vercel Labs 开源的一个基于 Playwright 的浏览器自动化命令行工具。它专为 AI Agent 设计，核心能力包括：它最大的特点是输出对 AI 友好的“页面快照 (snapshot)”，而不是整棵 DOM 树，这让 AI 理解页面和选择元素的成本变得极低。简单理解：
项目由来：为什么是“AI + 浏览器”？
从个人体验来说，这个组合的出现，主要为了解决三个痛点：页面一改版，CSS 选择器大面积失效，测试脚本就要跟着改。直接把 HTML 塞给大模型，不仅 Token 消耗巨大，还容易让模型“迷失”在无关信息里。Agent Browser 的 snapshot只输出可交互元素，极大降低了 AI 的理解负担。OpenCode 擅长生成测试逻辑，但本身不操作浏览器。将它与 Agent Browser 结合，就补齐了从“生成测试思路”到“在真实浏览器里执行”的完整链路。所以，这个组合的出现，不是偶然，而是“AI 生成测试”和“AI 操作浏览器”两个趋势的自然结合。
核心工作流程：AI 如何完成一次测试？
agent-browser open https://www.baidu.com这一步会生成一份带 @e1、@e2引用的元素清单，AI 只看这份清单来做决策。AI 分析快照，确定搜索框和“搜索”按钮对应的引用 ID（如 @e3和 @e4）。agent-browser fill @e3 "Agent Browser"agent-browser wait --text "Agent Browser"AI 通过 agent-browser get text获取页面文本，或用 screenshot截图，判断测试是否通过。对 AI 来说，它并不关心底层的 DOM 结构，它只负责三件事：看快照、决定下一步、执行命令。
五、优点分析：这套组合强在哪？
Agent Browser 安装简单，一条命令即可。OpenCode 在终端里就能用自然语言驱动，对开发者非常友好。快照模式让 AI 不再面对海量 HTML，而是聚焦在少量可交互元素上，决策更快、更准。操作基于元素的语义和引用 ID，而非易变的 CSS 类名，使测试脚本更能抵抗前端改版。测试逻辑由 OpenCode 生成，可在本地、CI、Git Hook 中运行，轻松融入现有开发流程。快照比完整 HTML 小得多，显著降低了大模型的 Token 消耗，对需要频繁运行测试的场景很友好。
六、横向对比：它和别家有什么不同？
工具/平台 | 定位与形态 | 核心优势 | 适用场景 |
|---|
OpenCode + Agent Browser | AI 编程助手 + 浏览器 CLI | AI 友好，上下文成本低，可深度集成到本地/CI 环境 | 需要 AI 生成和维护测试、对隐私和可控性要求高的团队 |
传统 Playwright/Puppeteer | 通用浏览器自动化库 | 功能强大，控制粒度细，生态成熟 | 需要精细控制和高稳定性的复杂自动化测试、爬虫 |
Agent 浏览器产品 (如 Browserbase) | 云端托管浏览器服务 | 无需自行维护基础设施，开箱即用 | 不想折腾环境，希望快速将浏览器能力集成到产品中的团队 |
AI 增强浏览器 (如 Dia) | 集成 AI 助手的浏览器 | 在日常浏览中提供 AI 辅助，体验平滑 | 个人用户上网、资料查询、内容创作辅助 |
简单来说，如果你想“用 AI 来生成和维护自动化测试”，而不是自己手写脚本，那么 OpenCode + Agent Browser 是一个非常值得尝试的组合。
七、实战小例子：百度搜索测试
以下是一个简化的实战流程，假设你在 OpenCode 环境中：npm install -g agent-browseragent-browser install
帮我写一个测试：打开百度，搜索“Agent Browser”，等待结果加载，然后截图保存为 result.png。用 agent-browser 的命令实现。
@echo offecho === Baidu Search Test: "Agent Browser" ===:: 1. 打开百度echo Opening Baidu...agent-browser open https://www.baidu.com:: 2. 获取页面快照，查看元素引用echo Getting page snapshot...agent-browser snapshot -i:: 3. 在搜索框中输入 "Agent Browser" (通常搜索框的 ref 是 @e1 或类似)echo Typing search query...agent-browser fill "#kw" "Agent Browser":: 4. 按下回车键或点击搜索按钮echo Pressing Enter to search...agent-browser press Enter:: 5. 等待页面加载echo Waiting for results to load...timeout /t 3 /nobreak >nul:: 6. 截图保存为 result.pngecho Taking screenshot...agent-browser screenshot result.png:: 7. 关闭浏览器echo Closing browser...agent-browser closeecho === Test completed! Screenshot saved as result.png ===
运行脚本，观察 AI 是否正确完成了所有步骤。你可以在过程中随时让它调整策略，比如“加个判断，如果没找到结果就多等两秒再截图”。AI 提示词案例
5.1 基础提示词模板
模板 1：简单表单填写
请帮我自动化测试一个注册表单：
1. 打开 https://example.com/register
2. 填写用户名：testuser123
3. 填写邮箱：test@example.com
4. 填写密码：Test123456
5. 点击注册按钮
6. 验证是否成功跳转到欢迎页面
模板 2：数据提取
请帮我从 https://example.com/products 页面提取所有商品信息：
1. 打开产品列表页面
2. 提取每个商品的名称、价格和描述
3. 将结果整理成表格格式
4. 截图保存页面
模板 3：登录流程测试
测试用户登录功能：
1. 打开 https://example.com/login
2. 输入用户名：demo_user
3. 输入密码：demo_pass
4. 点击登录按钮
5. 验证登录成功后是否显示"欢迎回来"
6. 检查用户头像是否可见
5.2 高级提示词案例
案例 1：完整的电商购买流程
帮我测试完整的购买流程：
1. 访问 https://shop.example.com
2. 搜索"笔记本电脑"
3. 选择价格范围 5000-8000 元的商品
4. 点击评分最高的商品
5. 查看商品详情和用户评价
6. 选择配置（内存：16GB，硬盘：512GB）
7. 点击立即购买
8. 填写收货地址：
- 姓名：张三
- 电话：13800138000
- 地址：北京市朝阳区xxx街道xxx号
9. 选择支付方式：支付宝
10. 验证订单信息正确
11. 截图保存订单确认页面
案例 2：社交媒体自动化测试
测试社交媒体发布功能：
1. 登录 https://social.example.com
- 用户名：test_social
- 密码：TestSocial123
2. 点击发布新动态按钮
3. 上传一张测试图片（使用本地路径：/path/to/test.jpg）
4. 输入文字内容："今天天气真不错！#美好生活"
5. 添加位置信息：北京·朝阳公园
6. 设置可见性：仅好友可见
7. 点击发布按钮
8. 验证动态是否成功发布
9. 检查图片是否正常显示
10. 验证标签是否正确显示
5.3 调试提示词
页面元素无法点击，请帮我分析：
1. 获取当前页面的完整快照
2. 检查目标元素是否被其他元素遮挡
3. 分析元素的可见性和可交互状态
4. 提供解决方案
写在最后
对我来说，OpenCode + Agent Browser带来的最大改变是：我不再把自己当成“写测试脚本的人”，而是更多地去想：“这个页面的测试目标是什么？有哪些关键路径？” 具体怎么点、怎么等，就交给 AI 和 Agent Browser 去协作完成。
粤ICP备14082021号
免费POC，
零成本试错
