Automatiza las pruebas de IU con Gemini CLI, BrowserMCP y Playwright

1. Introducción

Probar aplicaciones web puede ser una tarea tediosa. Las pruebas de IU tradicionales a menudo se sienten como una batalla constante contra la fragilidad. Te encuentras escribiendo secuencias de comandos complejas, administrando selectores de CSS y XPath frágiles, y haciendo malabares solo para verificar un flujo de usuarios simple.

¿Qué pasaría si pudieras decirle a un agente qué probar en lenguaje natural y este simplemente lo hiciera?

En este codelab, exploraremos cómo usar Gemini CLI y herramientas multimodales como BrowserMCP. Verás cómo crear y ejecutar pruebas de IU automatizadas con lenguaje natural. Ten en cuenta que este codelab no requiere conocimientos previos sobre herramientas y frameworks de pruebas de IU.

Qué aprenderá

Qué es el Protocolo de contexto del modelo (MCP) y por qué representa un gran cambio.
Cómo BrowserMCP permite que los agentes de IA controlen los navegadores web
Cómo ejecutar pruebas automatizadas de la IU desde Gemini CLI
Comprender las habilidades de los agentes y sus ventajas
Enseñarle a un agente a usar Playwright con una habilidad
Un vistazo rápido al subagente del navegador Antigravity.
Otros casos de uso para el control del navegador

Actividades

Configura tu entorno de desarrollo.
Explorar una aplicación de demostración que necesita pruebas
Usa Gemini CLI para interactuar con la aplicación a través de BrowserMCP.
Enséñale a tu agente a usar Playwright con una habilidad de agente.

2. Requisitos previos

Antes de comenzar con lo más interesante, asegúrate de tener todo lo que necesitas.

En este codelab, se usan la Gemini CLI, las herramientas de MCP, las habilidades del agente y una aplicación de demostración de React.

Herramientas

En este lab, se da por sentado que ya tienes lo siguiente:

Navegador Chrome
Gemini CLI (que depende de nodejs)
Git

En las instrucciones, se supone que trabajas en un entorno de Linux (o WSL) o macOS. Si usas Windows (como yo), puedes seguir los pasos con WSL.

(Ten en cuenta que

BrowserMCP no funcionará desde Google Cloud Shell

, ya que solo se conectará a un navegador local que se ejecute en la misma máquina)

Crea un proyecto de Google Cloud

Si ya tienes una clave de la API de Gemini, puedes usarla y omitir este paso.

De lo contrario, necesitarás un proyecto de Google Cloud para continuar. No implementaremos ningún servicio de Google Cloud, pero necesitas el proyecto para asociar una clave de la API de Gemini. (Necesitas la clave para usar Gemini).

Si conoces Google Cloud, puedes crear un proyecto nuevo aquí. Como alternativa, puedes crear un proyecto de Google Cloud directamente desde Google AI Studio.

Crea una clave de API de Gemini gratis

Ahora crearás tu clave de API de Gemini en Google AI Studio. Haz clic en "Obtener clave de API".

Verás algo como esto:

Aquí se mostrarán las llaves existentes, si tienes alguna. O bien, para crear una clave nueva, haz clic en “Crear clave de API”.

Aquí puedes seleccionar un proyecto de Google Cloud existente o crear uno nuevo. Aquí creé un proyecto nuevo llamado agentic-ui-demo:

En este punto, tenemos un proyecto y la clave de API de Gemini asociada. No habilitamos la facturación, por lo que estamos limitados a la generosa cuota gratuita. Sin embargo, si quieres obtener más cuota, puedes habilitar la facturación haciendo clic en "Configurar la facturación".

Configura el entorno de desarrollo

Creé un repo de demostración en GitHub. Incluye una aplicación de ejemplo que podemos usar para nuestras pruebas de IU. Para clonarlo, ejecuta este comando desde tu terminal local:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

A continuación, haz una copia del archivo .env.template de muestra, llamado .env. Puedes hacerlo en tu editor o simplemente ejecutar este comando:

cp .env.template .env

Actualiza este archivo .env con tu propia clave de API. (Recuerda que nunca debes confirmar tu archivo .env con información como tu clave de API). La forma más sencilla de hacerlo es abrirlo en el editor.

Ahora carguemos la variable de entorno:

source .env

Creé un archivo Makefile para que te resulte más fácil configurar el entorno para iniciar la app de demostración. Ejecutémoslo para inicializar nuestro entorno:

make install

3. Nuestra aplicación de demostración

La app que probaremos hoy es The Dazbo Omni-Dash, un panel futurista con tema oscuro para administrar la telemetría de seguridad. (Sí, se hizo con vibe coding).

