# Pruebas en navegador con agentes de IA y Playwright

URL: https://agentvera.dev/es/blog/ai-agent-browser-testing/ · Publicado: 2026-10-24

Pruebas en navegador con agentes de IA y Playwright MCP: deja que un agente abra tu app web, navegue, lea la consola y arregle lo que falle, todo en Chrome real.

**En resumen:**

- Con Playwright MCP un agente de código puede abrir páginas, hacer clic, escribir, sacar capturas y leer la consola, así que comprueba su propio cambio en un navegador real.
- Puedes añadir Playwright MCP a Claude Code o Codex a mano; AgentVera inicia un Chrome aislado para ello y te deja ver las pestañas en directo.
- El navegador de AgentVera usa su propio perfil, nunca tus cookies ni contraseñas personales, y los errores de consola vuelven a un agente con un clic.

**Las pruebas en navegador con agentes de IA consisten en dejar que un agente de código abra tu app web en un navegador real, navegue por ella y lea la consola, para que compruebe su propio cambio en vez de adivinar.** La forma habitual de darle un navegador a un agente es Playwright MCP, un servidor MCP que convierte las acciones del navegador en herramientas. Puedes añadirlo tú mismo a Claude Code o Codex, o usar AgentVera, que inicia un Chrome aislado para tus agentes y te deja ver cada pestaña en directo.

Esta guía cubre qué puede hacer un agente en un navegador, la configuración manual, el navegador de AgentVera y un flujo de trabajo para probar un cambio de principio a fin.

## Por qué darle un navegador al agente

Sin navegador, un agente que cambia tu interfaz solo puede leer código y esperar lo mejor. No ve que el botón queda tapado por la cabecera, que el formulario lanza un error al enviarse o que aparece un error de consola al cargar. Acabas siendo los ojos del agente: abres la página, describes el problema, pegas el error.

Con un navegador el ciclo se cierra:

1. El agente cambia el código.
2. Abre la página, recorre el flujo y saca una captura.
3. Lee los mensajes de la consola.
4. Arregla lo que encontró y vuelve a comprobar.

Tú sigues revisando el resultado, pero los fallos evidentes se detectan antes de que mires.

## Qué puede hacer el agente con Playwright MCP

Playwright MCP expone el navegador como herramientas. Las más comunes:

| Herramienta | Qué hace el agente con ella |
| --- | --- |
| `browser_navigate` | Abre una URL, como tu servidor de desarrollo |
| `browser_snapshot` | Lee la estructura de la página (el árbol de accesibilidad) para encontrar elementos |
| `browser_click` | Hace clic en un botón, enlace o campo |
| `browser_type` | Escribe en un campo de texto |
| `browser_take_screenshot` | Captura el aspecto de la página |
| `browser_console_messages` | Lee los registros y errores de la consola |

La instantánea es la clave. En lugar de adivinar posiciones en píxeles, el agente lee una vista estructurada de la página y hace clic en los elementos por referencia, lo cual es mucho más fiable.

## Configura Playwright MCP a mano

Para Claude Code, añade el servidor desde tu proyecto:

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

Para Codex, añádelo a `~/.codex/config.toml`:

```toml
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
```

Después inicia tu servidor de desarrollo y pídele algo concreto al agente:

```text
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.
```

Funciona, pero no ves lo que ve el agente salvo que pidas capturas, y según cómo inicies el servidor el navegador puede compartir estado con el que usas a diario. Para lo básico de MCP, consulta [qué es un servidor MCP](/es/blog/what-is-mcp-server/).

## El navegador de AgentVera

[AgentVera](/es/) es una app de escritorio para macOS, Windows y Linux que ejecuta CLI de agentes de código en paralelo. Tiene su propio navegador para agentes, basado en el mismo Playwright MCP.

### Actívalo para un agente

En el diálogo del agente, el campo **Browser** tiene tres opciones:

| Opción | Qué hace |
| --- | --- |
| Off | El agente no usa navegador |
| AgentVera browser | Mediante Playwright MCP; ves las pestañas en directo en la página Browser de la app |
| Claude in Chrome | Solo Claude Code: tu propio Chrome con la extensión de Claude (`--chrome`) |

Elige **AgentVera browser** e inicia el agente. AgentVera ejecuta un Chrome headless aparte con su propio perfil y conecta a él el Playwright MCP del agente. Usa un Chrome, Edge, Brave o Chromium que ya tengas instalado. Tu perfil personal de Chrome, tus cookies y tus contraseñas nunca llegan a este navegador.

La opción está disponible para los agentes que admiten servidores MCP: Claude Code, Codex, Gemini CLI, Copilot y la mayoría de las demás CLI compatibles. Los agentes remotos por SSH no la tienen.

### Mira las pestañas en directo y toma el control

La página Browser de la app muestra las pestañas que el agente abre mientras trabaja. Es una vista de navegador normal, no una grabación: puedes hacer clic y escribir para tomar el control en cualquier momento, por ejemplo para iniciar sesión o cerrar un aviso de cookies, y luego devolvérselo al agente.

La barra de herramientas tiene lo esperable: barra de direcciones, atrás, adelante y recargar, buscar en la página, zoom, marcadores e historial, y **Screenshot**, que guarda en tu carpeta de Descargas. El menú contextual tiene **Inspect** para DevTools, y puedes abrir el navegador en una ventana aparte. La página también muestra el endpoint al que se conectan los agentes.

