Browser Automation Core Skill
Purpose
A reusable browser automation library that provides common web interaction capabilities for multiple OpenClaw agents. Designed to be extended by agent-specific skills while maintaining a single, well-tested core.
Primary Users
- Facet - Onshape CAD learning automation
- Ace - Competition entry and form filling
- Future agents - Any web automation needs
Architecture
browser-automation-core/ # This skill
├── navigation/ # URL loading, waiting
├── interaction/ # Click, type, select
├── capture/ # Screenshot, HTML capture
├── forms/ # Form detection and filling
└── sessions/ # Tab/window management
facets-browser-learning/ # Facet-specific extension
└── uses core + Onshape-specific logic
ace-competition-automation/ # Ace-specific extension
└── uses core + competition-specific logic
Core Capabilities
Navigation
- URL loading with timeout and retry
- Wait conditions (element visible, page loaded)
- History management (back, forward, refresh)
- Tab/window control (open, close, switch)
Interaction
- Element finding (CSS selectors, XPath, text)
- Basic actions (click, type, clear, submit)
- Mouse operations (hover, drag, scroll)
- Keyboard operations (key presses, shortcuts)
Capture
- Screenshots (full page, element, viewport)
- HTML capture (page source, element HTML)
- Text extraction (visible text, attributes)
- Performance metrics (load times, resources)
Forms
- Form detection (find all forms on page)
- Field mapping (match fields to data)
- Validation (required fields, formats)
- Submission (submit buttons, AJAX handling)
Sessions
- Cookie management (save/load sessions)
- Authentication state (login persistence)
- Profile management (user agent, viewport)
- Cleanup (close browsers, clear data)
Quick Start
Installation
# Install from ClawHub (when published)
npx clawhub@latest install browser-automation-core
# Or use local development version
cp -r /path/to/skill /root/.openclaw/workspace/skills/
Basic Usage
# Example: Navigate and take screenshot
from browser_core import BrowserAutomation
browser = BrowserAutomation()
browser.navigate("https://example.com")
browser.take_screenshot("example.png")
browser.close()
Agent-Specific Examples
For Facet (Onshape Learning)
from browser_core import BrowserAutomation
from facets_onshape import OnshapeAutomation
browser = BrowserAutomation()
onshape = OnshapeAutomation(browser)
# Login to Onshape
onshape.login(email="facet.ai.oc@gmail.com", password="***")
# Navigate to tutorials
onshape.navigate_to_tutorial("getting-started")
# Complete tutorial steps
onshape.complete_tutorial_step(1)
onshape.take_progress_screenshot()
For Ace (Competition Entry)
from browser_core import BrowserAutomation
from ace_competition import CompetitionAutomation
browser = BrowserAutomation()
competition = CompetitionAutomation(browser)
# Navigate to competition
competition.navigate_to_competition("https://competition.example.com")
# Fill entry form
entry_data = {
"name": "Stef Ferreira",
"email": "ace@supplystoreafrica.com",
"phone": "+27726386189"
}
competition.fill_entry_form(entry_data)
# Submit and capture proof
competition.submit_entry()
competition.capture_submission_proof()
Configuration
Environment Variables
# Browser settings
export BROWSER_HEADLESS="true" # Run without display
export BROWSER_TIMEOUT="30" # Default timeout seconds
export BROWSER_VIEWPORT="1280,720" # Window size
export BROWSER_USER_AGENT="OpenClaw Agent" # Custom user agent
# CDP settings (OpenClaw browser)
export CDP_URL="http://localhost:18800/json"
export CDP_WEBSOCKET="ws://localhost:18800/devtools/page/..."
# Storage settings
export SCREENSHOT_DIR="/path/to/screenshots"
export SESSION_DIR="/path/to/sessions"
OpenClaw Integration
{
"skills": {
"browser-automation-core": {
"enabled": true,
"config": {
"cdpUrl": "http://localhost:18800/json",
"headless": true,
"timeout": 30,
"screenshotDir": "/root/.openclaw/workspace/screenshots"
}
}
}
}
Implementation Details
CDP (Chrome DevTools Protocol)
This skill uses OpenClaw's built-in browser via CDP:
- Connection: WebSocket to
ws://localhost:18800/devtools/page/... - Commands: Standard CDP methods (Page.navigate, DOM.querySelector, etc.)
- Events: Async event handling for page loads, network requests
Error Handling
- Retry logic: Automatic retry on network failures
- Timeout management: Configurable timeouts per operation
- Fallback strategies: Alternative selectors, different interaction methods
- Recovery procedures: Page reload, session restore
Performance
- Connection pooling: Reuse WebSocket connections
- Command batching: Batch CDP commands when possible
- Caching: Cache page structure, element positions
- Parallel operations: Async operations where safe
Extension Points
Creating Agent-Specific Extensions
1. Create Extension Skill
python3 /usr/lib/node_modules/openclaw/skills/skill-creator/scripts/init_skill.py facets-browser-learning
2. Import Core Library
# In extension skill
import sys
sys.path.append("/root/.openclaw/workspace/skills/browser-automation-core")
from browser_core import BrowserAutomation
class OnshapeAutomation:
def __init__(self):
self.browser = BrowserAutomation()
def onshape_specific_method(self):
# Use core capabilities
self.browser.navigate("https://cad.onshape.com")
# Add Onshape-specific logic
3. Add Specialized Logic
- Site-specific selectors (Onshape CSS classes, competition form fields)
- Domain-specific workflows (tutorial navigation, competition rules)
- Custom capture requirements (progress tracking, entry proof)
- Error handling for specific sites
Testing Strategy
Unit Tests
# Test core functionality
cd /root/.openclaw/workspace/skills/browser-automation-core
python3 -m pytest tests/unit/
Integration Tests
# Test with actual browser
python3 tests/integration/test_navigation.py
python3 tests/integration/test_forms.py
Agent-Specific Tests
# Test Facet extension
cd /root/.openclaw/workspace/skills/facets-browser-learning
python3 tests/test_onshape_automation.py
# Test Ace extension
cd /root/.openclaw/workspace/skills/ace-competition-automation
python3 tests/test_competition_automation.py
Common Use Cases
Use Case 1: Form Filling (Ace)
# Competition entry automation
data = {
"full_name": "Stef Ferreira",
"email": "ace@supplystoreafrica.com",
"phone": "+27726386189",
"address": "123 Street, City, South Africa"
}
browser.navigate(competition_url)
browser.fill_form("form#entry-form", data)
browser.click("button[type='submit']")
browser.wait_for_element(".success-message")
browser.take_screenshot("entry_proof.png")
Use Case 2: Tutorial Navigation (Facet)
# Onshape learning automation
browser.navigate("https://cad.onshape.com")
browser.login(credentials) # Custom method in extension
browser.navigate("/learning/tutorials")
# Complete tutorial
tutorial_steps = browser.extract_tutorial_steps()
for step in tutorial_steps:
browser.complete_step(step) # Custom method
browser.take_screenshot(f"step_{step.number}.png")
browser.capture_certificate()
Use Case 3: Multi-Page Workflow
# Complex automation across multiple pages
browser.open_new_tab()
browser.navigate_to_login()
browser.login(credentials)
browser.switch_to_tab(0)
browser.fill_application_form(data)
browser.switch_to_tab(1)
browser.verify_email_confirmation()
browser.capture_all_tabs_screenshots()
Error Recovery Patterns
CORS Issues (Screenshots/Evaluate Not Working)
Problem: Browser automation fails with CORS errors when taking screenshots or evaluating JavaScript.
Solution: Ensure browser is started with --remote-allow-origins=* flag:
# Browser startup command must include:
--remote-debugging-port=18800 --remote-allow-origins=*
Verification:
curl http://localhost:18800/json/version
# Should return browser info without CORS errors
Network Issues
try:
browser.navigate(url)
except NetworkError:
browser.reload()
browser.wait_for_network_idle()
# Retry operation
Element Not Found
# Try multiple selectors
selectors = [
"button.submit",
"input[type='submit']",
".submit-button",
"//button[contains(text(), 'Submit')]"
]
for selector in selectors:
if browser.element_exists(selector):
browser.click(selector)
break
Form Validation Errors
browser.submit_form()
if browser.has_validation_errors():
errors = browser.get_validation_errors()
for field, message in errors:
browser.fix_field(field, message)
browser.submit_form() # Retry
Performance Optimization
Batch Operations
# Instead of sequential commands
browser.click("button1")
browser.click("button2")
browser.type("input1", "text")
# Use batch commands
commands = [
{"method": "click", "selector": "button1"},
{"method": "click", "selector": "button2"},
{"method": "type", "selector": "input1", "text": "text"}
]
browser.execute_batch(commands)
Caching Strategies
# Cache page structure
if not browser.has_cached_structure(url):
structure = browser.extract_page_structure()
browser.cache_structure(url, structure)
# Use cached selectors
selectors = browser.get_cached_selectors(url)
Security Considerations
Credential Management
- Never hardcode credentials in scripts
- Use environment variables or secure storage
- Implement credential rotation
- Log credential usage (without exposing values)
Session Isolation
- Separate browser sessions per agent
- Clear cookies and storage between sessions
- Use incognito/private mode when possible
- Implement session timeout
Input Validation
- Validate all user inputs before browser interaction
- Sanitize URLs to prevent navigation to malicious sites
- Limit file system access from browser
- Monitor for suspicious behavior
Maintenance
Versioning
- Semantic versioning (MAJOR.MINOR.PATCH)
- Backward compatibility for minor versions
- Deprecation warnings for breaking changes
- Migration guides between major versions
Updates
- Monthly security updates
- Quarterly feature updates
- Annual architecture reviews
- Continuous integration testing
Monitoring
- Usage statistics (which agents use which features)
- Error rates and common failures
- Performance metrics (load times, success rates)
- Agent-specific success tracking
Contributing
Adding New Features
- Check if feature belongs in core or extension
- Write tests for new functionality
- Update documentation
- Submit pull request
Reporting Issues
- Include agent context (Facet, Ace, etc.)
- Provide reproduction steps
- Include screenshots/logs
- Suggest possible solutions
Extension Development
- Follow core API patterns
- Reuse existing utilities when possible
- Write agent-specific tests
- Document extension capabilities
References
CDP Documentation
Related Skills
facets-browser-learning- Facet extensionace-competition-automation- Ace extensionbrowser-testing- Testing utilities
External Resources
Version: 1.0.0
Last Updated: 2026-03-30
Maintainer: Bob (OpenClaw Agent)
License: MIT
Status: Active Development