Yonatan
f74924cd0c
* feat(skills): Add hierarchical structure with references and templates Adds modular documentation and executable templates to the agent-browser skill for better AI agent consumption and progressive disclosure. ## Added ### References (deep-dive documentation) - `references/snapshot-refs.md` - Ref lifecycle, invalidation, troubleshooting - `references/session-management.md` - Parallel sessions, state persistence - `references/authentication.md` - Login flows, OAuth, 2FA patterns - `references/video-recording.md` - Recording for debugging/docs - `references/proxy-support.md` - Proxy configuration, geo-testing ### Templates (ready-to-use workflows) - `templates/form-automation.sh` - Form filling with validation - `templates/authenticated-session.sh` - Login once, reuse state - `templates/capture-workflow.sh` - Content extraction with screenshots ## Modified - `SKILL.md` - Added reference tables linking to new documentation ## Benefits - Progressive disclosure: Load overview first, deep dives on demand - Reduced context: Smaller chunks for better LLM token efficiency - Ready workflows: Copy-paste templates for common patterns * fix(templates): Make authenticated-session.sh runnable out-of-box Addresses review feedback: login actions were commented but verification wasn't, causing script to fail when run as-is. New approach: - DISCOVERY MODE runs first (shows form structure) - LOGIN FLOW section is fully commented as a unit - User runs once to see refs, then customizes ┌─────────────────────────────────────────────────────────────┐ │ LOGIN FORM STRUCTURE │ ├─────────────────────────────────────────────────────────────┤ │ @e1 [input type="email"] │ │ @e2 [input type="password"] │ │ @e3 [button] "Sign In" │ └─────────────────────────────────────────────────────────────┘
163 lines
3.2 KiB
Markdown
163 lines
3.2 KiB
Markdown
# Video Recording
|
|
|
|
Capture browser automation sessions as video for debugging, documentation, or verification.
|
|
|
|
## Basic Recording
|
|
|
|
```bash
|
|
# Start recording
|
|
agent-browser record start ./demo.webm
|
|
|
|
# Perform actions
|
|
agent-browser open https://example.com
|
|
agent-browser snapshot -i
|
|
agent-browser click @e1
|
|
agent-browser fill @e2 "test input"
|
|
|
|
# Stop and save
|
|
agent-browser record stop
|
|
```
|
|
|
|
## Recording Commands
|
|
|
|
```bash
|
|
# Start recording to file
|
|
agent-browser record start ./output.webm
|
|
|
|
# Stop current recording
|
|
agent-browser record stop
|
|
|
|
# Restart with new file (stops current + starts new)
|
|
agent-browser record restart ./take2.webm
|
|
```
|
|
|
|
## Use Cases
|
|
|
|
### Debugging Failed Automation
|
|
|
|
```bash
|
|
#!/bin/bash
|
|
# Record automation for debugging
|
|
|
|
agent-browser record start ./debug-$(date +%Y%m%d-%H%M%S).webm
|
|
|
|
# Run your automation
|
|
agent-browser open https://app.example.com
|
|
agent-browser snapshot -i
|
|
agent-browser click @e1 || {
|
|
echo "Click failed - check recording"
|
|
agent-browser record stop
|
|
exit 1
|
|
}
|
|
|
|
agent-browser record stop
|
|
```
|
|
|
|
### Documentation Generation
|
|
|
|
```bash
|
|
#!/bin/bash
|
|
# Record workflow for documentation
|
|
|
|
agent-browser record start ./docs/how-to-login.webm
|
|
|
|
agent-browser open https://app.example.com/login
|
|
agent-browser wait 1000 # Pause for visibility
|
|
|
|
agent-browser snapshot -i
|
|
agent-browser fill @e1 "demo@example.com"
|
|
agent-browser wait 500
|
|
|
|
agent-browser fill @e2 "password"
|
|
agent-browser wait 500
|
|
|
|
agent-browser click @e3
|
|
agent-browser wait --load networkidle
|
|
agent-browser wait 1000 # Show result
|
|
|
|
agent-browser record stop
|
|
```
|
|
|
|
### CI/CD Test Evidence
|
|
|
|
```bash
|
|
#!/bin/bash
|
|
# Record E2E test runs for CI artifacts
|
|
|
|
TEST_NAME="${1:-e2e-test}"
|
|
RECORDING_DIR="./test-recordings"
|
|
mkdir -p "$RECORDING_DIR"
|
|
|
|
agent-browser record start "$RECORDING_DIR/$TEST_NAME-$(date +%s).webm"
|
|
|
|
# Run test
|
|
if run_e2e_test; then
|
|
echo "Test passed"
|
|
else
|
|
echo "Test failed - recording saved"
|
|
fi
|
|
|
|
agent-browser record stop
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
### 1. Add Pauses for Clarity
|
|
|
|
```bash
|
|
# Slow down for human viewing
|
|
agent-browser click @e1
|
|
agent-browser wait 500 # Let viewer see result
|
|
```
|
|
|
|
### 2. Use Descriptive Filenames
|
|
|
|
```bash
|
|
# Include context in filename
|
|
agent-browser record start ./recordings/login-flow-2024-01-15.webm
|
|
agent-browser record start ./recordings/checkout-test-run-42.webm
|
|
```
|
|
|
|
### 3. Handle Recording in Error Cases
|
|
|
|
```bash
|
|
#!/bin/bash
|
|
set -e
|
|
|
|
cleanup() {
|
|
agent-browser record stop 2>/dev/null || true
|
|
agent-browser close 2>/dev/null || true
|
|
}
|
|
trap cleanup EXIT
|
|
|
|
agent-browser record start ./automation.webm
|
|
# ... automation steps ...
|
|
```
|
|
|
|
### 4. Combine with Screenshots
|
|
|
|
```bash
|
|
# Record video AND capture key frames
|
|
agent-browser record start ./flow.webm
|
|
|
|
agent-browser open https://example.com
|
|
agent-browser screenshot ./screenshots/step1-homepage.png
|
|
|
|
agent-browser click @e1
|
|
agent-browser screenshot ./screenshots/step2-after-click.png
|
|
|
|
agent-browser record stop
|
|
```
|
|
|
|
## Output Format
|
|
|
|
- Default format: WebM (VP8/VP9 codec)
|
|
- Compatible with all modern browsers and video players
|
|
- Compressed but high quality
|
|
|
|
## Limitations
|
|
|
|
- Recording adds slight overhead to automation
|
|
- Large recordings can consume significant disk space
|
|
- Some headless environments may have codec limitations
|