Skip to content

chore: use npx to invoke agent-browser in skill docs #383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kvnwolf wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: use npx to invoke agent-browser in skill docs #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 160 additions & 160 deletions skills/agent-browser/SKILL.md
View file
Open in desktop

Large diffs are not rendered by default.

110 changes: 55 additions & 55 deletions skills/agent-browser/references/authentication.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ Patterns for handling login flows, session persistence, and authenticated browsi

```bash
# Navigate to login page
agent-browser open https://app.example.com/login
agent-browser wait --load networkidle
npx agent-browser open https://app.example.com/login
npx agent-browser wait --load networkidle

# Get form elements
agent-browser snapshot -i
npx agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Sign In"

# Fill credentials
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
npx agent-browser fill @e1 "user@example.com"
npx agent-browser fill @e2 "password123"

# Submit
agent-browser click @e3
agent-browser wait --load networkidle
npx agent-browser click @e3
npx agent-browser wait --load networkidle

# Verify login succeeded
agent-browser get url # Should be dashboard, not login
npx agent-browser get url # Should be dashboard, not login
```

## Saving Authentication State
Expand All @@ -31,15 +31,15 @@ After logging in, save state for reuse:

```bash
# Login first (see above)
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
npx agent-browser open https://app.example.com/login
npx agent-browser snapshot -i
npx agent-browser fill @e1 "user@example.com"
npx agent-browser fill @e2 "password123"
npx agent-browser click @e3
npx agent-browser wait --url "**/dashboard"

# Save authenticated state
agent-browser state save ./auth-state.json
npx agent-browser state save ./auth-state.json
```

## Restoring Authentication
Expand All @@ -48,13 +48,13 @@ Skip login by loading saved state:

```bash
# Load saved auth state
agent-browser state load ./auth-state.json
npx agent-browser state load ./auth-state.json

# Navigate directly to protected page
agent-browser open https://app.example.com/dashboard
npx agent-browser open https://app.example.com/dashboard

# Verify authenticated
agent-browser snapshot -i
npx agent-browser snapshot -i
```

## OAuth / SSO Flows
Expand All @@ -63,23 +63,23 @@ For OAuth redirects:

```bash
# Start OAuth flow
agent-browser open https://app.example.com/auth/google
npx agent-browser open https://app.example.com/auth/google

# Handle redirects automatically
agent-browser wait --url "**/accounts.google.com**"
agent-browser snapshot -i
npx agent-browser wait --url "**/accounts.google.com**"
npx agent-browser snapshot -i

# Fill Google credentials
agent-browser fill @e1 "user@gmail.com"
agent-browser click @e2 # Next button
agent-browser wait 2000
agent-browser snapshot -i
agent-browser fill @e3 "password"
agent-browser click @e4 # Sign in
npx agent-browser fill @e1 "user@gmail.com"
npx agent-browser click @e2 # Next button
npx agent-browser wait 2000
npx agent-browser snapshot -i
npx agent-browser fill @e3 "password"
npx agent-browser click @e4 # Sign in

# Wait for redirect back
agent-browser wait --url "**/app.example.com**"
agent-browser state save ./oauth-state.json
npx agent-browser wait --url "**/app.example.com**"
npx agent-browser state save ./oauth-state.json
```

## Two-Factor Authentication
Expand All @@ -88,18 +88,18 @@ Handle 2FA with manual intervention:

```bash
# Login with credentials
agent-browser open https://app.example.com/login --headed # Show browser
agent-browser snapshot -i
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
npx agent-browser open https://app.example.com/login --headed # Show browser
npx agent-browser snapshot -i
npx agent-browser fill @e1 "user@example.com"
npx agent-browser fill @e2 "password123"
npx agent-browser click @e3

# Wait for user to complete 2FA manually
echo "Complete 2FA in the browser window..."
agent-browser wait --url "**/dashboard" --timeout 120000
npx agent-browser wait --url "**/dashboard" --timeout 120000

# Save state after 2FA
agent-browser state save ./2fa-state.json
npx agent-browser state save ./2fa-state.json
```

## HTTP Basic Auth
Expand All @@ -108,10 +108,10 @@ For sites using HTTP Basic Authentication:

```bash
# Set credentials before navigation
agent-browser set credentials username password
npx agent-browser set credentials username password

# Navigate to protected resource
agent-browser open https://protected.example.com/api
npx agent-browser open https://protected.example.com/api
```

## Cookie-Based Auth
Expand All @@ -120,10 +120,10 @@ Manually set authentication cookies:

```bash
# Set auth cookie
agent-browser cookies set session_token "abc123xyz"
npx agent-browser cookies set session_token "abc123xyz"

# Navigate to protected page
agent-browser open https://app.example.com/dashboard
npx agent-browser open https://app.example.com/dashboard
```

## Token Refresh Handling
Expand All @@ -138,24 +138,24 @@ STATE_FILE="./auth-state.json"

# Try loading existing state
if [[ -f "$STATE_FILE" ]]; then
agent-browser state load "$STATE_FILE"
agent-browser open https://app.example.com/dashboard
npx agent-browser state load "$STATE_FILE"
npx agent-browser open https://app.example.com/dashboard

