Automatización de Navegador con Claude Code: Guía Práctica 2026

esta categoría de herramientas cambia rápido, así que verifica los comandos más recientes con agent-browser skills get core --full y npx …@latest antes de ejecutarlos.

¿Qué es la automatización de navegador con Claude Code?

La automatización de navegador con Claude Code significa dejar que el agente de Claude Code maneje un navegador real (navegar, hacer clic, rellenar formularios, leer el DOM y la consola, tomar capturas, extraer datos) a través de un CLI, un servidor MCP o una extensión — en lugar de que tú hagas clic en todo manualmente. Dicho de forma sencilla, es la IA manejando el navegador: describes lo que quieres en inglés sencillo y Claude Code lo convierte en acciones web y las ejecuta por ti.

¿Por qué quien desarrolla necesita esto? Algunas situaciones reales: ejecutar una prueba E2E en un flujo de inicio de sesión, rellenar y enviar un formulario para comprobar la validación, verificar la UI justo después de construir un componente, o extraer una tabla de datos para contrastarla. Antes escribías scripts de Playwright o Puppeteer a mano; ahora Claude Code puede construir y ejecutar esas acciones por sí mismo, leer los resultados (registros de la consola, estructura del DOM) y corregirse cuando algo se rompe.

Si eres nuevo en estas herramientas, empieza por qué es Claude Code para familiarizarte con las ideas de agentes y permisos — porque la automatización de navegador está directamente ligada a concederle a una IA el derecho de actuar en tu nombre.

4 formas en que Claude Code maneja un navegador (elige la herramienta correcta)

La parte más confusa es que hay cuatro rutas, y la documentación de cada herramienta nunca las compara lado a lado. Aquí tienes un mapa rápido para que elijas bien desde el principio. Tres de las cuatro dependen de MCP (Model Context Protocol) — el protocolo estándar que Claude Code usa para conectarse a herramientas externas.

La ruta 4 es lo bastante profunda como para tener su propia sección — la verás justo debajo.

Para la mayoría de quienes desarrollan, agent-browser es la opción razonable por defecto: es ligero, eficiente en tokens y se ejecuta durante mucho tiempo sin arrastrar todo el stack de Playwright. Las tres secciones siguientes profundizan en su instalación y uso. Puedes añadir Playwright MCP rápidamente con claude mcp add playwright npx @playwright/mcp@latest, y Chrome DevTools MCP con claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest (según los README de microsoft/playwright-mcp y ChromeDevTools/chrome-devtools-mcp, verificados en 08/2026).

Instalar agent-browser para Claude Code

La configuración es rápida. agent-browser es un CLI de código abierto de vercel-labs; los pasos de abajo se verificaron en vivo el 09/08/2026.

# 1. Install the CLI globally
npm install -g agent-browser

# 2. Download the Chromium that agent-browser drives
agent-browser install
# On Linux, if system libraries are missing:
agent-browser install --with-deps

# 3. Confirm the install worked
agent-browser --version

# 4. Load the core workflow set for Claude Code
agent-browser skills get core
# For the full command reference:
agent-browser skills get core --full

El paso 4 carga las descripciones de workflow para que Claude Code sepa cómo llamar a agent-browser en el contexto correcto. Por último, deja que Claude Code ejecute el comando declarando la herramienta permitida Bash(agent-browser:*) en tu configuración de permisos — si no, tendrás que aprobar cada ejecución a mano. Actualiza más adelante con agent-browser upgrade.

Paso a paso: automatización de navegador con Claude Code

Los cuatro pasos de abajo son el bucle de trabajo central. La idea principal: toma un snapshot para obtener la ref @eN de cada elemento y luego actúa a través de esa ref — en lugar de escribir selectores CSS largos y frágiles.

Paso 1 - Abre la página y toma un snapshot

agent-browser open https://example.com
agent-browser snapshot -i

snapshot -i devuelve el árbol de accesibilidad con refs cortas como @e1, @e2, y así sucesivamente para cada elemento interactivo. Como cada snapshot solo tiene ~280 caracteres (frente a 8K+ de Playwright MCP), Claude Code lo lee rápido y gasta pocos tokens — que es justo por lo que el agente puede encadenar muchos pasos seguidos sin ahogar su contexto.

Paso 2 - Hacer clic, rellenar formularios, navegar