¿Por qué esta app?

Se creó para proporcionar una superficie de prueba realista con las siguientes características:

Autenticación simulada: Es un flujo de acceso que requiere credenciales específicas.
Contenido dinámico: Tarjetas de telemetría y registros de seguridad que simulan datos en tiempo real.
Estados interactivos: Menús de navegación y entradas de formularios que cambian según la acción del usuario.
Tecnología moderna: Se creó con React y Vite para brindar una experiencia rápida y responsiva.

Cómo iniciar la app

Para iniciar la aplicación, simplemente ejecuta el siguiente comando:

make dev

El servidor de desarrollo debería iniciarse muy rápido, y la app estará disponible en http://localhost:5173.

Podemos hacer clic en el vínculo para abrir la aplicación en nuestro navegador. Simplemente deja este proceso ejecutándose en tu terminal. Ejecutaremos los siguientes comandos de terminal en una sesión de terminal independiente.

4. El desafío de las pruebas de IU

Las pruebas de IU tradicionales son notoriamente difíciles de realizar correctamente y aún más difíciles de mantener. Estos son algunos de los problemas habituales:

Pruebas "inestables": Son pruebas que se aprueban en un minuto y fallan en el siguiente debido a problemas de sincronización, condiciones de carrera o recursos de carga lenta.
Selectores frágiles: Se basan en estructuras DOM específicas (como div > div > button) que se rompen con el más mínimo ajuste de la IU, lo que genera un mantenimiento constante de la secuencia de comandos.
Curva de aprendizaje pronunciada: Requiere que los desarrolladores dominen lenguajes específicos del dominio complejos y peculiaridades específicas del framework (Cypress, Selenium, Playwright) solo para automatizar un clic básico.
Paridad del entorno: Lucha con estados de aplicación difíciles de replicar y la sobrecarga de limpiar los datos de prueba.

Necesitamos una forma de realizar pruebas que se centre en la intención en lugar de la implementación.

5. MCP al rescate

El Protocolo de contexto del modelo (MCP) es un estándar abierto que permite que los modelos y agentes de IA interactúen con herramientas, APIs y datos externos. Piensa en él como el adaptador universal que permite que los modelos y los agentes encuentren y ejecuten las herramientas a las que tienen acceso.

Tradicionalmente, la integración de modelos de lenguaje grandes (LLM) con datos y herramientas externos requería que los desarrolladores escribieran conexiones de API personalizadas y codificadas de forma rígida para cada nueva fuente de datos, lo que generaba un problema de integración "M x N" insostenible en el que cada nuevo modelo y herramienta multiplicaba la carga de mantenimiento. El Protocolo de contexto del modelo (MCP) resuelve este problema, ya que elimina la necesidad de escribir código específico para coordinar estas capacidades. En lugar de codificar de forma explícita flujos de trabajo de ejecución complejos, los desarrolladores pueden confiar en el LLM para interpretar las solicitudes de lenguaje natural de un usuario y razonar de forma dinámica sobre qué herramientas usar sobre la marcha.

Cuando un usuario emite un comando en lenguaje natural (como "Navega a localhost:5173, accede como "admin" y haz clic en el botón Enviar"), el LLM descubre las capacidades disponibles y genera una solicitud estructurada para invocar una herramienta específica. El cliente de MCP actúa como traductor y enruta esta solicitud al servidor de MCP designado, que ejecuta la acción o recupera los datos y devuelve el contexto al modelo. Esto permite que la IA actúe de forma autónoma sin que el desarrollador tenga que codificar de forma rígida la ruta de ejecución específica.

Dado que MCP crea un estándar universal, a menudo descrito como el "USB-C para aplicaciones de IA", desbloquea una reutilización masiva lista para usar. Los desarrolladores pueden compilar un servidor de MCP una vez, y cualquier host de IA compatible con MCP puede conectarse a él de inmediato, lo que elimina el problema de integración de M x N. Ya no tienes que compilar puentes de API personalizados para cada plataforma. En cambio, puedes aprovechar el ecosistema de servidores de MCP de código abierto y compilados previamente para servicios comunes, como GitHub, Slack, bases de datos, etc., y conectarlos directamente a tus flujos de trabajo basados en agentes. Esta arquitectura modular y plug-and-play garantiza que, si cambias de proveedor de LLM o actualizas tus herramientas más adelante, tu infraestructura de integración principal permanecerá completamente sin cambios.

6. Automatización con BrowserMCP

¿Qué es BrowserMCP?

