# OpenCode + Agent Browser 自动化测试详细教程

OpenCode + Agent Browser 自动化测试详细教程

前言

本教程将手把手教你如何使用 OpenCode 结合 Agent Browser 进行自动化测试。即使你是完全的新手，也能通过本教程快速上手浏览器自动化测试。

一、环境准备

1.1 安装 Node.js

首先需要安装 Node.js（版本 16 或更高）：

• 访问 nodejs.org 下载并安装
• 安装完成后，在终端运行 node -v 验证安装

1.2 安装 Agent Browser

# 全局安装 agent-browser
npm install -g agent-browser# 下载 Chromium 浏览器
agent-browser install

1.3 Linux 用户额外步骤

如果你使用 Linux，还需要安装系统依赖：

agent-browser install --with-deps

二、基础概念

2.1 什么是 Agent Browser？

Agent Browser 是一个基于 Playwright 的浏览器自动化 CLI 工具，专为 AI 代理设计。它可以：

• 自动浏览网页
• 点击、填写表单
• 截图、获取页面内容
• 与 AI 代理完美配合

2.2 核心工作流程

1. 打开网页 → 2. 获取页面快照 → 3. 识别元素 → 4. 执行操作 → 5. 验证结果

三、快速入门实例

3.1 第一个测试：百度搜索

让我们从一个简单的例子开始 - 自动在百度上搜索"Agent Browser"：

# 1. 打开百度
agent-browser open https://www.baidu.com# 2. 获取页面快照（查看有哪些元素）
agent-browser snapshot# 3. 在搜索框输入内容（假设搜索框的 ref 是 @e3）
agent-browser fill @e3 "Agent Browser"# 4. 点击搜索按钮（假设按钮的 ref 是 @e4）
agent-browser click @e4# 5. 等待页面加载
agent-browser wait 2000# 6. 截图保存结果
agent-browser screenshot baidu_search_result.png# 7. 关闭浏览器
agent-browser close

3.2 使用传统选择器

除了使用 ref，你也可以使用传统的 CSS 选择器：

# 使用 CSS 选择器
agent-browser fill "#kw" "Agent Browser"
agent-browser click "#su"# 使用文本选择器
agent-browser click "text=搜索"# 使用 XPath
agent-browser click "xpath=//input[@type='submit']"

四、进阶实例：电商网站自动化测试

4.1 测试场景

让我们测试一个简单的电商网站的用户流程：

1. 访问首页
2. 搜索商品
3. 添加到购物车
4. 验证购物车内容

4.2 完整测试脚本

创建一个名为 ecommerce_test.sh 的脚本文件：

#!/bin/bash
echo "开始电商网站自动化测试..."# 1. 打开电商网站
agent-browser open https://demo.ecommerce.com# 2. 获取初始快照
agent-browser snapshot -i# 3. 点击搜索框并输入商品名称
agent-browser find placeholder "搜索商品" fill "iPhone 15"# 4. 点击搜索按钮
agent-browser find role button click --name "搜索"# 5. 等待搜索结果加载
agent-browser wait --text "iPhone 15"# 6. 点击第一个商品
agent-browser find first ".product-item" click# 7. 等待商品详情页加载
agent-browser wait --text "加入购物车"# 8. 点击加入购物车
agent-browser find role button click --name "加入购物车"# 9. 等待提示信息
agent-browser wait --text "已添加到购物车"# 10. 点击购物车图标
agent-browser find role link click --name "购物车"# 11. 验证购物车内容
agent-browser get text ".cart-items"
agent-browser is visible "iPhone 15"# 12. 截图保存测试结果
agent-browser screenshot shopping_cart_test.png# 13. 关闭浏览器
agent-browser closeecho "测试完成！"

4.3 运行测试

# 给脚本执行权限
chmod +x ecommerce_test.sh# 运行测试
./ecommerce_test.sh

五、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. 提供解决方案

六、最佳实践

6.1 等待策略

# ❌ 不好的做法 - 固定等待时间
agent-browser wait 3000# ✅ 好的做法 - 等待特定元素出现
agent-browser wait --text "加载完成"# ✅ 更好的做法 - 等待页面加载状态
agent-browser wait --load networkidle

6.2 错误处理

在脚本中添加错误检查：

#!/bin/bash
set -e  # 遇到错误立即退出# 函数：安全点击
safe_click() {if agent-browser is visible "$1"; thenagent-browser click "$1"elseecho "错误：元素 $1 不可见"exit 1fi
}# 使用示例
safe_click "#submit-button"

6.3 数据驱动测试

创建数据文件 test_data.json：

{"users": [{"username": "user1", "password": "pass1", "expected": "success"},{"username": "user2", "password": "wrong", "expected": "error"}]
}

然后编写循环测试脚本：

#!/bin/bash# 读取测试数据
users=$(jq -r '.users[] | @base64' test_data.json)for user in $users; do_jq() {echo ${user} | base64 --decode | jq -r ${1}}username=$(_jq '.username')password=$(_jq '.password')expected=$(_jq '.expected')echo "测试用户: $username"# 执行登录测试...
done

七、调试技巧

7.1 使用可视化模式

# 使用 --headed 参数显示浏览器窗口
agent-browser open https://example.com --headed