# Fill the email field (ref taken from the snapshot)
agent-browser fill @e3 "[email protected]"
# Click the login button
agent-browser click @e7

Actúa siempre usando las refs del snapshot más reciente. Una advertencia honesta: una ref @eN está atada al renderizado actual — si la página cambia de estado (cambia de pestaña, abre un modal, se recarga), toma un snapshot nuevo, porque la ref antigua puede acabar apuntando al elemento equivocado.

Paso 3 - Captura y extracción de datos (scraping)

# Save an image of the current state for a visual check
agent-browser screenshot result.png
# Take a snapshot to extract DOM structure and text
agent-browser snapshot -i

A partir de un snapshot, Claude Code puede leer y resumir el contenido (por ejemplo, una lista de productos o una tabla de precios) en JSON o en una tabla Markdown ahí mismo en la terminal.

Paso 4 - El bucle de autoverificación (construir, verificar, depurar)

Esta es la parte más valiosa, y es la que otras guías mencionan en una sola frase. El flujo: tú construyes en la terminal, Claude Code abre el navegador para verificar el resultado, lee la consola y el DOM y, si algo está mal, se corrige y se ejecuta de nuevo. En concreto:

1. Claude Code edita el código y arranca el servidor de desarrollo.
2. agent-browser open http://localhost:3000 para abrir la UI que acabas de construir.
3. agent-browser snapshot -i para confirmar que aparecieron los elementos esperados; lee la consola para captar errores en tiempo de ejecución.
4. Si algo está fuera de lugar, Claude Code edita el código, recarga la página y repite — hasta que la UI esté correcta.

Este bucle es lo que convierte "la IA escribe código" en "la IA verifica su propio código en un navegador real".

Ejemplo del mundo real: iniciar sesión en un sitio de demostración y verificar la UI

La tarea de demostración: iniciar sesión en un sitio de demo y luego confirmar que el panel muestra el nombre de usuario correcto. Úsalo como una plantilla que puedes escalar hasta pruebas E2E de verdad.

# Plain-English request you send to Claude Code:
# "Open the demo login page, sign in with the test account,
# then check that the dashboard shows the right name."

agent-browser open https://practice.expandtesting.com/login
agent-browser snapshot -i # get refs for the input fields + button
agent-browser fill @e2 "practice"
agent-browser fill @e3 "SuperSecretPassword!"
agent-browser click @e4 # the Login button
agent-browser snapshot -i # confirm you reached the secure page

Una nota honesta sobre la experiencia: los pasos de fill y click suelen ir sin problemas en formularios sencillos. Donde tiende a tropezar es en una ref que queda obsoleta después de que la página cambia — después de que haces clic en Login, la página segura es un DOM nuevo, así que tienes que ejecutar snapshot -i otra vez antes de verificar; no reutilices las refs de la página de inicio de sesión. Para sitios con captcha o autenticación de dos factores, agent-browser por sí solo no basta; ahí es cuando necesitas una sesión con inicio de sesión real (consulta la sección chrome-profile más abajo).

Ejecutar en la nube y en CI/CD (sin navegador local)

Cuando ejecutas dentro de un pipeline de CI o en una máquina sin Chrome, te saltas la instalación de Chromium en local y apuntas agent-browser a un navegador en la nube:

# Browserbase: set the environment variables, then add the provider with -p
export BROWSERBASE_API_KEY=...
export BROWSERBASE_PROJECT_ID=...
agent-browser -p browserbase open https://example.com

Además de Browserbase, agent-browser también admite AWS Bedrock AgentCore y Vercel Sandbox para entornos efímeros. Para observar las sesiones en ejecución (sesiones, registros), agent-browser tiene un panel de observabilidad en el puerto 4848. Esta es la base para llevar las pruebas de navegador a un pipeline automatizado, en lugar de solo ejecutarlas a mano en tu máquina de desarrollo.

agent-browser vs chrome-profile: ¿cuándo necesitas el Chrome real?

La decisión clave es esta: ¿la tarea necesita una sesión con inicio de sesión real y cookies, o no?

En resumen: usa agent-browser por defecto y solo cambia a chrome-profile cuando de verdad tengas que tomar prestada una sesión con inicio de sesión real — porque, como actúa sobre tu cuenta real, el riesgo es mayor.

