agent-browser 与 OpenAI 配置进行自动化测试教程（超详细新手版）

agent-browser 与 OpenAI 配置进行自动化测试教程（超详细新手版）

大家好！这个教程是为完全的小白准备的，我们一步一步来教你如何使用 agent-browser（一个专门为 AI 代理设计的浏览器自动化工具）结合 OpenAI（这里假设“opencode”指的是 OpenAI 的模型，比如 GPT-4o）来做自动化测试。

agent-browser 本身是一个命令行工具（CLI），它可以控制浏览器做点击、填写表单、截图、获取页面信息等操作。它特别适合和 AI（大语言模型）配合，因为它能输出“AI 友好”的页面快照（snapshot），让 AI 看懂页面上有哪些可点击的元素。

我们最终的目标是：写一个 Python 脚本，让 OpenAI 模型“看”页面 → 思考下一步该做什么 → 执行操作 → 重复，直到完成测试任务（比如登录、搜索、下单等）。

这就像一个“AI 浏览器测试机器人”，完全自动化。

第一步：准备环境（安装必备工具）

1. 安装 Node.js（推荐最新 LTS 版）
   去官网 https://nodejs.org 下载安装，装完后在命令行（Windows 用 cmd/PowerShell，Mac/Linux 用终端）输入：

   node -v
   npm -v
   

   能看到版本号就成功了。

2. 安装 agent-browser

   npm install -g agent-browser
   agent-browser install   # 这会自动下载 Chromium 浏览器（大约 200-300MB，耐心等）
   

   Linux 用户如果报错缺依赖，运行：

   agent-browser install --with-deps
   

3. 安装 Python 3（推荐 3.10+）
   官网 https://www.python.org 下载安装。装完后命令行输入：

   python --version
   

4. 安装 Python 需要的库

   pip install openai subprocess json os sys
   

   （其实主要是 openai 库，其他是 Python 自带的）

5. 获取 OpenAI API Key
   去 https://platform.openai.com/api-keys 注册/登录，创建一个 API Key（看起来像 sk-... 开头）。
   为了安全，建议设置环境变量（不要把 key 直接写死在代码里）：

   • Windows（PowerShell）：

     $env:OPENAI_API_KEY="你的key"
     

   • Mac/Linux：

     export OPENAI_API_KEY="你的key"
     

   每次打开新终端都要重新设置，或者写进系统环境变量。

第二步：先手动玩玩 agent-browser（理解基本命令）

打开命令行，试试这些命令（每条命令单独运行）：

# 打开一个页面（headless 模式，看不到浏览器）
agent-browser open https://example.com

# 获取页面快照（AI 友好版，带 @e1、@e2 这样的引用）
agent-browser snapshot -i --json

# 点击某个元素（用快照里看到的引用，比如 @e5 是登录按钮）
agent-browser click @e5

# 填写输入框
agent-browser fill @e3 "我的邮箱@example.com"

# 截图保存到当前文件夹
agent-browser screenshot test.png --full

# 关闭浏览器
agent-browser quit

关键点：snapshot -i --json 的输出是一个 JSON，里面有所有可交互元素的引用（@e1、@e2…），AI 看到这个就能决定“下一步点击哪个”。

第三步：写一个简单的 AI 自动化测试脚本

我们用 Python 写一个循环：

1. 打开页面
2. 获取快照 → 发给 OpenAI
3. OpenAI 看快照 → 决定要执行的 agent-browser 命令（比如 click @e5）
4. 执行命令 → 再获取快照 → 重复
5. 直到 OpenAI 说“任务完成”

完整示例代码（保存为 browser_test.py）

import subprocess
import json
import os
import time
from openai import OpenAI

# 初始化 OpenAI 客户端
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

# 测试目标（你可以改成自己的网站）
TARGET_URL = "https://httpbin.org/forms/post"  # 一个简单的表单测试页面
MAX_STEPS = 15  # 最多执行 15 步，防止无限循环

# 系统提示词（非常重要！告诉 AI 怎么做事）
SYSTEM_PROMPT = """
你是一个浏览器自动化测试助手。
你会收到 agent-browser 的 JSON 快照，里面有页面元素的引用（如 @e1、@e2）。
你的任务是完成指定的测试目标。

输出必须严格是 JSON 格式：
{
  "reasoning": "你的思考过程（中文即可）",
  "command": "要执行的 agent-browser 命令（完整命令字符串，不要带 agent-browser 前缀）",
  "arguments": ["参数1", "参数2", ...]
}

如果任务已经完成，输出：
{
  "reasoning": "完成原因",
  "command": "done"
}

只允许使用以下命令：
- open [url]
- click [ref]
- fill [ref] [text]
- type [ref] [text]
- screenshot [filename] --full
- get text [ref]
- wait [selector]
- quit

用 @eX 这样的引用来操作元素。
"""

