agent-browser 浏览器自动化测试工具 - 基于引用的 AI 友好型端到端测试 CLI

agent-browser by casper-studios/casper-marketplace

136 周安装量

10 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/casper-studios/casper-marketplace --skill agent-browser

自动化命令行工具测试

🇨🇳中文介绍

Agent Browser 测试技能

使用 Vercel 的 agent-browser CLI 进行浏览器自动化和端到端测试。采用基于引用（ref）的元素定位，实现可靠且对 AI 友好的浏览器交互。

快速决策树

What do you need?
│
├─ Take a screenshot of a page?
│  └─ agent-browser open [url] && agent-browser screenshot
│
├─ Fill out a form?
│  └─ open → snapshot -i → fill @ref → click @submit → snapshot
│
├─ Test a login flow?
│  └─ See references/authentication.md
│
├─ Run an E2E test?
│  └─ See references/testing-patterns.md
│
├─ Scrape page content?
│  └─ agent-browser open [url] && agent-browser snapshot -i
│
└─ Debug element targeting?
   └─ agent-browser snapshot -i --format json

安装

# 全局安装 agent-browser
npm install -g agent-browser

# 安装浏览器依赖（Chromium）
agent-browser install

# 验证安装
agent-browser --version

核心概念：基于引用的定位

Agent-browser 使用引用（如 @e1, @e2, @e3）来标识页面上的交互元素。这些引用在你获取快照时被分配。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

常用命令快速参考

agent-browser open <url>              # 导航到 URL
agent-browser back                    # 后退
agent-browser forward                 # 前进
agent-browser refresh                 # 重新加载页面

agent-browser snapshot                # 文本快照
agent-browser snapshot -i             # 包含交互引用
agent-browser snapshot --format json  # JSON 输出
agent-browser screenshot [path]       # 保存屏幕截图

agent-browser click @ref              # 点击元素
agent-browser fill @ref "value"       # 填充输入字段
agent-browser select @ref "option"    # 选择下拉选项
agent-browser hover @ref              # 悬停在元素上
agent-browser press Enter             # 按下键盘按键

agent-browser find role button "Submit"    # 通过 ARIA 角色查找
agent-browser find text "Welcome"          # 通过可见文本查找
agent-browser find label "Email"           # 通过标签查找

agent-browser wait visible @ref            # 等待元素可见
agent-browser wait hidden @ref             # 等待元素隐藏
agent-browser wait network                 # 等待网络空闲
agent-browser wait time 2000               # 等待毫秒数

agent-browser session save mystate         # 保存浏览器状态
agent-browser session load mystate         # 加载保存的状态
agent-browser session list                 # 列出保存的会话
agent-browser close                        # 关闭浏览器

切勿提交这些文件：

*.state - 浏览器会话状态文件包含 cookies
agent-browser-profile/ - 包含凭据的配置文件目录
可能包含敏感数据的屏幕截图

添加到 .gitignore：

*.state
agent-browser-profile/
.agent-browser/
screenshots/

与其他技能的集成

# 研究一个主题，然后在网站上验证声明
parallel_research.py chat "Find pricing for Acme Corp"
# 然后使用 agent-browser 在其实际定价页面上验证
agent-browser open https://acme.com/pricing
agent-browser snapshot -i

与屏幕截图比较

# 为视觉回归测试获取基线屏幕截图
agent-browser open https://myapp.com
agent-browser screenshot baseline.png

# 更改后进行比较
agent-browser screenshot current.png
# 使用图像比较工具

与来自表格的表单数据

# 从 Google Sheets 加载测试数据，运行表单测试
import subprocess
test_data = get_sheet_data("Form Test Cases")
for row in test_data:
    subprocess.run(["agent-browser", "fill", "@email", row["email"]])
    subprocess.run(["agent-browser", "fill", "@password", row["password"]])
    subprocess.run(["agent-browser", "click", "@submit"])

此技能中的文件

references/commands.md - 完整的命令参考
references/authentication.md - 登录流程模式
references/testing-patterns.md - E2E 测试工作流程
references/snapshot-workflow.md - 引用系统深入探讨
scripts/browser_test.py - Python 自动化包装器

示例：完整的表单测试

# 打开注册页面
agent-browser open https://example.com/register

# 获取元素引用
agent-browser snapshot -i

# 填写表单（引用来自快照输出）
agent-browser fill @e1 "John Doe"
agent-browser fill @e2 "john@example.com"
agent-browser fill @e3 "SecurePass123!"
agent-browser select @e4 "United States"
agent-browser click @e5  # 条款复选框
agent-browser click @e6  # 提交按钮

# 等待导航并验证
agent-browser wait network
agent-browser snapshot -i

# 获取确认屏幕截图
agent-browser screenshot registration-success.png

找不到元素：

重新运行 snapshot -i 以获取新的引用
使用语义定位器：agent-browser find text "Submit"
检查元素是否在 iframe 中

页面未加载：

增加超时时间：agent-browser open <url> --timeout 30000
等待网络：agent-browser wait network

在测试前保存状态：agent-browser session save backup
加载状态以恢复：agent-browser session load backup

🇺🇸English

Agent Browser Testing Skill

Browser automation and end-to-end testing using Vercel's agent-browser CLI. Uses ref-based element targeting for reliable, AI-friendly browser interaction.

Quick Decision Tree

