Herramientas del Navegador

El crate adk-browser proporciona 46 herramientas completas de automatización de navegador que permiten a los AI agents interactuar con páginas web. Construido sobre el WebDriver protocol (Selenium), funciona con cualquier navegador compatible con WebDriver.

Visión General

Las herramientas del navegador permiten a los agents:

  • Navegar por páginas web y gestionar el historial del navegador
  • Extraer texto, enlaces, imágenes y datos estructurados
  • Rellenar formularios e interactuar con elementos de la página
  • Tomar capturas de pantalla y generar PDFs
  • Ejecutar JavaScript para automatización avanzada
  • Gestionar cookies, frames y múltiples ventanas

Inicio Rápido

Añada a su Cargo.toml:

[dependencies]
adk-browser = "0.2.0"
adk-agent = "0.2.0"
adk-model = "0.2.0"

Prerrequisitos

Inicie un servidor WebDriver:

# Usando Docker (recomendado)
docker run -d -p 4444:4444 -p 7900:7900 --shm-size=2g selenium/standalone-chrome:latest

# O use ChromeDriver directamente
chromedriver --port=4444

Uso Básico

use adk_browser::{BrowserSession, BrowserToolset, BrowserConfig};
use adk_agent::LlmAgentBuilder;
use adk_model::GeminiModel;
use std::sync::Arc;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Configurar la sesión del navegador
    let config = BrowserConfig::new()
        .webdriver_url("http://localhost:4444")
        .headless(true)
        .viewport(1920, 1080);

    // Crear e iniciar la sesión del navegador
    let browser = Arc::new(BrowserSession::new(config));
    browser.start().await?;

    // Crear conjunto de herramientas con las 46 herramientas
    let toolset = BrowserToolset::new(browser.clone());
    let tools = toolset.all_tools();

    // Crear agente de IA con herramientas de navegador
    let api_key = std::env::var("GOOGLE_API_KEY")?;
    let model = Arc::new(GeminiModel::new(&api_key, "gemini-2.0-flash")?);

    let mut builder = LlmAgentBuilder::new("web_agent")
        .model(model)
        .instruction("You are a web automation assistant. Use browser tools to help users.");

    for tool in tools {
        builder = builder.tool(tool);
    }

    let agent = builder.build()?;

    // Limpiar al terminar
    browser.stop().await?;

    Ok(())
}

Herramientas Filtradas

Seleccione solo las herramientas que su agent necesita:

let toolset = BrowserToolset::new(browser)
    .with_navigation(true)   // navegar, atrás, adelante, actualizar
    .with_extraction(true)   // extraer_texto, extraer_atributo, extraer_enlaces, información_página, código_fuente_página
    .with_interaction(true)  // clic, doble_clic, escribir, borrar, seleccionar
    .with_wait(true)         // esperar_elemento, esperar, esperar_carga_página, esperar_texto
    .with_screenshot(true)   // captura_pantalla
    .with_js(true)           // evaluar_js, desplazar, pasar_ratón, manejar_alerta
    .with_cookies(false)     // Deshabilitar herramientas de cookies
    .with_frames(false)      // Deshabilitar herramientas de frames
    .with_windows(false)     // Deshabilitar herramientas de ventanas
    .with_actions(false);    // Deshabilitar acciones avanzadas

let tools = toolset.all_tools();

Herramientas Disponibles (46 en Total)

ToolDescripción
browser_navigateNavegar a una URL
browser_backRetroceder en el historial
browser_forwardAvanzar en el historial
browser_refreshRecargar página actual

Extracción (5 herramientas)

ToolDescripción
browser_extract_textExtraer texto visible de un elemento
browser_extract_attributeObtener valor de atributo de un elemento
browser_extract_linksExtraer todos los enlaces de la página
browser_page_infoObtener URL y título actuales
browser_page_sourceObtener código fuente HTML

Interacción (5 herramientas)

ToolDescripción
browser_clickHacer clic en un elemento
browser_double_clickHacer doble clic en un elemento
browser_typeEscribir texto en un elemento
browser_clearBorrar un campo de entrada
browser_selectSeleccionar opción de menú desplegable

Espera (4 herramientas)

ToolDescripción
browser_wait_for_elementEsperar a que aparezca un elemento
browser_waitEsperar una duración
browser_wait_for_page_loadEsperar a que la página cargue
browser_wait_for_textEsperar a que aparezca un texto

Capturas de Pantalla (1 herramienta)

ToolDescripción
browser_screenshotCapturar captura de pantalla de la página o de un elemento

JavaScript (4 herramientas)

ToolDescripción
browser_evaluate_jsEjecutar código JavaScript
browser_scrollDesplazarse por la página
browser_hoverPasar el ratón por encima de un elemento
browser_handle_alertManejar alertas de JavaScript

Cookies (5 herramientas)

ToolDescripción
browser_get_cookiesObtener todas las cookies
browser_get_cookieObtener una cookie específica
browser_add_cookieAñadir una cookie
browser_delete_cookieEliminar una cookie
browser_delete_all_cookiesEliminar todas las cookies