Depuración en vivo directamente en Chrome: --chrome, /chrome

Esta es la forma nº 4 de la tabla de arriba, lo bastante profunda como para merecer su propia sección. A diferencia de agent-browser, Playwright MCP y Chrome DevTools MCP — que manejan un navegador desechable, controlado por CDP — la integración nativa con Chrome corre dentro de tu Chrome real mediante la extensión "Claude in Chrome", abre pestañas visibles (no headless) y usa tu sesión real con la que iniciaste sesión. No es un producto aparte; es una función nativa de Claude Code que conecta el CLI o VS Code con la extensión.

Inícialo con claude --chrome. La primera vez, un cuadro de diálogo único explica cómo funcionan los permisos por sitio — pulsa Enter para continuar. Para no pasar la bandera en cada sesión, ejecuta /chrome y selecciona "Enabled by default" — la contrapartida es un coste extra de contexto en cada sesión, ya que las herramientas de navegador quedan cargadas, así que actívalo solo si lo usas a menudo. /chrome es también como compruebas el estado de la conexión, gestionas los permisos por sitio, reconectas la extensión o eliges qué navegador usar cuando hay más de uno conectado (la selección de navegador requiere Claude Code v2.1.154+).

Ejemplo de prompt en inglés sencillo (refleja el propio ejemplo de la documentación):

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

La documentación enumera ocho grupos de capacidades; los tres más relevantes para quien desarrolla son:

• Depuración en vivo - leer errores de la consola y el estado del DOM directamente, y luego corregir el código que los causó. Esta es la capacidad más útil para un flujo de programación, y el artículo la ignoraba por completo antes de esta actualización.
• Verificación de diseño - construir una UI a partir de un mock de Figma y luego abrirla en el navegador para comprobar que coincide.
• Apps web autenticadas - trabajar en Gmail, Google Docs, Notion o cualquier app interna donde ya iniciaste sesión, sin ningún conector de API que configurar.
• También se incluye: pruebas de apps web (validación de formularios, regresiones visuales), extracción de datos estructurados, automatización de tareas repetitivas, subida de archivos (límite de 10MB, rechaza archivos con varios enlaces duros, como dentro de node_modules, requiere v2.1.211+) y grabar una sesión como un GIF que se puede compartir.

Seguridad en el modo de plan: en el modo de plan, las llamadas de solo lectura (read_page, get_page_text, find, leer la consola/red, tomar una captura) se ejecutan sin pedir confirmación; las llamadas que cambian el estado (clics, escritura, navegación, gestión de pestañas/ventanas, grabación de GIF) siguen pidiendo aprobación.

Un ejemplo real: "Depurar un formulario de inicio de sesión roto" - abre localhost:3000, pídele a Claude Code que envíe el formulario con datos inválidos, lee lo que aparece en la consola y propón una corrección para el código que causó el problema. Aquí no hace falta ninguna sintaxis especial de CLI — solo una petición en inglés sencillo, con el mismo estilo de los dos prompts de arriba.

El atajo - AgentKit incluye una skill ak-agent-browser

Si prefieres no montar y configurar cada herramienta por tu cuenta, hay un atajo. El paquete AgentKit (Engineer Kit) reúne dos skills relacionadas: ak-agent-browser (que envuelve el CLI agent-browser por debajo) y ak-chrome-profile — escribes una petición en inglés sencillo y se ejecuta, sin memorizar banderas.

Una nota sobre el nombre: "AgentKit" aquí se refiere al kit para Claude Code en agentkit.best, que usa el CLI ak — y no al producto "AgentKit" de OpenAI. Y agent-browser es el CLI de código abierto (vercel-labs) que está por debajo de esta skill.

Esto es un atajo cómodo, no un requisito: puedes perfectamente usar agent-browser gratis exactamente como se muestra en las secciones de arriba.

Errores comunes y cómo solucionarlos

Mantenerte a salvo al dejar que una IA maneje el navegador

Entregarle el control del navegador a una IA abre una superficie de ataque real: inyección de prompt - contenido malicioso en una página web que engaña al agente para que haga algo que tú no pretendías. Según Anthropic, cuando anunció Claude for Chrome, tras añadir defensas la tasa de éxito de los ataques de inyección de prompt bajó de 23,6% a 11,2%, y para una clase de ataques específica del navegador cayó de 35,7% a 0% en su conjunto de desafíos (claude.com/blog/claude-for-chrome, 08/2025).

