​
Auto-Detection Mode

Auto-Detection mode is a powerful feature of Auto-Browse that automatically manages page contexts and browser state, making it easier to write and maintain automation scripts.

​
Overview

When using Auto-Browse, you don’t need to explicitly manage page contexts. The library will:

  • Detect the current page context automatically
  • Create new browser instances when needed
  • Handle page lifecycle management
  • Clean up resources properly

​
Basic Usage

The simplest way to use Auto-Browse is to let it handle context management:

import { auto } from "auto-browse";

async function example() {
	// Auto-Browse will create and manage the browser/page
	await auto("go to https://example.com");
	await auto("take a snapshot");
	await auto("click the login button");
}

​
How It Works

  1. Browser Management

    • Creates browser instance when needed
    • Reuses existing browser when possible
    • Handles cleanup automatically

  2. Page Context

    • Detects active page context
    • Creates new pages when required
    • Manages multiple pages efficiently

  3. State Management

    • Tracks page state automatically
    • Handles navigation events
    • Maintains context between commands

​
Integration Modes

​
1. Standalone Mode

import { auto } from "auto-browse";

async function standalone() {
	// Auto-Browse manages everything
	await auto("go to https://example.com");
	await auto("click Sign Up");
	await auto('type "user@example.com" in email field');
}

​
2. Playwright Integration

import { test } from "@playwright/test";
import { auto } from "auto-browse";

test("with playwright", async ({ page }) => {
	// Auto-Browse detects Playwright's page context
	await page.goto("https://example.com");
	await auto("click the login button");
	await auto('type "password123" in password field');
});

​
Advanced Features

​
Multi-Page Handling

Auto-Browse can handle multiple pages intelligently:

import { auto } from "auto-browse";

async function multiPage() {
	// Open first page
	await auto("go to https://example.com");

	// Open new tab
	await auto("click open in new tab");

	// Auto-Browse switches to new page automatically
	await auto("verify new page is loaded");

	// Switch back to original page
	await auto("switch to first tab");
}

​
Window Management

Handles different window scenarios:

import { auto } from "auto-browse";

async function windowManagement() {
	await auto("go to https://example.com");

	// Handle popups
	await auto("click button that opens popup");
	await auto("switch to popup window");
	await auto("verify popup content");
	await auto("close popup");

	// Back to main window automatically
	await auto("verify main window is active");
}

​
Best Practices

  1. Let Auto-Browse Handle Context
// Good - Auto-Browse manages context
await auto("perform action");

// Unnecessary - don't create context manually
const browser = await chromium.launch();
const page = await browser.newPage();
await auto("perform action", { page });
  1. Trust the State Management
// Good - state is managed automatically
await auto("click login");
await auto("verify dashboard");

// Unnecessary - don't force waits
await auto("click login");
await page.waitForTimeout(1000); // Not needed
await auto("verify dashboard");
  1. Clean Error Handling
try {
	await auto("perform complex action");
} catch (error) {
	// Auto-Browse will clean up resources
	console.error("Action failed:", error);
}
// No need to manually close browser/pages

​
Common Scenarios

​
1. Form Interactions

async function formExample() {
	await auto("go to form page");
	await auto('fill "John Doe" in name field'); // Automatic context
	await auto('select "Option 1" from dropdown'); // Maintains state
	await auto("submit form"); // Handles navigation
}

​
2. Multi-Step Workflows

async function workflowExample() {
	await auto("start at homepage");
	await auto("add item to cart");
	await auto("go to checkout"); // Handles page changes
	await auto("complete payment form");
	await auto("confirm order"); // Manages async operations
}

​
3. Dynamic Content

async function dynamicExample() {
	await auto("go to dynamic page");
	await auto("click load more button");
	await auto("verify new content loaded"); // Waits automatically
	await auto("scroll to bottom");
	await auto("verify infinite scroll worked");
}

​
Troubleshooting

Common issues and solutions:

  1. Page Context Issues
// If page context is lost
await auto("take a snapshot"); // Forces context refresh
await auto("continue actions");
  1. State Synchronization
// If state seems out of sync
await auto("verify current state"); // Resets internal state
await auto("proceed with action");

​
Next Steps