7.2 高亮元素

# 高亮显示特定元素
agent-browser highlight "#important-button"

7.3 查看控制台日志

# 查看页面控制台输出
agent-browser console

7.4 网络请求监控

# 查看网络请求
agent-browser network requests# 过滤 API 请求
agent-browser network requests --filter api

八、实战项目：自动化测试报告生成

8.1 项目结构

automation-project/
├── tests/
│   ├── login_test.sh
│   ├── product_test.sh
│   └── checkout_test.sh
├── reports/
├── screenshots/
├── test_data.json
└── run_all_tests.sh

8.2 通用测试函数库

创建 lib/test_functions.sh：

#!/bin/bash# 初始化测试环境
init_test() {export TEST_NAME=$1export TEST_START_TIME=$(date +%s)export SCREENSHOT_DIR="screenshots/${TEST_NAME}_$(date +%Y%m%d_%H%M%S)"mkdir -p "$SCREENSHOT_DIR"echo "开始测试: $TEST_NAME"
}# 截图函数
take_screenshot() {local name=$1local filename="${SCREENSHOT_DIR}/${name}.png"agent-browser screenshot "$filename"echo "截图保存: $filename"
}# 断言函数
assert_visible() {local selector=$1local message=$2if agent-browser is visible "$selector"; thenecho "✅ 通过: $message"return 0elseecho "❌ 失败: $message"take_screenshot "assert_failed_${selector//[^a-zA-Z0-9]/_}"return 1fi
}# 清理函数
cleanup_test() {local end_time=$(date +%s)local duration=$((end_time - TEST_START_TIME))echo "测试 $TEST_NAME 完成，耗时: ${duration}秒"agent-browser close
}

8.3 具体测试用例

创建 tests/login_test.sh：

#!/bin/bash
source ../lib/test_functions.sh# 初始化测试
init_test "用户登录测试"# 打开登录页面
agent-browser open https://example.com/login
take_screenshot "login_page"# 输入用户名和密码
agent-browser fill "#username" "testuser"
agent-browser fill "#password" "testpass"
take_screenshot "filled_form"# 点击登录
agent-browser click "#login-button"# 验证登录成功
assert_visible ".user-avatar" "用户头像可见"
assert_visible "text=欢迎回来" "欢迎消息可见"# 截图保存结果
take_screenshot "login_success"# 清理
cleanup_test

8.4 批量运行测试

创建 run_all_tests.sh：

#!/bin/bashecho "开始运行所有测试..."
echo "=================="# 记录开始时间
START_TIME=$(date +%s)# 运行所有测试
for test_file in tests/*.sh; doif [ -f "$test_file" ]; thenecho "运行测试: $test_file"bash "$test_file"echo "------------------"fi
done# 记录结束时间
END_TIME=$(date +%s)
TOTAL_DURATION=$((END_TIME - START_TIME))echo "所有测试完成！总耗时: ${TOTAL_DURATION}秒"# 生成简单的测试报告
echo "生成测试报告..."
cat > reports/test_report.md << EOF
# 自动化测试报告
生成时间: $(date)## 测试统计
- 总测试数: $(ls tests/*.sh | wc -l)
- 总耗时: ${TOTAL_DURATION}秒
- 截图数量: $(find screenshots/ -name "*.png" | wc -l)## 测试详情
$(ls screenshots/*/ | grep -v "^d" | wc -l) 张截图已保存到 screenshots 目录EOF

九、常见问题解决

9.1 元素找不到

# 问题：元素找不到
# 解决方案：
# 1. 等待元素出现
agent-browser wait "$SELECTOR"# 2. 检查元素是否真的存在
agent-browser get count "$SELECTOR"# 3. 使用更稳定的选择器
# 优先使用 data-testid，其次使用文本内容，最后使用 CSS 类名

9.2 页面加载慢

# 增加等待时间
agent-browser wait --load networkidle# 或者等待特定元素
agent-browser wait --text "页面加载完成"

9.3 弹窗处理

# 处理 alert 弹窗
agent-browser dialog accept# 处理 confirm 弹窗
agent-browser dialog dismiss

十、下一步学习

10.1 推荐阅读

• Playwright 官方文档
• Agent Browser GitHub 仓库
• 自动化测试最佳实践

10.2 练习项目

1. 新闻网站自动化：自动抓取新闻标题和摘要
2. 天气预报应用：自动查询多个城市的天气
3. 股票价格监控：定时抓取股票价格并生成报告
4. 社交媒体分析：自动收集和分析社交媒体数据

10.3 加入社区

• 关注 Agent Browser 的 GitHub 仓库获取最新更新
• 参与讨论和贡献代码
• 分享你的自动化测试经验

总结

恭喜你完成了这个 OpenCode + Agent Browser 自动化测试教程！你现在应该能够：

✅ 安装和配置 Agent Browser
✅ 编写基础的自动化测试脚本
✅ 使用 AI 提示词生成测试用例
✅ 处理常见的测试场景
✅ 调试和解决常见问题

记住，自动化测试是一个需要不断练习的技能。从简单的项目开始，逐步增加复杂性，你会变得越来越熟练。

祝你测试愉快！🚀