Ventanas/Pestañas (8 herramientas)

ToolDescripción
browser_list_windowsListar todas las ventanas/pestañas
browser_new_tabAbrir nueva pestaña
browser_new_windowAbrir nueva ventana
browser_switch_windowCambiar a ventana
browser_close_windowCerrar ventana actual
browser_maximize_windowMaximizar ventana
browser_minimize_windowMinimizar ventana
browser_set_window_sizeEstablecer tamaño de ventana

Marcos (3 herramientas)

ToolDescripción
browser_switch_to_frameCambiar a iframe
browser_switch_to_parent_frameCambiar a marco padre
browser_switch_to_default_contentCambiar al documento principal

Acciones (7 herramientas)

ToolDescripción
browser_drag_and_dropArrastrar y soltar elementos
browser_right_clickHacer clic derecho en un elemento
browser_focusEnfocar un elemento
browser_element_stateObtener estado del elemento (visible, habilitado, seleccionado)
browser_press_keyPulsar tecla del teclado
browser_file_uploadSubir archivo a entrada
browser_print_to_pdfGenerar PDF desde la página

Selectores de Elementos

Las herramientas que se dirigen a elementos aceptan selectores CSS:

// By ID
"#login-button"

// By class
".submit-btn"

// By tag and attribute
"input[type='email']"

// By data attribute
"[data-testid='search']"

// Complex selectors
"form.login input[name='password']"

// Nth child
"ul.menu li:nth-child(3)"

Ejemplo: Agente de Investigación Web

use adk_browser::{BrowserSession, BrowserToolset, BrowserConfig};
use adk_agent::LlmAgentBuilder;
use std::sync::Arc;

let config = BrowserConfig::new().webdriver_url("http://localhost:4444");
let browser = Arc::new(BrowserSession::new(config));
browser.start().await?;

let toolset = BrowserToolset::new(browser.clone())
    .with_navigation(true)
    .with_extraction(true)
    .with_screenshot(true);

let mut builder = LlmAgentBuilder::new("researcher")
    .model(model)
    .instruction(r#"
        You are a web research assistant. When asked about a topic:
        1. Navigate to relevant websites using browser_navigate
        2. Extract key information using browser_extract_text
        3. Take screenshots of important content using browser_screenshot
        4. Summarize your findings
    "#);

for tool in toolset.all_tools() {
    builder = builder.tool(tool);
}

let agent = builder.build()?;

Ejemplo: Automatización de Formularios

let agent = LlmAgentBuilder::new("form_filler")
    .model(model)
    .instruction(r#"
        You are a form automation assistant. To fill forms:
        1. Use browser_navigate to go to the form page
        2. Use browser_extract_text to see form labels
        3. Use browser_type to fill text fields
        4. Use browser_select for dropdowns
        5. Use browser_click to submit
    "#)
    .build()?;

Configuración

let config = BrowserConfig::new()
    .webdriver_url("http://localhost:4444")
    .headless(true)
    .viewport(1920, 1080)
    .page_load_timeout(30)
    .user_agent("Custom User Agent");

let browser = Arc::new(BrowserSession::new(config));
browser.start().await?;

Opciones de WebDriver

Funciona con cualquier servidor compatible con WebDriver:

ServidorComando
Selenium (Chrome)docker run -d -p 4444:4444 selenium/standalone-chrome
Selenium (Firefox)docker run -d -p 4444:4444 selenium/standalone-firefox
ChromeDriverchromedriver --port=4444
GeckoDrivergeckodriver --port=4444

Manejo de Errores

Las herramientas de navegador devuelven errores estructurados:

match result {
    Ok(value) => println!("Success: {:?}", value),
    Err(e) => {
        match e {
            BrowserError::ElementNotFound(selector) => {
                println!("Could not find element: {}", selector);
            }
            BrowserError::Timeout(duration) => {
                println!("Operation timed out after {:?}", duration);
            }
            BrowserError::SessionClosed => {
                println!("Browser session was closed");
            }
            _ => println!("Browser error: {}", e),
        }
    }
}

Ejemplos

# Basic browser session
cargo run --example browser_basic

# AI agent with browser tools
cargo run --example browser_agent

# Full 46-tool interactive example
cargo run --example browser_interactive

# OpenAI-powered browser agent
cargo run --example browser_openai --features openai

Mejores Prácticas

  1. Usar Esperas: Siempre use las herramientas browser_wait_* antes de interactuar con contenido dinámico
  2. Minimizar Capturas de Pantalla: Las capturas de pantalla son costosas; úselas estratégicamente
  3. Cerrar Sesiones: Siempre cierre las sesiones de navegador cuando haya terminado
  4. Manejar Errores: La automatización del navegador puede fallar; maneje los tiempos de espera con gracia
  5. Filtrar Herramientas: Entregue a los Agent solo las Tool que necesitan para reducir la complejidad

Anterior: ← Built-in Tools | Siguiente: UI Tools →