본문으로 건너뛰기
cccskills
무료GitHub에 공개

agent-browser

Automate website tasks with agent-browser, a command-line browser tool for AI agents. Fill forms, click controls, extract page text, capture screenshots, and test web apps, with support for saving and reusing login state.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

설치 방법 보기

이럴 때 유용합니다

  • Automating form entry and submission
  • Extracting text from web pages
  • Capturing screenshots and checking web app behavior
  • Saving and reusing login state

포함된 파일(1)

  • SKILL.md7.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Browser Automation with agent-browser

Core Workflow

Every browser automation follows this pattern:

  1. Navigate: agent-browser open <url>
  2. Snapshot: agent-browser snapshot -i (get element refs like @e1, @e2)
  3. Interact: Use refs to click, fill, select
  4. Re-snapshot: After navigation or DOM changes, get fresh refs
agent-browser open https://example.com/form
agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

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

Essential Commands

# Navigation
agent-browser open <url>              # Navigate (aliases: goto, navigate)
agent-browser close                   # Close browser

# Snapshot
agent-browser snapshot -i             # Interactive elements with refs (recommended)
agent-browser snapshot -i -C          # Include cursor-interactive elements (divs with onclick, cursor:pointer)
agent-browser snapshot -s "#selector" # Scope to CSS selector

# Interaction (use @refs from snapshot)
agent-browser click @e1               # Click element
agent-browser fill @e2 "text"         # Clear and type text
agent-browser type @e2 "text"         # Type without clearing
agent-browser select @e1 "option"     # Select dropdown option
agent-browser check @e1               # Check checkbox
agent-browser press Enter             # Press key
agent-browser scroll down 500         # Scroll page

# Get information
agent-browser get text @e1            # Get element text
agent-browser get url                 # Get current URL
agent-browser get title               # Get page title

# Wait
agent-browser wait @e1                # Wait for element
agent-browser wait --load networkidle # Wait for network idle
agent-browser wait --url "**/page"    # Wait for URL pattern
agent-browser wait 2000               # Wait milliseconds

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser pdf output.pdf          # Save as PDF

Common Patterns

Form Submission

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "jane@example.com"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

Authentication with State Persistence

# Login once and save state
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

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

Data Extraction

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Get specific element text
agent-browser get text body > page.txt  # Get all page text

# JSON output for parsing
agent-browser snapshot -i --json
agent-browser get text @e1 --json

Parallel Sessions

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list

Visual Browser (Debugging)

agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser record start demo.webm # Record session

Local Files (PDFs, HTML)

# Open local files with file:// URLs
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png

iOS Simulator (Mobile Safari)

# List available iOS simulators
agent-browser device list

# Launch Safari on a specific device
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# Same workflow as desktop - snapshot, interact, re-snapshot
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # Tap (alias for click)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # Mobile-specific gesture

# Take screenshot
agent-browser -p ios screenshot mobile.png

# Close session (shuts down simulator)
agent-browser -p ios close

Requirements: macOS with Xcode, Appium (npm install -g appium && appium driver install xcuitest)

Real devices: Works with physical iOS devices if pre-configured. Use --device "<UDID>" where UDID is from xcrun xctrace list devices.

Ref Lifecycle (Important)

Refs (@e1, @e2, etc.) are invalidated when the page changes. Always re-snapshot after:

  • Clicking links or buttons that navigate
  • Form submissions
  • Dynamic content loading (dropdowns, modals)
agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

Semantic Locators (Alternative to Refs)

When refs are unavailable or unreliable, use semantic locators:

agent-browser find text "Sign In" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find role button click --name "Submit"
agent-browser find placeholder "Search" type "query"
agent-browser find testid "submit-btn" click

Deep-Dive Documentation

ReferenceWhen to Use
references/commands.mdFull command reference with all options
references/snapshot-refs.mdRef lifecycle, invalidation rules, troubleshooting
references/session-management.mdParallel sessions, state persistence, concurrent scraping
references/authentication.mdLogin flows, OAuth, 2FA handling, state reuse
references/video-recording.mdRecording workflows for debugging and documentation
references/proxy-support.mdProxy configuration, geo-testing, rotating proxies

Ready-to-Use Templates

TemplateDescription
templates/form-automation.shForm filling with validation
templates/authenticated-session.shLogin once, reuse state
templates/capture-workflow.shContent extraction with screenshots
./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Edit a single-file HTML presentation while keeping slide numbers, contents links, section dividers, and level indicators consistent. The skill explains how navigation and inherited section levels work, including what to update when slides move.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding slides and updating contents links
  • Checking navigation after reordering slides
  • Adjusting section dividers and level indicators
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

Style slides in an existing HTML presentation using documented CSS classes and component patterns. The skill covers two-column comparisons, cards, warning boxes, and code coloring, along with rules for automatically displayed slide badges.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Arranging before-and-after examples in two columns
  • Coloring code examples by syntax
  • Formatting key concepts, actions, and warnings
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

Fetch the current date and time in Dubai using a bash command. Return the time, the GST timezone label, and the complete dated output as separate fields for a consistently structured response.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking the current time in Dubai
  • Retrieving Dubai's date and time with its timezone
  • Returning time information in separate fields
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

Check the current date and time in Pakistan Standard Time, which is UTC+5. The skill uses a bash command and presents a concise line containing the date, a 24-hour time, and the PKT label.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking the current time in Pakistan
  • Getting the date and time in PKT
  • Displaying Pakistan time in a concise 24-hour format
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

Create a Dubai time card as an SVG image and a Markdown summary from supplied time values. It fills the included templates and saves both files in the designated output directory without fetching or recalculating the time.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Turning supplied Dubai time into a visual card
  • Saving a time card with a Markdown summary
  • Creating time cards from a consistent template
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

Plan and edit a presentation explaining the progression from unstructured Claude Code use to configured engineering workflows. It provides a teaching sequence, proficiency levels, and a TodoApp example connecting project instructions, skills, agents, and automation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Structuring a Claude Code training presentation
  • Checking the order of slide concepts
  • Explaining workflows through TodoApp examples
shanraisshan/claude-code-best-practice6.8만2026년 10월 17일 업데이트

shanraisshan의 스킬 모두 보기

이 스킬의 문제 신고