What do you need?
│
├─ Take a screenshot of a page?
│  └─ agent-browser open [url] && agent-browser screenshot
│
├─ Fill out a form?
│  └─ open → snapshot -i → fill @ref → click @submit → snapshot
│
├─ Test a login flow?
│  └─ See references/authentication.md
│
├─ Run an E2E test?
│  └─ See references/testing-patterns.md
│
├─ Scrape page content?
│  └─ agent-browser open [url] && agent-browser snapshot -i
│
└─ Debug element targeting?
   └─ agent-browser snapshot -i --format json

Installation

# Install agent-browser globally
npm install -g agent-browser

# Install browser dependencies (Chromium)
agent-browser install

# Verify installation
agent-browser --version

Core Concept: Ref-Based Targeting

Agent-browser uses refs (like @e1, @e2, @e3) to identify interactive elements on the page. These refs are assigned when you take a snapshot.

# Take a snapshot with interactive elements labeled
agent-browser snapshot -i

# Output shows refs:
# @e1: [button] "Sign In"
# @e2: [input] Email field
# @e3: [input] Password field
# @e4: [button] "Submit"

# Use refs to interact
agent-browser click @e1
agent-browser fill @e2 "user@example.com"

Important: Refs are session-specific and invalidate when the page changes. Always re-snapshot after navigation or DOM updates.

Essential Workflow

# 1. Open the target URL
agent-browser open https://example.com

# 2. Take a snapshot to see the page and get refs
agent-browser snapshot -i

# 3. Interact with elements using refs
agent-browser click @e1
agent-browser fill @e2 "test value"

# 4. Take another snapshot to verify changes
agent-browser snapshot -i

Common Commands Quick Reference

Navigation

agent-browser open <url>              # Navigate to URL
agent-browser back                    # Go back
agent-browser forward                 # Go forward
agent-browser refresh                 # Reload page

Snapshots

agent-browser snapshot                # Text snapshot
agent-browser snapshot -i             # With interactive refs
agent-browser snapshot --format json  # JSON output
agent-browser screenshot [path]       # Save screenshot

Interaction

agent-browser click @ref              # Click element
agent-browser fill @ref "value"       # Fill input field
agent-browser select @ref "option"    # Select dropdown option
agent-browser hover @ref              # Hover over element
agent-browser press Enter             # Press keyboard key

Semantic Locators

agent-browser find role button "Submit"    # Find by ARIA role
agent-browser find text "Welcome"          # Find by visible text
agent-browser find label "Email"           # Find by label

Waiting

agent-browser wait visible @ref            # Wait for element visible
agent-browser wait hidden @ref             # Wait for element hidden
agent-browser wait network                 # Wait for network idle
agent-browser wait time 2000               # Wait milliseconds

Session Management

agent-browser session save mystate         # Save browser state
agent-browser session load mystate         # Load saved state
agent-browser session list                 # List saved sessions
agent-browser close                        # Close browser

Security Notes

Never commit these files:

*.state - Browser session state files contain cookies
agent-browser-profile/ - Profile directories with credentials
Screenshots that may contain sensitive data

Add to .gitignore:

*.state
agent-browser-profile/
.agent-browser/
screenshots/

Integration with Other Skills

With Parallel Research

# Research a topic, then verify claims on websites
parallel_research.py chat "Find pricing for Acme Corp"
# Then use agent-browser to verify on their actual pricing page
agent-browser open https://acme.com/pricing
agent-browser snapshot -i

With Screenshot Comparison

# Take baseline screenshots for visual regression
agent-browser open https://myapp.com
agent-browser screenshot baseline.png

# After changes, compare
agent-browser screenshot current.png
# Use image comparison tool

With Form Data from Sheets

# Load test data from Google Sheets, run form tests
import subprocess
test_data = get_sheet_data("Form Test Cases")
for row in test_data:
    subprocess.run(["agent-browser", "fill", "@email", row["email"]])
    subprocess.run(["agent-browser", "fill", "@password", row["password"]])
    subprocess.run(["agent-browser", "click", "@submit"])

Files in This Skill

references/commands.md - Full command reference
references/authentication.md - Login flow patterns
references/testing-patterns.md - E2E test workflows
references/snapshot-workflow.md - Ref system deep dive
scripts/browser_test.py - Python automation wrapper

Example: Complete Form Test

# Open the registration page
agent-browser open https://example.com/register

# Get element refs
agent-browser snapshot -i

# Fill the form (refs from snapshot output)
agent-browser fill @e1 "John Doe"
agent-browser fill @e2 "john@example.com"
agent-browser fill @e3 "SecurePass123!"
agent-browser select @e4 "United States"
agent-browser click @e5  # Terms checkbox
agent-browser click @e6  # Submit button

# Wait for navigation and verify
agent-browser wait network
agent-browser snapshot -i

# Take confirmation screenshot
agent-browser screenshot registration-success.png

Troubleshooting

Element not found:

Re-run snapshot -i to get fresh refs
Use semantic locators: agent-browser find text "Submit"
Check if element is in an iframe

Page not loading:

Increase timeout: agent-browser open <url> --timeout 30000
Wait for network: agent-browser wait network

Session expired:

Save state before tests: agent-browser session save backup
Load state to restore: agent-browser session load backup

Weekly Installs

Repository

casper-studios/…ketplace

GitHub Stars

First Seen

14 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykFail

Installed on

opencode92

github-copilot92

codex92

kimi-cli92

gemini-cli92

cursor92

通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南

36,300 周安装