Esta es la primera herramienta con la que jugaremos hoy. BrowserMCP es un servidor de MCP que les da a los agentes de IA los "ojos" y las "manos" que necesitan para interactuar con un navegador web. En pocas palabras, imita la interacción humana con un navegador. Es de código abierto y puedes consultar el repo de GitHub aquí. Consulta la documentación principal de BrowserMCP aquí.

Estas son algunas de sus capacidades:

Puede navegar a URLs.
Puede inspeccionar el DOM.
Puede hacer clic en botones y escribir texto en formularios.
Se puede arrastrar y soltar.
Puede leer los registros de la consola del navegador.
Es rápido: La automatización se realiza de forma local en tu máquina.

Instalación de Browser MCP

Para usar BrowserMCP, debes hacer dos cosas:

Instala la extensión BrowserMCP en Chrome (o en cualquier navegador basado en Chromium).
Configura el servidor de MCP para tu agente.

Para instalar la extensión, solo sigue las instrucciones que se indican aquí. Este proceso solo tarda unos segundos. Una vez que se instale, haz clic en "Conectar" en la extensión para permitir que tu agente controle la pestaña actual. (Obviamente, quieres que la pestaña actual sea en la que se ejecuta la aplicación de demostración).

A continuación, debemos agregar la configuración de MCP a nuestro cliente:

 "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }

¿Dónde se configura? Bueno, eso depende de tu agente. Por ejemplo, en Gemini CLI: ~/.gemini/settings.json. Tendrá un aspecto similar a este:

Pruebas con BrowserMCP

Ahora viene la magia. Primero, inicia Gemini CLI (ejecutando gemini) en una nueva sesión de terminal. (Recuerda que la aplicación de demostración se está ejecutando en nuestra sesión de terminal inicial). Dentro de Gemini CLI, ejecuta /mcp para verificar que se haya instalado correctamente. Deberías ver una lista de herramientas, como la siguiente:

Si no iniciaste la aplicación de demostración antes, hazlo ahora:

make dev

Debemos abrir la app en nuestro navegador Chrome y conectar la extensión BrowserMCP en esa pestaña. Sigue el vínculo del comando run. Luego, haz clic en el ícono de la extensión BrowserMCP y, luego, en "Conectar".

Ahora podemos usar Gemini CLI para ejecutar una prueba. Copia y pega esta instrucción en tu Gemini CLI:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Es posible que Gemini CLI primero verifique que la aplicación de demostración se esté ejecutando en el puerto especificado. Luego, se te pedirá que confirmes las acciones de la herramienta que planea realizar:

Permite que Gemini CLI ejecute todas las herramientas de BrowserMCP para esta sesión. Luego, vuelve al navegador y observa cómo se producen las interacciones automatizadas.

Algunos aspectos que debes tener en cuenta sobre la instrucción anterior:

Comenzamos indicándole al agente que cierre la sesión si la aplicación ya la tiene abierta. Ten en cuenta que no es necesario que le indiquemos al agente que haga clic en un texto específico, como "Salir de la puerta de enlace". Es lo suficientemente inteligente como para saber en qué hacer clic.
Después de acceder y renderizar la página principal, el agente captura la información de telemetría. Nuevamente, no necesitamos indicarle al agente que busque en mosaicos específicos o que coincida con palabras específicas. Por lo tanto, si más adelante extendemos o cambiamos la información que se muestra en esta página, esta instrucción seguirá funcionando y el resultado se seguirá capturando en nuestra tabla de Markdown.

Genial, ¿verdad?

Por el momento, terminamos con BrowserMCP, así que desconéctalo en tu navegador.

7. Automatización con Skills y Playwright

Limitaciones de BrowserMCP

BrowserMCP es excelente, pero tiene algunas limitaciones. Por ejemplo:

Requiere una sesión de navegador existente con la extensión BrowserMCP conectada. (No genera sesiones nuevas).
No admite navegadores que no sean de Chromium.
Requiere que se ejecute un proceso de navegador independiente en la misma máquina en la que se ejecuta el servidor de MCP.
No puede trabajar con el sistema de archivos local. Por ejemplo, no puede crear archivos locales para evidenciar capturas de pantalla ni descargar y almacenar archivos de la aplicación web, como archivos PDF descargables.
Es no determinista. Intentará realizar las acciones que le indiques, pero el estado local, como una ventana emergente inesperada, podría interrumpir la interacción.
No admite la operación "sin encabezado", lo que significa que no se puede ejecutar en una canalización de CI/CD sin una ventana de navegador real.

Playwright

Playwright es una herramienta mucho más sofisticada. Es un framework de pruebas y automatización de navegadores de código abierto y bien establecido. Puede hacer muchas cosas que BrowserMCP no puede, incluidos todos los puntos que mencioné anteriormente.

