Compare commits

..
Author SHA1 Message Date
Chris Tate 61a7717c3e usage with agents 2026-01-12 00:21:08 -06:00
10 changed files with 51 additions and 369 deletions
+16 -22
View File
@@ -55,13 +55,13 @@ agent-browser find role button click --name "Submit"
### Core Commands ### Core Commands
```bash ```bash
agent-browser open <url> # Navigate to URL (aliases: goto, navigate) agent-browser open <url> # Navigate to URL
agent-browser click <sel> # Click element agent-browser click <sel> # Click element
agent-browser dblclick <sel> # Double-click element agent-browser dblclick <sel> # Double-click element
agent-browser focus <sel> # Focus element agent-browser focus <sel> # Focus element
agent-browser type <sel> <text> # Type into element agent-browser type <sel> <text> # Type into element
agent-browser fill <sel> <text> # Clear and fill agent-browser fill <sel> <text> # Clear and fill
agent-browser press <key> # Press key (Enter, Tab, Control+a) (alias: key) agent-browser press <key> # Press key (Enter, Tab, Control+a)
agent-browser keydown <key> # Hold key down agent-browser keydown <key> # Hold key down
agent-browser keyup <key> # Release key agent-browser keyup <key> # Release key
agent-browser hover <sel> # Hover element agent-browser hover <sel> # Hover element
@@ -69,14 +69,14 @@ agent-browser select <sel> <val> # Select dropdown option
agent-browser check <sel> # Check checkbox agent-browser check <sel> # Check checkbox
agent-browser uncheck <sel> # Uncheck checkbox agent-browser uncheck <sel> # Uncheck checkbox
agent-browser scroll <dir> [px] # Scroll (up/down/left/right) agent-browser scroll <dir> [px] # Scroll (up/down/left/right)
agent-browser scrollintoview <sel> # Scroll element into view (alias: scrollinto) agent-browser scrollintoview <sel> # Scroll element into view
agent-browser drag <src> <tgt> # Drag and drop agent-browser drag <src> <tgt> # Drag and drop
agent-browser upload <sel> <files> # Upload files agent-browser upload <sel> <files> # Upload files
agent-browser screenshot [path] # Take screenshot (--full for full page) agent-browser screenshot [path] # Take screenshot (--full for full page)
agent-browser pdf <path> # Save as PDF agent-browser pdf <path> # Save as PDF
agent-browser snapshot # Accessibility tree with refs (best for AI) agent-browser snapshot # Accessibility tree with refs (best for AI)
agent-browser eval <js> # Run JavaScript agent-browser eval <js> # Run JavaScript
agent-browser close # Close browser (aliases: quit, exit) agent-browser close # Close browser
``` ```
### Get Info ### Get Info
@@ -129,9 +129,9 @@ agent-browser find nth 2 "a" text
### Wait ### Wait
```bash ```bash
agent-browser wait <selector> # Wait for element to be visible agent-browser wait <selector> # Wait for element
agent-browser wait <ms> # Wait for time (milliseconds) agent-browser wait <ms> # Wait for time
agent-browser wait --text "Welcome" # Wait for text to appear agent-browser wait --text "Welcome" # Wait for text
agent-browser wait --url "**/dash" # Wait for URL pattern agent-browser wait --url "**/dash" # Wait for URL pattern
agent-browser wait --load networkidle # Wait for load state agent-browser wait --load networkidle # Wait for load state
agent-browser wait --fn "window.ready === true" # Wait for JS condition agent-browser wait --fn "window.ready === true" # Wait for JS condition
@@ -253,10 +253,6 @@ AGENT_BROWSER_SESSION=agent1 agent-browser click "#btn"
# List active sessions # List active sessions
agent-browser session list agent-browser session list
# Output:
# Active sessions:
# -> default
# agent1
# Show current session # Show current session
agent-browser session agent-browser session
@@ -397,17 +393,15 @@ agent-browser uses a client-daemon architecture:
The daemon starts automatically on first command and persists between commands for fast subsequent operations. The daemon starts automatically on first command and persists between commands for fast subsequent operations.
**Browser Engine:** Uses Chromium by default. The daemon also supports Firefox and WebKit via the Playwright protocol.
## Platforms ## Platforms
| Platform | Binary | Fallback | | Platform | Binary | Fallback |
|----------|--------|----------| |----------|--------|----------|
| macOS ARM64 | Native Rust | Node.js | | macOS ARM64 | Native Rust | Node.js |
| macOS x64 | Native Rust | Node.js | | macOS x64 | Native Rust | Node.js |
| Linux ARM64 | Native Rust | Node.js | | Linux ARM64 | Native Rust | Node.js |
| Linux x64 | Native Rust | Node.js | | Linux x64 | Native Rust | Node.js |
| Windows x64 | Native Rust | Node.js | | Windows | - | Node.js |
## Usage with AI Agents ## Usage with AI Agents
@@ -442,15 +436,15 @@ Core workflow:
For Claude Code, a [skill](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices) provides richer context: For Claude Code, a [skill](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices) provides richer context:
```bash ```bash
cp -r node_modules/agent-browser/skills/agent-browser .claude/skills/ cp -r node_modules/agent-browser/skills/browsing-web .claude/skills/
``` ```
Or download: Or download:
```bash ```bash
mkdir -p .claude/skills/agent-browser mkdir -p .claude/skills/browsing-web
curl -o .claude/skills/agent-browser/SKILL.md \ curl -o .claude/skills/browsing-web/SKILL.md \
https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/browsing-web/SKILL.md
``` ```
## License ## License
+1 -1
View File
@@ -4,7 +4,7 @@ version = 4
[[package]] [[package]]
name = "agent-browser" name = "agent-browser"
version = "0.4.2" version = "0.4.0"
dependencies = [ dependencies = [
"libc", "libc",
"serde", "serde",
+1 -1
View File
@@ -1,6 +1,6 @@
[package] [package]
name = "agent-browser" name = "agent-browser"
version = "0.4.2" version = "0.4.0"
edition = "2021" edition = "2021"
description = "Fast browser automation CLI for AI agents" description = "Fast browser automation CLI for AI agents"
license = "Apache-2.0" license = "Apache-2.0"
+1 -90
View File
@@ -212,44 +212,6 @@ pub fn parse_command(args: &[String], flags: &Flags) -> Result<Value, ParseError
// === Wait === // === Wait ===
"wait" => { "wait" => {
// Check for --url flag: wait --url "**/dashboard"
if let Some(idx) = rest.iter().position(|&s| s == "--url" || s == "-u") {
let url = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --url".to_string(),
usage: "wait --url <pattern>",
})?;
return Ok(json!({ "id": id, "action": "waitforurl", "url": url }));
}
// Check for --load flag: wait --load networkidle
if let Some(idx) = rest.iter().position(|&s| s == "--load" || s == "-l") {
let state = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --load".to_string(),
usage: "wait --load <state>",
})?;
return Ok(json!({ "id": id, "action": "waitforloadstate", "state": state }));
}
// Check for --fn flag: wait --fn "window.ready === true"
if let Some(idx) = rest.iter().position(|&s| s == "--fn" || s == "-f") {
let expr = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --fn".to_string(),
usage: "wait --fn <expression>",
})?;
return Ok(json!({ "id": id, "action": "waitforfunction", "expression": expr }));
}
// Check for --text flag: wait --text "Welcome"
if let Some(idx) = rest.iter().position(|&s| s == "--text" || s == "-t") {
let text = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --text".to_string(),
usage: "wait --text <text>",
})?;
// Use getByText locator to wait for text to appear
return Ok(json!({ "id": id, "action": "wait", "selector": format!("text={}", text) }));
}
// Default: selector or timeout
if let Some(arg) = rest.get(0) { if let Some(arg) = rest.get(0) {
if arg.parse::<u64>().is_ok() { if arg.parse::<u64>().is_ok() {
Ok(json!({ "id": id, "action": "wait", "timeout": arg.parse::<u64>().unwrap() })) Ok(json!({ "id": id, "action": "wait", "timeout": arg.parse::<u64>().unwrap() }))
@@ -259,7 +221,7 @@ pub fn parse_command(args: &[String], flags: &Flags) -> Result<Value, ParseError
} else { } else {
Err(ParseError::MissingArguments { Err(ParseError::MissingArguments {
context: "wait".to_string(), context: "wait".to_string(),
usage: "wait <selector|ms|--url|--load|--fn|--text>", usage: "wait <selector|ms>",
}) })
} }
} }
@@ -1128,57 +1090,6 @@ mod tests {
assert_eq!(cmd["maxDepth"], 3); assert_eq!(cmd["maxDepth"], 3);
} }
// === Wait ===
#[test]
fn test_wait_selector() {
let cmd = parse_command(&args("wait #element"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["selector"], "#element");
}
#[test]
fn test_wait_timeout() {
let cmd = parse_command(&args("wait 5000"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["timeout"], 5000);
}
#[test]
fn test_wait_url() {
let cmd = parse_command(&args("wait --url **/dashboard"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforurl");
assert_eq!(cmd["url"], "**/dashboard");
}
#[test]
fn test_wait_load() {
let cmd = parse_command(&args("wait --load networkidle"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforloadstate");
assert_eq!(cmd["state"], "networkidle");
}
#[test]
fn test_wait_load_missing_state() {
let result = parse_command(&args("wait --load"), &default_flags());
assert!(result.is_err());
assert!(matches!(result.unwrap_err(), ParseError::MissingArguments { .. }));
}
#[test]
fn test_wait_fn() {
let cmd = parse_command(&args("wait --fn window.ready"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforfunction");
assert_eq!(cmd["expression"], "window.ready");
}
#[test]
fn test_wait_text() {
let cmd = parse_command(&args("wait --text Welcome"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["selector"], "text=Welcome");
}
// === Unknown command === // === Unknown command ===
#[test] #[test]
+6 -9
View File
@@ -1,6 +1,6 @@
{ {
"name": "agent-browser", "name": "agent-browser",
"version": "0.4.2", "version": "0.4.0",
"description": "Headless browser automation CLI for AI agents", "description": "Headless browser automation CLI for AI agents",
"type": "module", "type": "module",
"main": "dist/daemon.js", "main": "dist/daemon.js",
@@ -15,16 +15,13 @@
}, },
"scripts": { "scripts": {
"prepare": "husky", "prepare": "husky",
"version:sync": "node scripts/sync-version.js",
"version": "npm run version:sync && git add cli/Cargo.toml",
"build": "tsc", "build": "tsc",
"build:native": "npm run version:sync && cargo build --release --manifest-path cli/Cargo.toml && node scripts/copy-native.js", "build:native": "cargo build --release --manifest-path cli/Cargo.toml && node scripts/copy-native.js",
"build:linux": "npm run version:sync && docker compose -f docker/docker-compose.yml run --rm build-linux", "build:linux": "docker compose -f docker/docker-compose.yml run --rm build-linux",
"build:macos": "npm run version:sync && (cargo build --release --manifest-path cli/Cargo.toml --target aarch64-apple-darwin & cargo build --release --manifest-path cli/Cargo.toml --target x86_64-apple-darwin & wait) && cp cli/target/aarch64-apple-darwin/release/agent-browser bin/agent-browser-darwin-arm64 && cp cli/target/x86_64-apple-darwin/release/agent-browser bin/agent-browser-darwin-x64", "build:macos": "(cargo build --release --manifest-path cli/Cargo.toml --target aarch64-apple-darwin & cargo build --release --manifest-path cli/Cargo.toml --target x86_64-apple-darwin & wait) && cp cli/target/aarch64-apple-darwin/release/agent-browser bin/agent-browser-darwin-arm64 && cp cli/target/x86_64-apple-darwin/release/agent-browser bin/agent-browser-darwin-x64",
"build:windows": "npm run version:sync && docker compose -f docker/docker-compose.yml run --rm build-windows", "build:windows": "docker compose -f docker/docker-compose.yml run --rm build-windows",
"build:all-platforms": "npm run version:sync && (npm run build:linux & npm run build:windows & wait) && npm run build:macos", "build:all-platforms": "(npm run build:linux & npm run build:windows & wait) && npm run build:macos",
"build:docker": "docker build -t agent-browser-builder -f docker/Dockerfile.build .", "build:docker": "docker build -t agent-browser-builder -f docker/Dockerfile.build .",
"release": "npm run version:sync && npm run build && npm run build:all-platforms && npm publish",
"start": "node dist/daemon.js", "start": "node dist/daemon.js",
"dev": "tsx src/daemon.ts", "dev": "tsx src/daemon.ts",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
-43
View File
@@ -1,43 +0,0 @@
#!/usr/bin/env node
/**
* Syncs the version from package.json to all other config files.
* Run this script before building or releasing.
*/
import { readFileSync, writeFileSync } from "fs";
import { dirname, join } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
const rootDir = join(__dirname, "..");
// Read version from package.json (single source of truth)
const packageJson = JSON.parse(
readFileSync(join(rootDir, "package.json"), "utf-8")
);
const version = packageJson.version;
console.log(`Syncing version ${version} to all config files...`);
// Update Cargo.toml
const cargoTomlPath = join(rootDir, "cli/Cargo.toml");
let cargoToml = readFileSync(cargoTomlPath, "utf-8");
const cargoVersionRegex = /^version\s*=\s*"[^"]*"/m;
const newCargoVersion = `version = "${version}"`;
if (cargoVersionRegex.test(cargoToml)) {
const oldMatch = cargoToml.match(cargoVersionRegex)?.[0];
if (oldMatch !== newCargoVersion) {
cargoToml = cargoToml.replace(cargoVersionRegex, newCargoVersion);
writeFileSync(cargoTomlPath, cargoToml);
console.log(` Updated cli/Cargo.toml: ${oldMatch} -> ${newCargoVersion}`);
} else {
console.log(` cli/Cargo.toml already up to date`);
}
} else {
console.error(" Could not find version field in cli/Cargo.toml");
process.exit(1);
}
console.log("Version sync complete.");
@@ -1,5 +1,5 @@
--- ---
name: agent-browser name: browsing-web
description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages. description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
--- ---
-81
View File
@@ -111,47 +111,6 @@ interface SnapshotData {
refs?: Record<string, { role: string; name?: string }>; refs?: Record<string, { role: string; name?: string }>;
} }
/**
* Convert Playwright errors to AI-friendly messages
*/
function toAIFriendlyError(error: unknown, selector: string): Error {
const message = error instanceof Error ? error.message : String(error);
// Handle strict mode violation (multiple elements match)
if (message.includes('strict mode violation')) {
// Extract count if available
const countMatch = message.match(/resolved to (\d+) elements/);
const count = countMatch ? countMatch[1] : 'multiple';
return new Error(
`Selector "${selector}" matched ${count} elements. ` +
`Run 'snapshot' to get updated refs, or use a more specific CSS selector.`
);
}
// Handle element not found
if (
message.includes('waiting for') &&
(message.includes('to be visible') || message.includes('Timeout'))
) {
return new Error(
`Element "${selector}" not found or not visible. ` +
`Run 'snapshot' to see current page elements.`
);
}
// Handle element not interactable
if (message.includes('intercepts pointer events') || message.includes('not visible')) {
return new Error(
`Element "${selector}" is not interactable (may be hidden or covered). ` +
`Try scrolling it into view or check if a modal/overlay is blocking it.`
);
}
// Return original error for unknown cases
return error instanceof Error ? error : new Error(message);
}
/** /**
* Execute a command and return a response * Execute a command and return a response
*/ */
@@ -425,15 +384,11 @@ async function handleClick(command: ClickCommand, browser: BrowserManager): Prom
// Support both refs (@e1) and regular selectors // Support both refs (@e1) and regular selectors
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.click({ await locator.click({
button: command.button, button: command.button,
clickCount: command.clickCount, clickCount: command.clickCount,
delay: command.delay, delay: command.delay,
}); });
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { clicked: true }); return successResponse(command.id, { clicked: true });
} }
@@ -441,7 +396,6 @@ async function handleClick(command: ClickCommand, browser: BrowserManager): Prom
async function handleType(command: TypeCommand, browser: BrowserManager): Promise<Response> { async function handleType(command: TypeCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
if (command.clear) { if (command.clear) {
await locator.fill(''); await locator.fill('');
} }
@@ -449,9 +403,6 @@ async function handleType(command: TypeCommand, browser: BrowserManager): Promis
await locator.pressSequentially(command.text, { await locator.pressSequentially(command.text, {
delay: command.delay, delay: command.delay,
}); });
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { typed: true }); return successResponse(command.id, { typed: true });
} }
@@ -605,22 +556,14 @@ async function handleSelect(command: SelectCommand, browser: BrowserManager): Pr
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
const values = Array.isArray(command.values) ? command.values : [command.values]; const values = Array.isArray(command.values) ? command.values : [command.values];
try {
await locator.selectOption(values); await locator.selectOption(values);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { selected: values }); return successResponse(command.id, { selected: values });
} }
async function handleHover(command: HoverCommand, browser: BrowserManager): Promise<Response> { async function handleHover(command: HoverCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.hover(); await locator.hover();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { hovered: true }); return successResponse(command.id, { hovered: true });
} }
@@ -700,42 +643,26 @@ async function handleWindowNew(
async function handleFill(command: FillCommand, browser: BrowserManager): Promise<Response> { async function handleFill(command: FillCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.fill(command.value); await locator.fill(command.value);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { filled: true }); return successResponse(command.id, { filled: true });
} }
async function handleCheck(command: CheckCommand, browser: BrowserManager): Promise<Response> { async function handleCheck(command: CheckCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.check(); await locator.check();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { checked: true }); return successResponse(command.id, { checked: true });
} }
async function handleUncheck(command: UncheckCommand, browser: BrowserManager): Promise<Response> { async function handleUncheck(command: UncheckCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.uncheck(); await locator.uncheck();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { unchecked: true }); return successResponse(command.id, { unchecked: true });
} }
async function handleUpload(command: UploadCommand, browser: BrowserManager): Promise<Response> { async function handleUpload(command: UploadCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
const files = Array.isArray(command.files) ? command.files : [command.files]; const files = Array.isArray(command.files) ? command.files : [command.files];
try {
await locator.setInputFiles(files); await locator.setInputFiles(files);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { uploaded: files }); return successResponse(command.id, { uploaded: files });
} }
@@ -744,21 +671,13 @@ async function handleDoubleClick(
browser: BrowserManager browser: BrowserManager
): Promise<Response> { ): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.dblclick(); await locator.dblclick();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { clicked: true }); return successResponse(command.id, { clicked: true });
} }
async function handleFocus(command: FocusCommand, browser: BrowserManager): Promise<Response> { async function handleFocus(command: FocusCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector); const locator = browser.getLocator(command.selector);
try {
await locator.focus(); await locator.focus();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
return successResponse(command.id, { focused: true }); return successResponse(command.id, { focused: true });
} }
+3 -11
View File
@@ -95,20 +95,12 @@ export class BrowserManager {
const page = this.getPage(); const page = this.getPage();
// Build locator with exact: true to avoid substring matches // Parse the selector and create locator
let locator: Locator;
if (refData.name) { if (refData.name) {
locator = page.getByRole(refData.role as any, { name: refData.name, exact: true }); return page.getByRole(refData.role as any, { name: refData.name });
} else { } else {
locator = page.getByRole(refData.role as any); return page.getByRole(refData.role as any);
} }
// If an nth index is stored (for disambiguation), use it
if (refData.nth !== undefined) {
locator = locator.nth(refData.nth);
}
return locator;
} }
/** /**
+3 -91
View File
@@ -24,8 +24,6 @@ export interface RefMap {
selector: string; selector: string;
role: string; role: string;
name?: string; name?: string;
/** Index for disambiguation when multiple elements have same role+name */
nth?: number;
}; };
} }
@@ -131,7 +129,7 @@ const STRUCTURAL_ROLES = new Set([
function buildSelector(role: string, name?: string): string { function buildSelector(role: string, name?: string): string {
if (name) { if (name) {
const escapedName = name.replace(/"/g, '\\"'); const escapedName = name.replace(/"/g, '\\"');
return `getByRole('${role}', { name: "${escapedName}", exact: true })`; return `getByRole('${role}', { name: "${escapedName}" })`;
} }
return `getByRole('${role}')`; return `getByRole('${role}')`;
} }
@@ -163,60 +161,12 @@ export async function getEnhancedSnapshot(
return { tree: enhancedTree, refs }; return { tree: enhancedTree, refs };
} }
/**
* Track role+name combinations to detect duplicates
*/
interface RoleNameTracker {
counts: Map<string, number>;
/** Maps role+name key to array of ref IDs that use it */
refsByKey: Map<string, string[]>;
getKey(role: string, name?: string): string;
getNextIndex(role: string, name?: string): number;
trackRef(role: string, name: string | undefined, ref: string): void;
/** Get all role+name keys that have duplicates */
getDuplicateKeys(): Set<string>;
}
function createRoleNameTracker(): RoleNameTracker {
const counts = new Map<string, number>();
const refsByKey = new Map<string, string[]>();
return {
counts,
refsByKey,
getKey(role: string, name?: string): string {
return `${role}:${name ?? ''}`;
},
getNextIndex(role: string, name?: string): number {
const key = this.getKey(role, name);
const current = counts.get(key) ?? 0;
counts.set(key, current + 1);
return current;
},
trackRef(role: string, name: string | undefined, ref: string): void {
const key = this.getKey(role, name);
const refs = refsByKey.get(key) ?? [];
refs.push(ref);
refsByKey.set(key, refs);
},
getDuplicateKeys(): Set<string> {
const duplicates = new Set<string>();
for (const [key, refs] of refsByKey) {
if (refs.length > 1) {
duplicates.add(key);
}
}
return duplicates;
},
};
}
/** /**
* Process ARIA snapshot: add refs and apply filters * Process ARIA snapshot: add refs and apply filters
*/ */
function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOptions): string { function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOptions): string {
const lines = ariaTree.split('\n'); const lines = ariaTree.split('\n');
const result: string[] = []; const result: string[] = [];
const tracker = createRoleNameTracker();
// For interactive-only mode, we collect just interactive elements // For interactive-only mode, we collect just interactive elements
if (options.interactive) { if (options.interactive) {
@@ -229,43 +179,31 @@ function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOption
if (INTERACTIVE_ROLES.has(roleLower)) { if (INTERACTIVE_ROLES.has(roleLower)) {
const ref = nextRef(); const ref = nextRef();
const nth = tracker.getNextIndex(roleLower, name);
tracker.trackRef(roleLower, name, ref);
refs[ref] = { refs[ref] = {
selector: buildSelector(roleLower, name), selector: buildSelector(roleLower, name),
role: roleLower, role: roleLower,
name, name,
nth, // Always store nth, we'll use it for duplicates
}; };
let enhanced = `- ${role}`; let enhanced = `- ${role}`;
if (name) enhanced += ` "${name}"`; if (name) enhanced += ` "${name}"`;
enhanced += ` [ref=${ref}]`; enhanced += ` [ref=${ref}]`;
// Only show nth in output if it's > 0 (for readability)
if (nth > 0) enhanced += ` [nth=${nth}]`;
if (suffix && suffix.includes('[')) enhanced += suffix; if (suffix && suffix.includes('[')) enhanced += suffix;
result.push(enhanced); result.push(enhanced);
} }
} }
// Post-process: remove nth from refs that don't have duplicates
removeNthFromNonDuplicates(refs, tracker);
return result.join('\n') || '(no interactive elements)'; return result.join('\n') || '(no interactive elements)';
} }
// Normal processing with depth/compact filters // Normal processing with depth/compact filters
for (const line of lines) { for (const line of lines) {
const processed = processLine(line, refs, options, tracker); const processed = processLine(line, refs, options);
if (processed !== null) { if (processed !== null) {
result.push(processed); result.push(processed);
} }
} }
// Post-process: remove nth from refs that don't have duplicates
removeNthFromNonDuplicates(refs, tracker);
// If compact mode, remove empty structural elements // If compact mode, remove empty structural elements
if (options.compact) { if (options.compact) {
return compactTree(result.join('\n')); return compactTree(result.join('\n'));
@@ -274,22 +212,6 @@ function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOption
return result.join('\n'); return result.join('\n');
} }
/**
* Remove nth from refs that ended up not having duplicates
* This keeps single-element locators simple (no unnecessary .nth(0))
*/
function removeNthFromNonDuplicates(refs: RefMap, tracker: RoleNameTracker): void {
const duplicateKeys = tracker.getDuplicateKeys();
for (const [ref, data] of Object.entries(refs)) {
const key = tracker.getKey(data.role, data.name);
if (!duplicateKeys.has(key)) {
// Not a duplicate, remove nth to keep locator simple
delete refs[ref].nth;
}
}
}
/** /**
* Get indentation level (number of spaces / 2) * Get indentation level (number of spaces / 2)
*/ */
@@ -301,12 +223,7 @@ function getIndentLevel(line: string): number {
/** /**
* Process a single line: add ref if needed, filter if requested * Process a single line: add ref if needed, filter if requested
*/ */
function processLine( function processLine(line: string, refs: RefMap, options: SnapshotOptions): string | null {
line: string,
refs: RefMap,
options: SnapshotOptions,
tracker: RoleNameTracker
): string | null {
const depth = getIndentLevel(line); const depth = getIndentLevel(line);
// Check max depth // Check max depth
@@ -356,22 +273,17 @@ function processLine(
if (shouldHaveRef) { if (shouldHaveRef) {
const ref = nextRef(); const ref = nextRef();
const nth = tracker.getNextIndex(roleLower, name);
tracker.trackRef(roleLower, name, ref);
refs[ref] = { refs[ref] = {
selector: buildSelector(roleLower, name), selector: buildSelector(roleLower, name),
role: roleLower, role: roleLower,
name, name,
nth, // Always store nth, we'll clean up non-duplicates later
}; };
// Build enhanced line with ref // Build enhanced line with ref
let enhanced = `${prefix}${role}`; let enhanced = `${prefix}${role}`;
if (name) enhanced += ` "${name}"`; if (name) enhanced += ` "${name}"`;
enhanced += ` [ref=${ref}]`; enhanced += ` [ref=${ref}]`;
// Only show nth in output if it's > 0 (for readability)
if (nth > 0) enhanced += ` [nth=${nth}]`;
if (suffix) enhanced += suffix; if (suffix) enhanced += suffix;
return enhanced; return enhanced;