# 用户指定的测试任务（改这里换测试场景）
user_task = "打开页面，填写姓名 '张三'，选择 pizza 大小为 large，提交表单，然后截图保存为 result.png，完成后说完成。"

def run_command(cmd, args=[]):
    full_cmd = ["agent-browser"] + [cmd] + args
    print(f"执行命令: {' '.join(full_cmd)}")
    result = subprocess.run(full_cmd, capture_output=True, text=True)
    if result.stderr:
        print("错误:", result.stderr)
    return result.stdout

def get_snapshot():
    output = run_command("snapshot", ["-i", "--json"])
    try:
        return json.loads(output)
    except:
        return {"error": "解析快照失败", "raw": output}

# 主循环
def main():
    print("开始自动化测试...")
    
    # 第一步：打开目标页面
    run_command("open", [TARGET_URL])
    time.sleep(3)  # 等页面加载
    
    messages = [
        {"role": "system", "content": SYSTEM_PROMPT},
        {"role": "user", "content": f"测试目标：{user_task}\n开始第一个快照。"}
    ]
    
    for step in range(MAX_STEPS):
        print(f"\n--- 第 {step+1} 步 ---")
        snapshot = get_snapshot()
        snapshot_str = json.dumps(snapshot, ensure_ascii=False, indent=2)
        
        messages.append({"role": "assistant", "content": f"当前页面快照：\n{snapshot_str}"})
        
        response = client.chat.completions.create(
            model="gpt-4o-mini",  # 可以换成 gpt-4o 如果你有权限
            messages=messages,
            temperature=0.3,
            max_tokens=500
        )
        
        try:
            ai_output = json.loads(response.choices[0].message.content)
        except:
            print("AI 输出不是有效 JSON，跳过这步")
            continue
        
        print("AI 思考:", ai_output.get("reasoning", ""))
        
        command = ai_output.get("command", "")
        args = ai_output.get("arguments", [])
        
        if command == "done" or command == "quit":
            print("任务完成！")
            run_command("screenshot", ["final_result.png", "--full"])
            run_command("quit")
            break
        
        # 执行 AI 决定的命令
        run_command(command, args)
        time.sleep(2)  # 等操作完成
        
        # 把执行结果加到对话历史（可选，帮助 AI 了解）
        messages.append({"role": "user", "content": f"已执行: {command} {' '.join(args)}"})

if __name__ == "__main__":
    main()

如何运行

python browser_test.py

第一次运行可能会慢一点（启动浏览器），后面会快。

第四步：典型场景与推荐提示词

场景 1：测试登录流程（比如 GitHub 登录）

改代码里的：

TARGET_URL = "https://github.com/login"
user_task = "打开 GitHub 登录页面，填写用户名 '你的用户名'，填写密码 '你的密码'，点击登录按钮，然后截图保存为 login_result.png，完成后说完成。"

推荐系统提示词加强版（加到 SYSTEM_PROMPT 里）：

注意：密码输入框通常是 type=password 的 input。
登录后如果看到 'Dashboard' 或用户名，说明成功。
不要泄露真实密码（测试时可以用假账号）。

场景 2：电商网站下单测试（比如模拟购物车）

TARGET_URL = "https://example-ecommerce.com/product/123"
user_task = "打开商品页面，点击加入购物车，选择数量 2，前往结账，填写测试地址和邮箱，截图整个流程，最后保存结账页面为 checkout.png。"

推荐提示词：

优先使用语义查找，比如 role button name "Add to Cart"。
如果元素没出现在快照里，先 scroll 或 wait。

场景 3：搜索功能测试（比如 Google 搜索）

TARGET_URL = "https://www.google.com"
user_task = "搜索关键词 'agent-browser GitHub'，点击第一个结果，截图搜索结果页为 search.png。"

常见问题提示：

Google 有时会有验证码，先尝试正常搜索，如果卡住就 done 并报告。

第五步：调试技巧（新手必看）

• 加 --headed 参数可以看到浏览器窗口（调试用）：
  在代码的 run_command 里第一次 open 时加 ["--headed"]
• 如果快照太大，OpenAI 报 token 超限 → 改用 snapshot -i -c（只显示可点击元素）缩小输出
• 出错时看终端的 stderr 输出
• 多跑几次，AI 有时会选错元素，temperature 设低一点（0.0-0.3）更稳定

总结

通过这个教程，你已经拥有了一个完整的 AI 驱动浏览器自动化测试工具！
从简单表单测试开始玩，慢慢扩展到复杂流程。agent-browser + OpenAI 的组合非常强大，适合做端到端 UI 测试、数据采集、自动化操作等。