SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsagent-browser

agent-browser

Agents & models

View repository

Updated 10-15 20:06

About this skill

Agent Browser Skill

Reference (official)

  • GitHub
  • Installation: npm install -g agent-browser && agent-browser install

Trigger conditions

  • doc/input/rdd.md に Agent Browser や E2Eテスト UI検証 If is stated, adopt this Skill's policy by default.
  • Even if not stated, apply it if the user's request corresponds to browser automation / UI checking / screenshot comparison / E2E testing.

Basic policy of this Skill

  • Basic policy: A headless browser CLI for AI agents. Used for UI verification, E2E testing, and visual checking.
  • Element selection: Prioritize the accessibility tree (@e1 , etc.) and semantic locators (role/label). CSS selectors are a last resort.
  • Test design: Write tests that are hard to break. Do not depend on implementation details (class names/ids).
  • Performance: Global installation (npm i -g) is recommended.npx Going through is slow due to the Node.js fallback.

Philosophy (decision rules)

  1. Accessibility first: Identify elements by role/label/text. Dependence on CSS selectors is fragile against refactoring.
  2. Minimal scope: Keep tests small, in units of user operations. Prioritize checking critical flows over covering the entire page.
  3. Screenshots are evidence: Actively take them when visual checking is needed. Prevent regressions through diff verification.
  4. Wait explicitly: Avoid implicit sleep and wait for an element's appearance/state change.

Main commands (frequently used ones)

Page operations

agent-browser open <url>              # ページを開く
agent-browser goto <url>              # 別URLへ遷移
agent-browser screenshot [file]       # スクリーンショット取得
agent-browser pdf [file]              # PDF保存

Element operations

agent-browser click <selector>        # クリック
agent-browser fill <selector> <text>  # 入力欄にテキスト入力
agent-browser press <key>             # キー押下（Enter等）
agent-browser scroll <direction>      # スクロール

Priority order for element selection

# 1. セマンティックロケータ（推奨）
agent-browser click "role=button[name='Submit']"
agent-browser fill "role=textbox[name='Email']" "test@example.com"

# 2. アクセシビリティツリー参照
agent-browser click @e1               # ツリー上のID

# 3. テキストマッチ
agent-browser click "text=ログイン"

# 4. CSSセレクタ（最終手段）
agent-browser click "#submit-btn"

Information retrieval

agent-browser text [selector]         # テキスト取得
agent-browser title                   # ページタイトル
agent-browser url                     # 現在のURL
agent-browser count <selector>        # 要素数

Device/environment settings

agent-browser --viewport 375x812      # モバイルビューポート
agent-browser --device "iPhone 15"    # デバイスエミュレーション
agent-browser --color-scheme dark     # ダークモード

Output format (always this order)

  1. Recommended policy (1-3 lines)
  2. Reason (test stability / maintainability / user perspective)
  3. Design proposal (test target flow / element selection strategy / screenshot plan / environment settings)
  4. Checklist (confirm before implementation)
  5. Pitfalls (to avoid)
  6. Next actions (in the order of trying small steps)

Checklist

  • agent-browser is globally installed (agent-browser --version）
  • Chromium is installed (agent-browser install）
  • Is element selection accessibility-based (not escaping to CSS selectors)?
  • Are tests split in units of user operations?
  • Implicit sleep Are explicit wait conditions used instead of
  • Are the screenshot save destination and naming convention decided?

Common pitfalls

  • npx agent-browser Starting it every time with is slow (global installation recommended)
  • Selectors that depend on CSS class names all break upon refactoring
  • sleep(3000) Fixed waits like become unstable in CI environments
  • Screenshot diffs are falsely detected due to font rendering differences (threshold settings are required)
  • Layout differs from the actual device because the viewport size is unspecified in a headless environment