🌐 Módulo 05 — Testing

Control de navegador y pruebas automáticas

Una de las capacidades más distintivas de Antigravity: los agentes pueden abrir un navegador, interactuar con tu aplicación como un usuario real y generar evidencias de que todo funciona.

Lección 5.1

Agentes de navegador: cómo funcionan

Los agentes de navegador son una capacidad integrada en Antigravity que permite a un agente lanzar Chrome (o cualquier otro navegador compatible), navegar a tu aplicación y interactuar con ella como lo haría un usuario real.

Esto significa que el agente puede:

  • Hacer clic en botones, enlaces y elementos interactivos.
  • Rellenar formularios con datos de prueba.
  • Navegar entre páginas y secciones de tu app.
  • Verificar que los elementos correctos aparecen en pantalla.
  • Capturar evidencia de cada paso: screenshots y grabaciones de video.
💡 Concepto clave

Un agente de navegador no "lee" tu código para saber si funciona. Lo que hace es usar tu aplicación exactamente como lo haría un cliente real. Si un botón no responde, si un formulario no envía o si un diseño se rompe, lo detecta porque lo experimenta.

Lección 5.2

Capturas y grabaciones como evidencia

Cada vez que un agente de navegador trabaja, genera automáticamente evidencia visual de sus acciones. Esto te da dos cosas: verificación (puedes ver que hizo lo que le pediste) y documentación (tienes prueba para tu equipo o tu cliente).

El flujo típico es este:

El agente construye

Primero crea o modifica el código de tu aplicación según tus instrucciones.

Abre el navegador

Lanza Chrome y navega a tu app local, como haría un QA manual.

Prueba interactivamente

Hace clic, rellena formularios, navega por las secciones y verifica resultados visualmente.

Genera evidencias

Toma capturas de pantalla en cada paso clave y graba un video del flujo completo.

✅ Beneficio práctico

Las grabaciones y capturas son especialmente útiles cuando trabajas con clientes. Puedes enviarles un video que demuestre que la funcionalidad que pidieron está implementada y funcionando, sin necesidad de que ellos prueben nada.

Lección 5.3

Detectar errores y corregir sin perderte

Los agentes no son perfectos. A veces se equivocan en sus pruebas o no detectan un problema sutil. Tu papel como supervisor es saber cuándo el agente se ha equivocado y cómo corregirlo sin romper el flujo de trabajo.

Señales de que el agente ha cometido un error:

  • La captura muestra algo diferente de lo que esperabas: un layout roto, un texto incorrecto o un elemento que falta.
  • El agente reporta "éxito" pero la funcionalidad clave no aparece en las evidencias.
  • Los tests pasan pero la UI no se ve correcta: puede que los tests sean demasiado superficiales.
⚠️ Error común

No confíes ciegamente en un "completado" sin revisar las capturas. El agente puede marcar una tarea como terminada basándose en que el código compila, pero eso no garantiza que la experiencia de usuario sea correcta. Siempre revisa las evidencias visuales.

Para corregir al agente:

  1. Describe qué está mal de forma específica (no digas "arréglalo", di "el botón de enviar aparece fuera de la pantalla en móvil").
  2. Indica qué debería pasar en lugar de lo que está pasando.
  3. Pide que vuelva a probar después de la corrección y genere nuevas capturas.
🎯 Actividad práctica

1. Pídele al agente que cree un sitio sencillo: una calculadora web o un formulario de contacto.
2. Pídele que pruebe el resultado abriendo el navegador y navegando por el sitio.
3. Revisa las capturas y grabaciones generadas.
4. Si encuentras algún error visual, describe el problema al agente y pide una corrección con nuevas evidencias.

🧪 Comprueba lo que aprendiste

1. ¿Cómo verifica un agente de navegador que tu app funciona?

Analizando el código fuente línea a línea
Usando la app como un usuario real: haciendo clic, rellenando formularios y verificando resultados
Comparando el código con un estándar de la industria

2. ¿Qué evidencias genera un agente de navegador?

Reportes en PDF con métricas de rendimiento
Capturas de pantalla y grabaciones de video del flujo
Solo logs de consola

3. Si la captura muestra un botón fuera de pantalla, ¿qué haces?

Ignoro el error y paso al siguiente módulo
Edito el CSS directamente sin decirle nada al agente
Describo el problema específico al agente y le pido que corrija y vuelva a probar