update docs (#493)

2026-02-17 21:37:41 -06:00
parent 19dd2d0c0b
commit 76df589aea
10 changed files with 161 additions and 70 deletions
@@ -74,7 +74,7 @@ This enables control of:
 | --- | --- |
 | `--session <name>` | Use isolated session |
 | `--profile <path>` | Persistent browser profile directory |
-| `-p <provider>` | Cloud browser provider (`browserbase`, `browseruse`) |
+| `-p <provider>` | Cloud browser provider (`browserbase`, `browseruse`, `kernel`) |
 | `--headers <json>` | HTTP headers scoped to origin |
 | `--executable-path` | Custom browser executable |
 | `--args <args>` | Browser launch args (comma-separated) |
@@ -104,6 +104,10 @@ agent-browser -p browserbase open https://example.com
 export BROWSER_USE_API_KEY="your-api-key"
 agent-browser -p browseruse open https://example.com

+# Kernel
+export KERNEL_API_KEY="your-api-key"
+agent-browser -p kernel open https://example.com
+
 # Or via environment variable
 export AGENT_BROWSER_PROVIDER=browserbase
 agent-browser open https://example.com
@@ -6,20 +6,28 @@ export const metadata = { title: "Commands" }

 ```bash
 agent-browser open <url>              # Navigate (aliases: goto, navigate)
-agent-browser click <sel>             # Click element
+agent-browser click <sel>             # Click element (--new-tab to open in new tab)
 agent-browser dblclick <sel>          # Double-click
 agent-browser fill <sel> <text>       # Clear and fill
 agent-browser type <sel> <text>       # Type into element
-agent-browser press <key>             # Press key (Enter, Tab, Control+a)
+agent-browser press <key>             # Press key (Enter, Tab, Control+a) (alias: key)
+agent-browser keydown <key>           # Hold key down
+agent-browser keyup <key>             # Release key
 agent-browser hover <sel>             # Hover element
+agent-browser focus <sel>             # Focus element
 agent-browser select <sel> <val>      # Select dropdown option
 agent-browser check <sel>             # Check checkbox
 agent-browser uncheck <sel>           # Uncheck checkbox
 agent-browser scroll <dir> [px]       # Scroll (up/down/left/right)
+agent-browser scrollintoview <sel>    # Scroll element into view
+agent-browser drag <src> <dst>        # Drag and drop
+agent-browser upload <sel> <files>    # Upload files
 agent-browser screenshot [path]       # Screenshot (--full for full page)
+agent-browser pdf <path>              # Save page as PDF
 agent-browser snapshot                # Accessibility tree with refs
 agent-browser eval <js>               # Run JavaScript
-agent-browser close                   # Close browser
+agent-browser connect <port|url>      # Connect to browser via CDP
+agent-browser close                   # Close browser (aliases: quit, exit)
 ```

 ## Get info
@@ -33,6 +41,7 @@ agent-browser get title               # Get page title
 agent-browser get url                 # Get current URL
 agent-browser get count <sel>         # Count matching elements
 agent-browser get box <sel>           # Get bounding box
+agent-browser get styles <sel>        # Get computed styles
 ```

 ## Check state
@@ -45,24 +54,35 @@ agent-browser is checked <sel>        # Check if checked

 ## Find elements

-Semantic locators with actions (`click`, `fill`, `check`, `hover`, `text`):
+Semantic locators with actions (`click`, `fill`, `type`, `hover`, `focus`, `check`, `uncheck`, `text`):

 ```bash
 agent-browser find role <role> <action> [value]
 agent-browser find text <text> <action>
 agent-browser find label <label> <action> [value]
 agent-browser find placeholder <ph> <action> [value]
+agent-browser find alt <text> <action>
+agent-browser find title <text> <action>
 agent-browser find testid <id> <action> [value]
 agent-browser find first <sel> <action> [value]
+agent-browser find last <sel> <action> [value]
 agent-browser find nth <n> <sel> <action> [value]
 ```

+Options:
+
+- `--name <name>` -- filter role by accessible name
+- `--exact` -- require exact text match
+
 Examples:

 ```bash
 agent-browser find role button click --name "Submit"
 agent-browser find label "Email" fill "test@test.com"
+agent-browser find alt "Logo" click
 agent-browser find first ".item" click
+agent-browser find last ".item" text
+agent-browser find nth 2 ".card" hover
 ```

 ## Wait
@@ -128,6 +148,8 @@ agent-browser network route <url> --abort      # Block requests
 agent-browser network route <url> --body <json>  # Mock response
 agent-browser network unroute [url]            # Remove routes
 agent-browser network requests                 # View tracked requests
+agent-browser network requests --clear         # Clear request log
+agent-browser network requests --filter <pat>  # Filter by URL pattern
 ```

 ## Tabs & frames
@@ -137,17 +159,30 @@ agent-browser tab                     # List tabs
 agent-browser tab new [url]           # New tab
 agent-browser tab <n>                 # Switch to tab
 agent-browser tab close [n]           # Close tab
+agent-browser window new              # Open new browser window
 agent-browser frame <sel>             # Switch to iframe
 agent-browser frame main              # Back to main frame
 ```

+## Dialogs
+
+```bash
+agent-browser dialog accept [text]    # Accept dialog (with optional prompt text)
+agent-browser dialog dismiss          # Dismiss dialog
+```
+
 ## Debug

 ```bash
 agent-browser trace start [path]      # Start trace
 agent-browser trace stop [path]       # Stop and save trace
+agent-browser record start <path>     # Start video recording (WebM)
+agent-browser record stop             # Stop and save video
+agent-browser record restart <path>   # Stop current and start new recording
 agent-browser console                 # View console messages
+agent-browser console --clear         # Clear console log
 agent-browser errors                  # View page errors
+agent-browser errors --clear          # Clear error log
 agent-browser highlight <sel>         # Highlight element
 ```

@@ -164,6 +199,13 @@ agent-browser state clear --all       # Clear all saved states
 agent-browser state clean --older-than <days>  # Delete old states
 ```

+## Sessions
+
+```bash
+agent-browser session                 # Show current session name
+agent-browser session list            # List active sessions
+```
+
 ## Navigation

 ```bash
@@ -176,18 +218,25 @@ agent-browser reload                  # Reload page

 ```bash
 --session <name>         # Isolated browser session
+--session-name <name>    # Auto-save/restore session state (cookies, localStorage)
 --profile <path>         # Persistent browser profile directory
--headed                 # Show browser window (not headless)
--cdp <port>             # Connect via Chrome DevTools Protocol
--auto-connect           # Auto-discover and connect to running Chrome
+--state <path>           # Load storage state from JSON file
+--headers <json>         # HTTP headers scoped to URL's origin
 --executable-path <path> # Custom browser executable
+--extension <path>       # Load browser extension (repeatable)
 --args <args>            # Browser launch args (comma separated)
 --user-agent <ua>        # Custom User-Agent string
 --proxy <url>            # Proxy server URL
--headers <json>         # HTTP headers scoped to URL's origin
+--proxy-bypass <hosts>   # Hosts to bypass proxy
 --ignore-https-errors    # Ignore HTTPS certificate errors
 --allow-file-access      # Allow file:// URLs to access local files (Chromium only)
+-p, --provider <name>    # Browser provider (ios, browserbase, kernel, browseruse)
+--device <name>          # iOS device name (e.g., "iPhone 15 Pro")
 --json                   # JSON output (for scripts)
+--full, -f               # Full page screenshot
+--headed                 # Show browser window (not headless)
+--cdp <port|url>         # Connect via Chrome DevTools Protocol (port or WebSocket URL)
+--auto-connect           # Auto-discover and connect to running Chrome
 --debug                  # Debug output
 ```

@@ -3,20 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMobileNav } from "./mobile-nav-context";
-
-const navigation = [
-  { name: "Introduction", href: "/" },
-  { name: "Installation", href: "/installation" },
-  { name: "Quick Start", href: "/quick-start" },
-  { name: "Commands", href: "/commands" },
-  { name: "Selectors", href: "/selectors" },
-  { name: "Sessions", href: "/sessions" },
-  { name: "Snapshots", href: "/snapshots" },
-  { name: "Streaming", href: "/streaming" },
-  { name: "CDP Mode", href: "/cdp-mode" },
-  { name: "iOS Simulator", href: "/ios" },
-  { name: "Changelog", href: "/changelog" },
-];
+import { navigation } from "@/lib/docs-navigation";

 export function Sidebar() {
  const pathname = usePathname();
@@ -43,24 +30,34 @@ export function Sidebar() {
        `}
      >
        <div className="h-full overflow-y-auto py-5 pl-3 pr-5">
