Multi-Tab Workflows

Manage multiple browser tabs with tab-new, tab-select, and cross-tab patterns.

Tab Management Commands

Command	Description
bap tab-new [url]	Open a new tab, optionally navigating to a URL
bap tab-select <id>	Switch to a specific tab
bap tab-close [id]	Close a tab (defaults to active tab)
bap tabs	List all open tabs

Basic Multi-Tab Workflow

# Open first tab
bap goto https://docs.example.com

# Open second tab
bap tab-new https://app.example.com

# List tabs to see IDs
bap tabs
# Output:
# page-1: https://docs.example.com (active: false)
# page-2: https://app.example.com (active: true)

# Switch back to first tab
bap tab-select page-1

# Close second tab
bap tab-close page-2

Cross-Tab Data Transfer

A common pattern is extracting data from one tab and using it in another:

# Tab 1: Extract product data
bap goto https://catalog.example.com/product/123
bap extract --fields="name,sku,price"
# Output: { "name": "Widget Pro", "sku": "WP-123", "price": 29.99 }

# Tab 2: Fill order form with extracted data
bap tab-new https://orders.example.com/new
bap act fill:label:"SKU"="WP-123" fill:label:"Product Name"="Widget Pro" fill:label:"Price"="29.99"

TypeScript SDK

// Create pages in different contexts or the same context
const page1 = await client.createPage({ url: "https://docs.example.com" });
const page2 = await client.createPage({ url: "https://app.example.com" });

// List all pages
const pages = await client.listPages();
for (const page of pages) {
  console.log(`${page.pageId}: ${page.url}`);
}

// Switch active page
await client.activatePage(page1.pageId);

// Perform actions on the active page
await client.click(role("button", "Submit"));

// Close a specific page
await client.closePage(page2.pageId);

Tab-Per-Task Pattern

For agents handling multiple concurrent tasks, dedicate a tab to each:

// Research tab
const research = await client.createPage({ url: "https://search.example.com" });
await client.fill(label("Search"), "competitive analysis");
await client.click(role("button", "Search"));
const results = await client.extract({
  instruction: "Extract search results",
  schema: {
    type: "array",
    items: { type: "object", properties: { title: { type: "string" }, url: { type: "string" } } },
  },
  mode: "list",
});

// Report tab
const report = await client.createPage({ url: "https://docs.example.com/new" });
await client.activatePage(report.pageId);
await client.fill(label("Title"), "Competitive Analysis");
// Use extracted data...

// Clean up
await client.closePage(research.pageId);

Isolated Contexts

For tabs that need separate authentication or cookie state, use browser contexts:

// Context 1: Admin user
const adminCtx = await client.createContext({ contextId: "admin" });
await client.createPage({ url: "https://app.example.com", contextId: "admin" });
// Login as admin...

// Context 2: Regular user
const userCtx = await client.createContext({ contextId: "user" });
await client.createPage({ url: "https://app.example.com", contextId: "user" });
// Login as regular user...

// Each context has independent cookies, localStorage, and session state

Pages in different browser contexts are fully isolated — they share no cookies, localStorage, or session data. Pages in the same context share state.