BAP vs Chrome DevTools Protocol

BAP wraps CDP with agent-ready semantics. When to use raw CDP vs the BAP abstraction.

Overview

Chrome DevTools Protocol (CDP) is the raw browser debugging protocol built into Chrome and Chromium-based browsers. BAP sits above CDP, using Playwright as an intermediary, and adds agent-oriented abstractions.

AI Agent
  |
  v
BAP (semantic selectors, observe, act, extract, fusion)
  |
  v
Playwright (cross-browser abstraction)
  |
  v
CDP / Browser-specific protocol
  |
  v
Chrome / Firefox / WebKit

Comparison

Dimension	BAP	Chrome DevTools / CDP
Level	Agent-ready workflow layer	Raw browser debugging protocol
Selectors	10 semantic types (role, text, label, ref, testId, …)	Manual DOM queries, Runtime.evaluate
Multi-step actions	act batches steps with retry and conditions	Compose sequences yourself
Observation	Structured elements with refs, action hints, bounds	Roll your own from Accessibility + DOM domains
Extraction	extract with JSON Schema	Custom Runtime.evaluate scripts
Token efficiency	Response tiers, fusion, incremental observe	Depends on your orchestration
Browser support	Chromium, Firefox, WebKit	Chromium only
Session management	Built-in persistence, dormant sessions	Manual
Error recovery	Recovery hints, self-healing selectors	Raw protocol errors

When to Use CDP

Use CDP when you need

• Direct access to CDP domains (Performance, Profiler, Memory, Network conditions) - Custom debugging and profiling instrumentation - Low-level network interception with full headers - Service Worker and Cache API inspection - Chrome-specific features not exposed by Playwright

Use BAP when you need

• AI agent browser automation - Semantic element targeting that survives redesigns - Multi-step workflows with error recovery - Structured data extraction without writing JS - Cross-browser support (Chromium + Firefox + WebKit) - Token-efficient agent communication

BAP + CDP Together

BAP supports connecting to a browser via CDP for hybrid workflows:

// Launch Chrome with remote debugging
// Then connect BAP to it
await client.launch({
  cdpUrl: "ws://localhost:9222",
});

// Use BAP's high-level API
await client.navigate("https://example.com");
const obs = await client.observe();

// BAP handles the CDP complexity underneath

You can also use Chrome DevTools alongside BAP for debugging:

1. Launch Chrome with --remote-debugging-port=9222
2. Open chrome://inspect for live DevTools access
3. Connect BAP with --connect=ws://localhost:9222
4. Debug with DevTools while BAP automates

See the CDP Attach guide for detailed setup instructions.

CDP Complexity BAP Handles For You

What you would need to implement yourself with raw CDP:

Capability	CDP Implementation	BAP Equivalent
Click a button by label	DOM.querySelector + Runtime.evaluate to find by text + Input.dispatchMouseEvent	client.click(label("Submit"))
Fill a form	Multiple DOM.focus + Input.insertText calls per field	client.act([step("action/fill", ...), ...])
Get interactive elements	Accessibility.getFullAXTree + manual filtering + ref tracking	client.observe()
Extract structured data	Runtime.evaluate with custom extraction JS	client.extract({ schema })
Handle navigation	Page.navigate + Page.loadEventFired + error handling	client.navigate(url)
Cross-browser	Not possible (CDP is Chrome-only)	Built-in via Playwright