-          <nav className="space-y-0.5">
-            {navigation.map((item) => {
-              const isActive = pathname === item.href;
-
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className={`block px-2 py-1.5 text-sm transition-colors ${
-                    isActive
-                      ? "text-foreground"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  {item.name}
-                </Link>
-              );
-            })}
+          <nav className="space-y-4">
+            {navigation.map((section, sectionIndex) => (
+              <div key={section.title ?? sectionIndex}>
+                {section.title && (
+                  <div className="px-2 pb-1 text-xs font-medium text-muted-foreground/60 uppercase tracking-wider">
+                    {section.title}
+                  </div>
+                )}
+                <div className="space-y-0.5">
+                  {section.items.map((item) => {
+                    const isActive = pathname === item.href;
+                    return (
+                      <Link
+                        key={item.href}
+                        href={item.href}
+                        className={`block px-2 py-1.5 text-sm transition-colors ${
+                          isActive
+                            ? "text-foreground"
+                            : "text-muted-foreground hover:text-foreground"
+                        }`}
+                      >
+                        {item.name}
+                      </Link>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
          </nav>
        </div>
      </aside>
@@ -3,16 +3,43 @@ export type NavItem = {
  href: string;
 };

-export const allDocsPages: NavItem[] = [
-  { name: "Introduction", href: "/" },
-  { name: "Installation", href: "/installation" },
-  { name: "Quick Start", href: "/quick-start" },
-  { name: "Commands", href: "/commands" },
-  { name: "Selectors", href: "/selectors" },
-  { name: "Sessions", href: "/sessions" },
-  { name: "Snapshots", href: "/snapshots" },
-  { name: "Streaming", href: "/streaming" },
-  { name: "CDP Mode", href: "/cdp-mode" },
-  { name: "iOS Simulator", href: "/ios" },
-  { name: "Changelog", href: "/changelog" },
+export type NavSection = {
+  title: string | null;
+  items: NavItem[];
+};
+
+export const navigation: NavSection[] = [
+  {
+    title: null,
+    items: [
+      { name: "Introduction", href: "/" },
+      { name: "Installation", href: "/installation" },
+      { name: "Quick Start", href: "/quick-start" },
+    ],
+  },
+  {
+    title: "Reference",
+    items: [
+      { name: "Commands", href: "/commands" },
+      { name: "Selectors", href: "/selectors" },
+      { name: "Snapshots", href: "/snapshots" },
+    ],
+  },
+  {
+    title: "Features",
+    items: [
+      { name: "Sessions", href: "/sessions" },
+      { name: "CDP Mode", href: "/cdp-mode" },
+      { name: "Streaming", href: "/streaming" },
+      { name: "iOS Simulator", href: "/ios" },
+    ],
+  },
+  {
+    title: null,
+    items: [{ name: "Changelog", href: "/changelog" }],
+  },
 ];
+
+export const allDocsPages: NavItem[] = navigation.flatMap(
+  (section) => section.items
+);