63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { CodeBlock } from "@/components/code-block";
|
|
|
|
export default function QuickStart() {
|
|
return (
|
|
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<div className="prose">
|
|
<h1>Quick Start</h1>
|
|
|
|
<h2>Core workflow</h2>
|
|
<p>Every browser automation follows this pattern:</p>
|
|
<CodeBlock code={`# 1. Navigate
|
|
agent-browser open example.com
|
|
|
|
# 2. Snapshot to get element refs
|
|
agent-browser snapshot -i
|
|
# Output:
|
|
# @e1 [heading] "Example Domain"
|
|
# @e2 [link] "More information..."
|
|
|
|
# 3. Interact using refs
|
|
agent-browser click @e2
|
|
|
|
# 4. Re-snapshot after page changes
|
|
agent-browser snapshot -i`} />
|
|
|
|
<h2>Common commands</h2>
|
|
<CodeBlock code={`agent-browser open example.com
|
|
agent-browser snapshot -i # Get interactive elements with refs
|
|
agent-browser click @e2 # Click by ref
|
|
agent-browser fill @e3 "test@example.com" # Fill input by ref
|
|
agent-browser get text @e1 # Get text content
|
|
agent-browser screenshot # Save to temp directory
|
|
agent-browser screenshot page.png # Save to specific path
|
|
agent-browser close`} />
|
|
|
|
<h2>Traditional selectors</h2>
|
|
<p>CSS selectors and semantic locators also supported:</p>
|
|
<CodeBlock code={`agent-browser click "#submit"
|
|
agent-browser fill "#email" "test@example.com"
|
|
agent-browser find role button click --name "Submit"`} />
|
|
|
|
<h2>Headed mode</h2>
|
|
<p>Show browser window for debugging:</p>
|
|
<CodeBlock code="agent-browser open example.com --headed" />
|
|
|
|
<h2>Wait for content</h2>
|
|
<CodeBlock code={`agent-browser wait @e1 # Wait for element
|
|
agent-browser wait --load networkidle # Wait for network idle
|
|
agent-browser wait --url "**/dashboard" # Wait for URL pattern
|
|
agent-browser wait 2000 # Wait milliseconds`} />
|
|
|
|
<h2>JSON output</h2>
|
|
<p>For programmatic parsing in scripts:</p>
|
|
<CodeBlock code={`agent-browser snapshot --json
|
|
agent-browser get text @e1 --json`} />
|
|
<p>
|
|
Note: The default text output is more compact and preferred for AI agents.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|