### Envía los errores de consola de vuelta a un agente

La página Browser tiene un panel de consola para cada pestaña. Dos atajos cierran el ciclo sin copiar y pegar:

- **Fix errors** envía los últimos errores de consola a un agente con la instrucción de arreglarlos.
- Cada línea tiene **Fix** y **Send to agent**, para que elijas un solo error.

Es el mismo flujo de enviar al agente que usa el resto de la app; consulta [enviar al agente](/es/features/send-to-agent/).

### Abre tu servidor de desarrollo en él

Cuando un agente inicia un servidor de desarrollo, el puerto aparece en la pestaña Ports del panel derecho con **Open in the AgentVera browser** y **Open in the system browser**. Los enlaces que imprimen los agentes también se abren en el navegador integrado; mantén ⌥ pulsado al hacer clic para usar tu navegador del sistema.

El navegador de AgentVera forma parte del plan gratuito.

## Un flujo de trabajo para probar un cambio de principio a fin

Esta configuración funciona bien para un cambio de interfaz:

1. Crea el agente con **AgentVera browser** activado, idealmente en su propio git worktree.
2. Pide el cambio y la comprobación a la vez, por ejemplo: «Añade una indicación de seguridad de la contraseña al formulario de registro. Después abre la página de registro, prueba una contraseña débil y una fuerte, saca una captura de cada una y revisa la consola.»
3. Mira la página Browser mientras trabaja. Si se atasca en un inicio de sesión, toma el control, inicia sesión y dile al agente que continúe.
4. Si la consola muestra errores, pulsa **Fix errors**.
5. Cuando el flujo funcione, pide al agente que lo deje escrito como un archivo de test de Playwright, para que la comprobación se ejecute en CI a partir de ahora.
6. Revisa el diff y las capturas antes de hacer merge.

El paso 5 es importante. Navegar mediante MCP es ideal para encontrar y verificar problemas, pero no es una suite de tests. Un archivo de test normal es lo que mantiene el flujo funcionando el mes que viene.

### Prompts que funcionan bien

- «Abre la página, haz una instantánea y enumera todos los botones que no hacen nada al pulsarlos.»
- «Cambia el tamaño a ancho de móvil, saca una captura y arregla lo que se desborde.»
- «Recorre el pago con la tarjeta de prueba y luego informa de cada error de consola y petición fallida que hayas visto.»

Sé específico con la URL y con lo que significa el éxito. «Prueba la app» deja demasiado margen al agente; «regístrate y luego confirma que el panel muestra el nombre del nuevo usuario» le da un objetivo que puede comprobar.

## Cosas que conviene tener en cuenta

- **El agente puede hacer clic en cualquier cosa.** Apúntalo a un entorno local o de staging, no a producción con datos reales.
- **Inicios de sesión.** El navegador de AgentVera tiene su propio perfil, así que inicias sesión allí una sola vez. Usa cuentas de prueba.
- **Las capturas consumen contexto.** Pídelas cuando ayuden, no en cada paso.
- **Elige la opción de navegador adecuada.** Claude in Chrome usa tu Chrome real y sus sesiones; el navegador de AgentVera las mantiene separadas.

Si estás creando un sitio desde cero con un agente, [crear un sitio web con IA](/es/blog/build-website-with-ai/) muestra todo el flujo, y [cómo hacer vibe coding](/es/blog/how-to-vibe-code/) recoge los hábitos que lo mantienen encauzado.

[Descarga AgentVera](/es/download/) para darle a tus agentes un navegador que puedas ver, o lee más en la página del [navegador para agentes](/es/features/agent-browser/).

## Preguntas frecuentes

**¿Cómo usa un agente de IA un navegador?** A través de un servidor MCP como Playwright MCP. El servidor expone las acciones del navegador como herramientas, por ejemplo navegar, hacer clic, escribir, sacar una captura y leer los mensajes de la consola, y el agente las llama como cualquier otra herramienta.

**¿Es lo mismo que escribir tests de Playwright?** No. Con Playwright MCP el agente maneja el navegador en vivo, igual que tú comprobarías un cambio a mano. Sirve para explorar y verificar. Para comprobaciones que se ejecutan en cada commit, pide al agente que convierta lo que encontró en archivos de test de Playwright normales.

**¿El navegador de AgentVera ve los datos de mi Chrome personal?** No. AgentVera ejecuta un Chrome aparte con su propio perfil. Tu perfil personal de Chrome, tus cookies y tus contraseñas nunca llegan a él.

**¿Qué agentes pueden usar el navegador de AgentVera?** Los agentes que admiten servidores MCP, entre ellos Claude Code, Codex, Gemini CLI, Copilot y la mayoría de las demás CLI compatibles. Aider no admite MCP. Los agentes remotos por SSH no tienen esta opción.

**¿Qué navegador necesita AgentVera?** Un Chrome, Edge, Brave o Chromium instalado. AgentVera lo inicia con su propio perfil y conecta Playwright MCP a él, así que no tienes que instalar un navegador aparte para el agente.

---

**Sobre AgentVera.** AgentVera es una app de escritorio para macOS, Windows y Linux, desarrollada por Solviera Teknoloji. Ejecuta 18 agentes de programación con IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) en paralelo, por proyecto, en terminales reales con las instalaciones y sesiones de CLI del propio usuario. El plan gratuito tiene agentes ilimitados. Descargar: https://agentvera.dev/es/download/ · Precios: https://agentvera.dev/es/pricing/