Principios prácticos para automatizar con seguridad:

• Concede permisos por sitio, no de forma global.
• Exige confirmación antes de acciones de alto riesgo: publicar, enviar correo, compartir datos, pagos.
• Evita dejar que el agente actúe por su cuenta en páginas con datos sensibles o cuentas importantes.
• Prefiere un navegador desechable (agent-browser) para tareas que no necesitan inicio de sesión; usa una sesión real (chrome-profile) solo cuando sea imprescindible.

Con la integración nativa con Chrome, el principio de "conceder permisos por acción" de arriba no es solo un consejo general — el modo de plan impone exactamente ese mecanismo: las llamadas de solo lectura se ejecutan libremente, las llamadas que cambian el estado siempre exigen confirmación (consulta la sección --chrome//chrome de arriba para más detalles).

Preguntas frecuentes (FAQ)

¿Es mejor agent-browser o Playwright MCP?

Depende de lo que necesites. agent-browser es ligero y eficiente en tokens gracias a sus snapshots compactos (~280 caracteres frente a 8K+ de Playwright MCP), lo que va bien con ejecuciones largas y autónomas. Playwright MCP es fuerte si ya conoces el ecosistema Playwright y quieres muchas herramientas listas para usar (red, almacenamiento, PDF). Para la mayoría de quienes desarrollan, agent-browser es la opción sensata por defecto.

¿Necesito saber Playwright?

No. agent-browser no está construido sobre Playwright ni Puppeteer; haces peticiones en inglés sencillo y actúas a través de las refs @eN del snapshot, sin escribir scripts de Playwright a mano.

¿Puede ejecutarse headless / en CI?

Sí. En CI o en una máquina sin navegador local, apunta agent-browser a un navegador en la nube como Browserbase (agent-browser -p browserbase open …), o AWS Bedrock AgentCore, o Vercel Sandbox.

¿Puede automatizar páginas en las que ya iniciaste sesión?

Sí, pero deberías usar chrome-profile para tomar prestada tu sesión real con la que iniciaste sesión y tus cookies. agent-browser ejecuta un navegador desechable por defecto, que es la elección correcta cuando no se necesita ninguna cuenta real.

¿Es seguro dejar que una IA maneje el navegador?

Hay un riesgo de inyección de prompt, pero es manejable: concede permisos por sitio, confirma antes de acciones de alto riesgo y evita las páginas sensibles. Los proveedores también han añadido defensas que reducen mucho las tasas de ataque (consulta la sección de seguridad).

¿AgentKit incluye esta skill?

Sí. El paquete AgentKit (Engineer Kit) incluye las skills ak-agent-browser y ak-chrome-profile, que te permiten saltarte la configuración manual. Es un atajo opcional, no un requisito para usar agent-browser.

¿En qué se diferencia --chrome de "Claude for Chrome" en la tabla comparativa?

Son la misma extensión. --chrome es la bandera que activa la integración desde el CLI (o ejecuta /chrome para habilitarla por defecto); "Claude for Chrome" en la tabla es solo otro nombre para esta misma función cuando nos referimos a la extensión.

¿La integración con Chrome funciona a través de Bedrock o Vertex?

No. Requiere una cuenta Anthropic directa (con inicio de sesión mediante /login) y no está disponible a través de proveedores de terceros como Bedrock, Agent Platform de Google Cloud o Microsoft Foundry. Si tu empresa accede a Claude exclusivamente por uno de estos, necesitas una cuenta claude.ai aparte para la función de Chrome.

Conclusión y próximos pasos

Usa agent-browser por defecto: es ligero, eficiente en tokens y se ejecuta de forma autónoma muy bien para pruebas, rellenar formularios y scraping; cambia a chrome-profile solo cuando necesites una sesión con inicio de sesión real, considera Chrome DevTools MCP cuando necesites medir el rendimiento, y si solo necesitas depuración/verificación en vivo mientras programas, sin headless/CI, --chrome es el atajo más rápido — nada que instalar más allá de la extensión. Para entender la capa de protocolo que hay debajo, sigue leyendo sobre qué es MCP; para construir tus propias herramientas para Claude Code, mira cómo crear un servidor MCP para Claude Code.