agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
Best use case
agent-browser is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
Teams using agent-browser should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/agent-browser/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How agent-browser Compares
| Feature / Agent | agent-browser | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Browser Automation with agent-browser 웹 브라우저를 자동화하여 테스트, 폼 작성, 스크린샷, 데이터 추출 등을 수행합니다. ## Instructions ### 워크플로우: 탐색 → 분석 → 상호작용 → 검증 #### Quick start ```bash agent-browser open <url> # Navigate to page agent-browser snapshot -i # Get interactive elements with refs agent-browser click @e1 # Click element by ref agent-browser fill @e2 "text" # Fill input by ref agent-browser close # Close browser ``` #### Core workflow 1. Navigate: `agent-browser open <url>` 2. Snapshot: `agent-browser snapshot -i` (returns elements with refs like `@e1`, `@e2`) 3. Interact using refs from the snapshot 4. Re-snapshot after navigation or significant DOM changes ## Commands ### Navigation ```bash agent-browser open <url> # Navigate to URL agent-browser back # Go back agent-browser forward # Go forward agent-browser reload # Reload page agent-browser close # Close browser ``` ### Snapshot (page analysis) ```bash agent-browser snapshot # Full accessibility tree agent-browser snapshot -i # Interactive elements only (recommended) agent-browser snapshot -c # Compact output agent-browser snapshot -d 3 # Limit depth to 3 ``` ### Interactions (use @refs from snapshot) ```bash agent-browser click @e1 # Click agent-browser dblclick @e1 # Double-click agent-browser fill @e2 "text" # Clear and type agent-browser type @e2 "text" # Type without clearing agent-browser press Enter # Press key agent-browser press Control+a # Key combination agent-browser hover @e1 # Hover agent-browser check @e1 # Check checkbox agent-browser uncheck @e1 # Uncheck checkbox agent-browser select @e1 "value" # Select dropdown agent-browser scroll down 500 # Scroll page agent-browser scrollintoview @e1 # Scroll element into view ``` ### Get information ```bash agent-browser get text @e1 # Get element text agent-browser get value @e1 # Get input value agent-browser get title # Get page title agent-browser get url # Get current URL ``` ### Screenshots ```bash agent-browser screenshot # Screenshot to stdout agent-browser screenshot path.png # Save to file agent-browser screenshot --full # Full page ``` ### Wait ```bash agent-browser wait @e1 # Wait for element agent-browser wait 2000 # Wait milliseconds agent-browser wait --text "Success" # Wait for text agent-browser wait --load networkidle # Wait for network idle ``` ### Semantic locators (alternative to refs) ```bash agent-browser find role button click --name "Submit" agent-browser find text "Sign In" click agent-browser find label "Email" fill "user@test.com" ``` ## Examples ### Example 1: Form submission ```bash agent-browser open https://example.com/form agent-browser snapshot -i # Output shows: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3] agent-browser fill @e1 "user@example.com" agent-browser fill @e2 "password123" agent-browser click @e3 agent-browser wait --load networkidle agent-browser snapshot -i # Check result ``` ### Example 2: Authentication with saved state ```bash # Login once agent-browser open https://app.example.com/login agent-browser snapshot -i agent-browser fill @e1 "username" agent-browser fill @e2 "password" agent-browser click @e3 agent-browser wait --url "**/dashboard" agent-browser state save auth.json # Later sessions: load saved state agent-browser state load auth.json agent-browser open https://app.example.com/dashboard ``` ### Example 3: Data extraction ```bash agent-browser open https://example.com/products agent-browser snapshot -i # Find product titles and prices agent-browser get text @e5 # Product title agent-browser get text @e6 # Price agent-browser screenshot products.png ``` ## Advanced Features ### Sessions (parallel browsers) **동시 사용 시 `--session` 필수.** `--session` 없이 실행하면 모든 세션이 `default` daemon을 공유하여 서로 간섭한다. 세션 이름 규칙: - worktree에서 실행 → worktree 브랜치명 사용 - 메인에서 실행 → 작업 목적으로 명명 (예: `qa-login`, `data-extract`) ```bash agent-browser --session my-feature open site-a.com # 세션 A agent-browser --session my-feature snapshot -i # 같은 세션에서 조작 agent-browser --session other-task open site-b.com # 세션 B (독립) agent-browser session list # 활성 세션 목록 ``` ### JSON output (for parsing) Add `--json` for machine-readable output: ```bash agent-browser snapshot -i --json agent-browser get text @e1 --json ``` ### Debugging ```bash agent-browser open example.com --headed # Show browser window agent-browser console # View console messages agent-browser errors # View page errors ``` ## Best Practices 1. **동시 사용 시 `--session` 지정**: `--session` 없으면 `default` 세션을 공유하여 간섭 발생. 항상 고유한 세션명 사용 2. **Always snapshot before interacting**: Get fresh refs after navigation or DOM changes 3. **Use interactive snapshot (`-i`)**: Reduces noise, focuses on actionable elements 4. **Wait appropriately**: Use `wait --load networkidle` after actions that trigger navigation 5. **Save auth state**: Reuse login sessions with `state save/load` 6. **Take screenshots for verification**: Visual confirmation of expected state 7. **Use semantic locators for stable tests**: `find role/text/label` is more resilient than refs 8. **작업 완료 후 `close`**: 유휴 daemon은 15분 후 자동 종료되지만, 리소스 절약을 위해 명시적 close 권장 ## Technical Details - Based on Playwright browser automation - Supports Chromium, Firefox, and WebKit - Uses accessibility tree for element detection - Provides stable references (@e1, @e2) for elements - Handles common web testing scenarios out-of-the-box
Related Skills
tree-sitter
AST parsing, S-expression queries, tag extraction via tree-sitter CLI. Use when parsing code into AST, extracting tags, visualizing syntax trees, or performing structural analysis beyond ast-grep.
tidy
Performs small structural code cleanups (tidyings). Use when preparing code changes, removing dead code, reducing nesting, or cleaning up before feature work.
task-naming
CLI command naming convention for Justfile and Makefile. Enforces GAT (group-action-target) word order, grouped listing, mandatory descriptions. Use when creating Justfile recipes, Makefile targets, or reviewing task runner configs for naming consistency. Also use when asking "what should I name this command?" for task runners. Do NOT use for npm scripts, mise tasks, or Claude Code skill naming.
strategic-thinking
체계적 의사결정 프레임워크. First Principles, Trade-off 분석, Cognitive Bias 점검
security
Security expert hub. Code security review (OWASP Top 10, injection, XSS, credentials), vulnerability assessment (KISA 292 items, Unix/Windows server, web pentest, network, DBMS, cloud), ISMS-P certification (101 items, checklist, implementation plan), EFSR financial regulation compliance (전자금융감독규정, 12 articles). 보안 리뷰, 취약점 점검, 인증 준비, 금융규정 준수.
reflect
방향 수정 신호 감지 및 세션 전체 회고. Use when detecting course correction signals ("아니/잠깐/근데"), session retrospective, or reviewing overall progress. /reflect 또는 "회고해줘"로 수동 호출.
refactoring
기존 코드의 안전한 리팩토링. Characterization Test로 동작 보존하며 구조 개선
recall
Load context from Obsidian vault (journals, session pages) and JSONL session history. Vault 위치/구조는 `documentation` skill 참조. Temporal queries scan JSONL by date, topic queries use ir BM25. Use when "recall", "어제 뭐 했지", "what did we work on", "이전 작업", "session history".
qmd
Searches local markdown notes and documents using ir CLI. Use when searching notes, querying documents, managing collections, or retrieving document content.
qa
기능별 QA 체크리스트 생성, 수동 테스트 실행, 결과 기록. Use when QA 테스트, 체크리스트 만들기, 수동 검증, 기능 확인, qa 진행, checklist. Do NOT use for automated test code (use plan-review tdd / code-review instead) or BDD spec (use plan-review bdd instead).
principles
소프트웨어 공학 원칙 바스켓. 원칙 카탈로그 열람, 코드/설계/프로세스/테스트의 원칙 준수도 평가, 위반 식별 및 개선 가이드. Use when 원칙 평가, 원칙 점검, 원칙 검증, principles check, 코드 품질 근본 진단, 설계 원칙 리뷰, 아키텍처 원칙 점검, 프로세스 원칙 점검, 테스트 원칙 점검, 테스트 설계, or when other review skills need a principled foundation. Do NOT use for specific code review (use code-review), security audit (use security), or strategic decisions (use strategic-thinking).
ppt
Generates PowerPoint architecture diagrams with auto-layout and orthogonal routing using PPTXGenJS. Use when creating AWS architecture diagrams, infrastructure layouts, system design slides, IDC 구성도, or any diagram that needs boxes with right-angle connectors in .pptx format. Also use when 아키텍처 다이어그램, 인프라 구성도, PPT 생성, 구성도 만들기, 슬라이드 자동 생성. Do NOT use for simple text-only presentations (use PowerPoint directly), data charts (use data-investigation), or ASCII/Mermaid diagrams (use diagram skill).