Es mucho más adecuado para ejecutar situaciones de prueba complejas, confiables y repetibles. Además, es especialmente adecuado para trabajar con sesiones de larga duración o, incluso, para ejecutar varias sesiones independientes en paralelo.

Sin embargo, esta capacidad adicional conlleva una curva de aprendizaje mucho más pronunciada.

Habilidades

Afortunadamente, no tenemos que aprender a usar Playwright directamente. En su lugar, podemos usar una habilidad del agente.

Entonces, ¿qué es exactamente una habilidad del agente? Piensa en ella como un paquete compacto de experiencia en un dominio que puedes entregarle a tu agente de IA cuando necesite hacer algo específico. Contiene instrucciones, prácticas recomendadas y, a veces, incluso secuencias de comandos auxiliares adaptadas a una tarea en particular.

Esta es la parte realmente inteligente: la divulgación progresiva. En lugar de incluir cada documento de API imaginable y cada regla del framework de pruebas en la instrucción inicial del sistema del LLM (lo que consume tu ventana de contexto y agota los tokens a una velocidad increíble), el agente solo lee la habilidad cuando realmente la necesita. Mantiene el contexto de referencia simple y eficiente, y recupera el "instructivo" detallado justo a tiempo. Y sí, una habilidad puede incluir instrucciones sobre cómo aprovechar servidores de MCP específicos para completar el trabajo.

Piensa en esa escena de Matrix: El agente mira un problema, se da cuenta de que necesita saber Playwright, descarga la habilidad y, de repente, dice: "Sé kung fu". Bum Conviértete en un experto al instante.

Si quieres obtener más información sobre las habilidades, consulta los siguientes recursos:

Por qué las habilidades son perfectas para Playwright

Usar una habilidad aquí es una excelente opción. Playwright es increíblemente potente, pero su sintaxis puede ser complicada. Al otorgarle al agente una habilidad de Playwright, no tenemos que preocuparnos de que nuestro LLM alucine sintaxis desactualizada o escriba selectores frágiles. Le proporcionamos un manual autorizado y seleccionado sobre cómo usar Playwright correctamente.

Usaré la CLI de Playwright y su habilidad asociada.

Con este enfoque, instalamos la CLI de Playwright de forma local y, luego, le proporcionamos a nuestro agente el conocimiento que necesita para usarla. Para evitar cualquier confusión, no instalaré ningún servidor de MCP de Playwright.

Instalando

Primero, instalemos la CLI de Microsoft Playwright de código abierto. Si aún no lo hiciste, escribe /quit`` para salir de Gemini CLI. Luego, en tu terminal, haz lo siguiente:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Ahora agreguemos la habilidad. Este comando descargará la subcarpeta de habilidades directamente desde GitHub a nuestra carpeta de habilidades de Gemini:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Ahora podemos probarlo.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Esto debería generar una sesión del navegador que se abra en la URL especificada.

También quiero que Gemini pueda usar Playwright en modo "con encabezado", es decir, con una IU visible. Sin embargo, la habilidad no le indica a Gemini cómo hacerlo. Por lo tanto, agregué estas líneas a ~/.gemini/skills/playwright-cli/SKILL.md en la sección Core:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Pruebas con Playwright

Como antes, debemos iniciar la aplicación (si aún no se está ejecutando). Haz lo siguiente desde la sesión de la terminal inicial:

make dev

Luego, en la otra sesión de la terminal, inhabilitemos temporalmente BrowserMCP para que el agente no se confunda sobre qué herramientas usar. Vuelve a iniciar Gemini CLI y, luego, ejecuta lo siguiente:

/mcp disable browsermcp

Ahora le pediremos a Gemini que navegue a nuestra aplicación con Playwright. Pero, a diferencia de BrowserMCP, no necesitamos iniciar el navegador primero. Playwright lo hará por nosotros con un proceso local.

Ingresa esta instrucción en Gemini CLI:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Como siempre, Gemini CLI pedirá permiso antes de ejecutar cualquier herramienta).

¿Qué es diferente aquí?

No era necesario iniciar el navegador primero.
No necesitamos iniciar ni conectar una extensión del navegador.
No es necesario que le indiquemos al agente que cierre la sesión primero. La prueba se instancia a partir de una sesión "limpia".
Podemos tomar capturas de pantalla y guardarlas como archivos locales.

Poco después, deberías ver un archivo dashboard.png en la carpeta output.

Ten en cuenta que verás las llamadas a herramientas que se ejecutan en Gemini CLI, pero no verás la IU del navegador. Esto se debe a que Playwright se ejecuta en "modo sin interfaz gráfica" de forma predeterminada.

