Real天下

从Claude Code切换到OpenCode也有一段时间了，以前我主要用它来写代码。最近两天波波也来跟风要装OpenCode来，还扬言要玩转各种skills，虽然他暂时还没弄明白一些基础概念，例如：什么是Agent，什么是Skill。

我作为OpenCode的老鸟，也被他的豪言壮语所inspired。趁着刚刚把项目重构版本的代码写完，正愁着没人帮忙做测试。本来上线前应该找人业务同事来帮忙做一轮测试，可是年底了，他们自己也忙得像狗一样，大概也帮不上太多的忙。

哎，只能自己动手了……

噢，对哦，“何不用AI？”。

以前在看公众号到过一个叫agent-browser的工具，这好能够套上OpenCode的skills，实现由AI驱动操控浏览器完成网站系统的自动化测试。既解决了我的测试问题，又能顺便给波波同学打个样。

一、安装agent-browser

参考 https://agent-browser.dev/

如果是用macos的朋友，可以直接执行以下命令，如果不是自己参考官方文档去操作。

npm install -g agent-browser
agent-browser install

agent-browser install会把依赖的playwright给装上，如果本地没有chrome浏览器，那最好顺带把chromium给装上。

二、下载agent-browser的skills到opencode

• 全局skill

cd ~/.config/opencode/

mkdir -p skills/agent-browser/

curl -o ./skills/agent-browser/SKILL.md \
  https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md

• 局部skill（只在该项目生效）

cd project/

mkdir -p ./.opencode/skills/agent-browser/

curl -o ./.opencode/skills/agent-browser/SKILL.md \
  https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md

说白了，skills就是一个应用工具的使用说明书。有了这个说明书AI Agent就能瞬间装备上技能，然后就能帮你打怪闯关了。

三、测试脚本

OK，万事俱备，只欠prompt啦！经过几版本的调试，总算做出一个相对稳定的版本：

## 浏览器自动化测试

调用 `agent-browser` 浏览器自动化测试. 使用 `agent-browser --help` 查看所有命令参数.

### 测试流程

测试目标是**登陆系统后台并创建采购入库单**，具体流程如下：

#### 1、登录系统后台
- 浏览器打开地址 http://192.168.10.8:7206/ ，进入登陆页面
- 登录系统后台（帐号：admin，密码：123456）
- 完成登陆成功后截图
#### 2、进入采购订单页面
- 页面入口：1、顶部菜单：订单 => 左侧菜单：采购单据 => 左侧菜单：采购入库单
- 点击页面的查询按钮
- 查询结果截图
#### 3、新建采购订单
- 点击“添加”按钮后，出现选择供应商的弹窗面板
- 名称输“公司”进行查询，等待查询数据加载完成
- 在候选数据表格中候随机点某一行，选择该对象（radio选定），然后点“选中”按钮。**注意：不要只选第一个行，要随机选择！**
- 如果没有意外，会来到订单保存界面，记录订单号
- 表单的下拉表选择仓库，选择第一项
- 填写备注信息，然后点击“提交”按钮
- 如果没有意外，订单创建成功，会进入添加订单商品明细界面
- 在这里先做个截图

#### 4、添加订单商品明细
- 点击“添加”按钮，进入选择商品的界面
- 在名称查询框中输入“酱油”，然后点击查询按钮，等待查询数据加载完成
- 在候选数据表格中候随机点某一行，选择该对象（radio选定），然后点“选中”按钮。**注意：不要只选第一个行，要随机选择！**
- 在商品数量1-100范围内随机输入
- 然后“生产批次”，随机选择一个日期（不超过半年）
- 最后点击“保存商品”按钮，回到添加订单商品明细界面
- 循环以上步骤（4、添加订单商品明细），添加2-5个商品明细
- 最后来个截图，然后关闭弹窗（点击`<i class="el-icon el-dialog__close">`），返回采购订单列表界面

#### 5、提交订单
- 点击“查询”按钮，找到刚刚创建的订单（状态为“未提交”），在表格对应行有个checkbox按钮，必须先勾选它（可以用上面的订单号进行快速定位）
- 点击“提交”按钮，会弹出二次确认对话框，点“确定”提交订单。提交完成会刷新页面，订单状态变为“已提交”
- 点击“审核“按钮，会弹出二次确认对话框，点“确定”审核订单。审核完成会刷新页面，订单状态变为“已审核”
- 点击”完成“按钮，会弹出二次确认对话框，点“确定”完成订单。完成完成会刷新页面，订单状态变为“已完成”
- 最后来个截图，然后关闭弹窗，返回采购订单列表界面

#### 6、退出系统
- 点击右上角头像，选择“退出”按钮，退出系统
- 最后来个截图，然后关闭浏览器

### 注意事项
- 使用headless 模式运行脚本
- 所有的脚本和临时文件，包括日志和截图都保存在 `agent-browser` 目录下
- 需要等待页面加载完成后再进行下一步操作，避免页面未加载完成就进行下一步操作，导致测试失败
- 测试过程中，如果出现异常，需要记录异常信息，并截图保存
- 测试完成后，需要退出系统，关闭浏览器

四、执行结果