Envía con confianza automatizando tus auditorías de UI
Las pruebas manuales son un trabajo lento y propenso a errores que acaba con el impulso. Cada vez que implementaba un cambio, solía preocuparme por enlaces rotos o errores de consola ocultos a simple vista en el sitio de producción. Son horas de clics manuales cada semana solo para mantener un nivel básico de calidad.
Empecé a usar la habilidad webapp-testing para delegar este trabajo a Eigent. Al combinar la automatización de Playwright con el flujo de trabajo agente de Eigent, ahora puedo ejecutar una auditoría completa del sitio —incluidas capturas visuales y comprobaciones de registros— con un solo prompt.
Así es como configuré el flujo de trabajo para probar el sitio web de Eigent.ai.
Prepara el script de pruebas
Empiezo definiendo la lógica de prueba en un script de Python. Usando la API asíncrona de Playwright, puedo rastrear mensajes de consola y fallos de red mientras navego. Este script actúa como el cerebro de la operación, indicándole a Eigent exactamente qué buscar, desde enlaces de navegación específicos hasta capturas de pantalla de página completa.
Realiza una prueba funcional y de UI integral del sitio web https://www.eigent.ai/ usando la habilidad webapp-testing.
Configura los listeners de errores
Una de las partes más valiosas de este flujo de trabajo es detectar fallos silenciosos. Configuré el script para escuchar errores de consola del navegador y solicitudes de red fallidas. Esto permite a Eigent registrar problemas técnicos como el token de PostHog que faltaba y que encontré, una mala configuración que sería fácil pasar por alto en una revisión manual.
Navega por el sitio de forma autónoma
Eigent toma la iniciativa en la navegación. Comienza en la página de inicio e identifica enlaces de navegación principales como Environments y Enterprise. Al hacer clic en estas secciones y esperar a que la red quede inactiva, garantiza que cada transición de página sea fluida y que el contenido se cargue como se espera.
Captura instantáneas visuales
Las capturas de pantalla son la mejor manera de verificar la coherencia de la UI entre páginas. Durante la prueba, Eigent toma automáticamente instantáneas de página completa de la página de inicio y de las secciones internas. Capturé varias vistas, incluidas:
- Página de inicio: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- Página de Environments: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- Página de Enterprise: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png
Genera el informe automatizado
Una vez que la navegación termina, Eigent compila todo en un informe Markdown. Esto incluye un resumen de los hallazgos, una lista de errores de consola y las rutas absolutas de todas las capturas de pantalla realizadas. Tener todos estos datos en un solo lugar hace que el proceso de revisión sea instantáneo.
Analiza los hallazgos
Reviso el resultado para identificar cualquier bloqueo crítico. En esta ejecución, la auditoría detectó un error de inicialización de PostHog y señaló un recurso de video abortado en task_splitting.mp4. No son solo errores: son oportunidades para mejorar la experiencia del usuario antes de que un cliente llegue a verlos.
Escalar la calidad sin escalar el esfuerzo
No se trata solo de detectar algunos errores de consola. Este flujo de trabajo demuestra cómo Eigent transforma una herramienta técnica como Playwright en un socio autónomo de calidad. En lugar de escribir y mantener suites de pruebas complejas para cada pequeño cambio de UI, solo tengo que indicarle a Eigent una URL y recibir un informe completo.
Automatizar las partes “aburridas” de QA permite a los desarrolladores centrarse en construir funcionalidades mientras garantizan que el sitio existente siga siendo sólido como una roca.
Qué probar a continuación
Audita https://eigent.ai/pricing para comprobar la responsividad móvil y captura una captura de pantalla a una resolución de 375x812. Comprueba si hay imágenes rotas en todas las publicaciones del blog del sitio y enumera cualquier error 404. Verifica que el botón 'Book a Demo' en la página de Enterprise abra correctamente el modal de programación.
Cada uno de estos casos aprovecha la misma habilidad webapp-testing, sin necesidad de configuración adicional.
Consejos para mejores resultados
- Usa estados de espera networkidle. Esto garantiza que los recursos asíncronos y los scripts de seguimiento hayan terminado de cargarse antes de que Eigent haga una captura de pantalla o compruebe errores.
- Filtra las solicitudes abortadas. Muchos navegadores abortan solicitudes durante una navegación rápida o una carga diferida. Filtrarlas te ayuda a centrarte en verdaderos errores 404 y errores del servidor.
- Sé específico con los roles. Al indicar a Eigent que haga clic en botones, usa selectores basados en roles como link o button para hacer las pruebas más resistentes a cambios en CSS.