Sin embargo, si vuelves a ejecutar la instrucción modificada, también podrás ver la IU:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

En breve, el resultado de Gemini CLI debería ser similar al siguiente:

¿Qué tal estuvo?

8. ¡Puedes hacerlo en Antigravity Out of the Box!

Google Antigravity incluye el subagente del navegador, que proporciona capacidades similares a la CLI de Playwright. Cuando le pides a Gemini en Antigravity que genere una URL de forma interactiva, se generará este subagente automáticamente.

Este subagente toma tu objetivo de alto nivel (p.ej., "Verifica si funciona el formulario de acceso"), analiza visualmente el diseño de la página a través de capturas de pantalla y el DOM, y determina los clics y las pulsaciones de teclas por sí solo. Es básicamente una IA visual y multimodal que navega por la Web como lo haría un humano. ¿Lo mejor de todo? Graba videos y toma capturas de pantalla de todo lo que hace automáticamente, y los guarda directamente en tu espacio de trabajo local como prueba visual de lo que logró. Antigravity llama a esta evidencia visual artefactos.

Nota para los usuarios de WSL: Lograr que el agente del navegador funcione en Antigravity es un poco complicado. Logré que funcione, pero el subagente me parece incoherente y poco confiable en este entorno. Por eso, me encanta la CLI de Playwright.

9. Otros casos de uso de la automatización del navegador

La automatización del navegador no solo se trata de asegurarse de que el botón de acceso funcione antes de una implementación de viernes por la tarde. Una vez que te das cuenta de que puedes conectar un LLM directamente a un navegador, se abre un mundo completamente nuevo de proyectos autónomos y creados por ti.

Si creas tus propios agentes de IA, estas son algunas formas en las que puedes usar herramientas como BrowserMCP o Playwright CLI para hacer el trabajo pesado:

El asistente de investigación personal: Imagina que le indicas a tu agente una URL específica y le pides que investigue un tema, pero el sitio requiere que accedas y navegues por menús complejos. En lugar de escribir un extractor web personalizado que deje de funcionar la próxima semana, solo le dices a tu agente que acceda, navegue a los datos y los resuma por ti.
El integrador "Swivel-Chair": Todos tenemos esos sistemas heredados de intranet que no tienen APIs. Ya sabes cuáles son: aquellos en los que tienes que copiar datos manualmente del sistema A y pegarlos en un formulario del sistema B. Un agente con automatización del navegador puede actuar como un pegamento universal, leer la pantalla del sistema heredado y completar el formulario en el nuevo.
Clasificación y corrección automatizadas: ¿Recibiste una alerta de prioridad 1 de tu sistema de supervisión a las 3 a.m.? Tu agente podría abrir automáticamente la URL del panel específico, leer los gráficos o los registros (con sus capacidades de visión multimodal) y publicar un resumen directamente en tu canal de Slack, lo que te ahorraría minutos valiosos durante un incidente.

La ventaja de este enfoque es que ya no estás limitado por las APIs disponibles. Si un humano puede hacerlo en un navegador, tu agente también puede hacerlo.

10. Conclusión

¡Felicitaciones! Acabas de compilar y ejecutar pruebas de IU automatizadas y sólidas con solo indicarle a un agente de IA lo que querías que hiciera en inglés sencillo. No hay selectores CSS frágiles ni secuencias de comandos de configuración complejas.

Aprendiste lo siguiente:

Las pruebas de IU no tienen por qué ser dolorosas: Si nos enfocamos en la intención de la prueba en lugar de la frágil implementación del DOM, podemos reducir en gran medida la sobrecarga de mantenimiento.
El Protocolo de contexto del modelo (MCP) les brinda a tus agentes acceso universal y plug-and-play a herramientas, datos y entornos.
BrowserMCP es una herramienta increíble para incorporar capacidades de agente en tus sesiones de Chrome locales existentes.
Las habilidades y la CLI de Playwright desbloquean un nuevo nivel de pruebas de automatización determinísticas y repetibles, todo con la ayuda de la divulgación progresiva.
El subagente de navegador de Antigravity va un paso más allá, ya que introduce la navegación autónoma y multimodal, y la grabación de artefactos listas para usar.

Ahora, ve y automatiza las tareas aburridas.

Useful Links

Si quieres profundizar en las herramientas y los conceptos que abordamos hoy, consulta estos recursos:

Código del repositorio

El repositorio de GitHub de agentic-ui-testing

Herramientas y marcos de trabajo principales

Conceptos y habilidades de agente

Otro

Cómo trabajar con Google Antigravity en WSL