# Check if session is still valid
URL=$(agent-browser get url)
URL=$(npx agent-browser get url)
if [[ "$URL" == *"/login"* ]]; then
echo "Session expired, re-authenticating..."
# Perform fresh 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 "$STATE_FILE"
npx agent-browser snapshot -i
npx agent-browser fill @e1 "$USERNAME"
npx agent-browser fill @e2 "$PASSWORD"
npx agent-browser click @e3
npx agent-browser wait --url "**/dashboard"
npx agent-browser state save "$STATE_FILE"
fi
else
# First-time login
agent-browser open https://app.example.com/login
npx agent-browser open https://app.example.com/login
# ... login flow ...
fi
```
Expand All @@ -169,20 +169,20 @@ fi

2. **Use environment variables for credentials**
```bash
agent-browser fill @e1 "$APP_USERNAME"
agent-browser fill @e2 "$APP_PASSWORD"
npx agent-browser fill @e1 "$APP_USERNAME"
npx agent-browser fill @e2 "$APP_PASSWORD"
```

3. **Clean up after automation**
```bash
agent-browser cookies clear
npx agent-browser cookies clear
rm -f ./auth-state.json
```

4. **Use short-lived sessions for CI/CD**
```bash
# Don't persist state in CI
agent-browser open https://app.example.com/login
npx agent-browser open https://app.example.com/login
# ... login and perform actions ...
agent-browser close # Session ends, nothing persisted
npx agent-browser close # Session ends, nothing persisted
```
38 changes: 19 additions & 19 deletions skills/agent-browser/references/proxy-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ Set proxy via environment variable before starting:
```bash
# HTTP proxy
export HTTP_PROXY="http://proxy.example.com:8080"
agent-browser open https://example.com
npx agent-browser open https://example.com

# HTTPS proxy
export HTTPS_PROXY="https://proxy.example.com:8080"
agent-browser open https://example.com
npx agent-browser open https://example.com

# Both
export HTTP_PROXY="http://proxy.example.com:8080"
export HTTPS_PROXY="http://proxy.example.com:8080"
agent-browser open https://example.com
npx agent-browser open https://example.com
```

## Authenticated Proxy
Expand All @@ -28,19 +28,19 @@ For proxies requiring authentication:
```bash
# Include credentials in URL
export HTTP_PROXY="http://username:password@proxy.example.com:8080"
agent-browser open https://example.com
npx agent-browser open https://example.com
```

## SOCKS Proxy

```bash
# SOCKS5 proxy
export ALL_PROXY="socks5://proxy.example.com:1080"
agent-browser open https://example.com
npx agent-browser open https://example.com

# SOCKS5 with auth
export ALL_PROXY="socks5://user:pass@proxy.example.com:1080"
agent-browser open https://example.com
npx agent-browser open https://example.com
```

## Proxy Bypass
Expand All @@ -50,8 +50,8 @@ Skip proxy for specific domains:
```bash
# Bypass proxy for local addresses
export NO_PROXY="localhost,127.0.0.1,.internal.company.com"
agent-browser open https://internal.company.com # Direct connection
agent-browser open https://external.com # Via proxy
npx agent-browser open https://internal.company.com # Direct connection
npx agent-browser open https://external.com # Via proxy
```

## Common Use Cases
Expand All @@ -75,9 +75,9 @@ for proxy in "${PROXIES[@]}"; do
region=$(echo "$proxy" | grep -oP '^\w+-\w+')
echo "Testing from: $region"

agent-browser --session "$region" open https://example.com
agent-browser --session "$region" screenshot "./screenshots/$region.png"
agent-browser --session "$region" close
npx agent-browser --session "$region" open https://example.com
npx agent-browser --session "$region" screenshot "./screenshots/$region.png"
npx agent-browser --session "$region" close
done
```

Expand All @@ -104,9 +104,9 @@ for i in "${!URLS[@]}"; do
export HTTP_PROXY="${PROXY_LIST[$proxy_index]}"
export HTTPS_PROXY="${PROXY_LIST[$proxy_index]}"

agent-browser open "${URLS[$i]}"
agent-browser get text body > "output-$i.txt"
agent-browser close
npx agent-browser open "${URLS[$i]}"
npx agent-browser get text body > "output-$i.txt"
npx agent-browser close

sleep 1 # Polite delay
done
Expand All @@ -123,18 +123,18 @@ export HTTPS_PROXY="http://corpproxy.company.com:8080"
export NO_PROXY="localhost,127.0.0.1,.company.com"

# External sites go through proxy
agent-browser open https://external-vendor.com
npx agent-browser open https://external-vendor.com

# Internal sites bypass proxy
agent-browser open https://intranet.company.com
npx agent-browser open https://intranet.company.com
```

## Verifying Proxy Connection

```bash
# Check your apparent IP
agent-browser open https://httpbin.org/ip
agent-browser get text body
npx agent-browser open https://httpbin.org/ip
npx agent-browser get text body
# Should show proxy's IP, not your real IP
```

Expand All @@ -156,7 +156,7 @@ Some proxies perform SSL inspection. If you encounter certificate errors:

```bash
# For testing only - not recommended for production
agent-browser open https://example.com --ignore-https-errors
npx agent-browser open https://example.com --ignore-https-errors
```

### Slow Performance
Expand Down
Loading