Web-QA

Probador web de VibeShift

Este proyecto proporciona un agente impulsado por IA diseñado para optimizar los flujos de trabajo de pruebas web, en particular para desarrolladores que utilizan asistentes de codificación de IA como GitHub Copilot, Cursor, Roo Code, etc. Se integra directamente en estos asistentes a través del MCP (Protocolo de comando de máquina) , lo que le permite automatizar la grabación, ejecución y descubrimiento de pruebas mediante indicaciones en lenguaje natural.

El problema: Probar manualmente las aplicaciones web después de generar código con asistentes de IA requiere mucho tiempo y es propenso a errores. Además, los cambios de código impulsados por IA pueden introducir inadvertidamente regresiones en funciones que ya funcionaban.

La solución: Esta herramienta cierra la brecha al permitir que su asistente de codificación de IA:

1. Registre nuevos flujos de prueba: describa el recorrido del usuario en lenguaje natural y el agente interactuará con el navegador (usando Playwright) bajo la guía de IA para generar un script de prueba reproducible (formato JSON).
2. Ejecutar pruebas existentes: ejecute scripts de prueba grabados previamente para realizar pruebas de regresión, garantizando que los nuevos cambios en el código no hayan interrumpido la funcionalidad existente.
3. Descubra posibles pasos de prueba: explore un sitio web, analice páginas usando la visión y la estructura DOM y pídale a un LLM que sugiera pasos de prueba relevantes para diferentes páginas.

Esto crea un ciclo de retroalimentación más estrecho, automatizando el proceso de prueba y permitiendo que el asistente de IA (y el desarrollador) identifiquen y solucionen rápidamente problemas o regresiones.

Demo (Haga clic para reproducir estos videos)

Características

• Integración con MCP: se integra perfectamente con Cursor/Windsurf/Github Copilot/Roo Code
• Grabación de pruebas asistida por IA: genere guiones de prueba basados en Playwright a partir de descripciones en lenguaje natural (en modo automatizado).
• Ejecución de pruebas deterministas: ejecute archivos de prueba JSON grabados de manera confiable utilizando Playwright.
• Descubrimiento de pruebas impulsado por IA: rastree sitios web y aproveche cualquier LLM (en formato compatible con OpenAI) para sugerir pasos de prueba para las páginas descubiertas.
• Pruebas de regresión: ejecute fácilmente conjuntos de pruebas existentes para detectar regresiones.
• Bucle de retroalimentación automatizado: se devuelven los resultados de la ejecución (incluidos fallos, capturas de pantalla y registros de la consola), lo que proporciona retroalimentación directa al asistente de IA.
• Autorreparación: Las pruebas existentes se autoreparan en caso de cambios en el código. No es necesario actualizarlas manualmente.
• Pruebas de IU: Las pruebas de IU que Playwright no admite directamente también son compatibles. Por ejemplo, Check if the text is overflowing in the div
• Pruebas de regresión visual : uso del enfoque tradicional de comparación de píxeles y LLM de visión.

Cómo funciona

1. Usuario: solicita a su asistente de codificación de IA (por ejemplo, "Grabar una prueba para el flujo de inicio de sesión", "Ejecutar la prueba de regresión 'test_login.json'").
2. Agente de codificación de IA: reconoce la intención y utiliza MCP para llamar a la herramienta adecuada proporcionada por el MCP Server .
3. Servidor MCP: enruta la solicitud a la función correspondiente ( record_test_flow , run_regression_test , discover_test_flows , list_recorded_tests ).
4. Agente de pruebas web:
   • Grabación: el WebAgent (en modo automatizado) interactúa con el LLM para planificar los pasos, controla el navegador a través de BrowserController (Playwright), procesa HTML/Vision y guarda los pasos de prueba resultantes en un archivo JSON en el directorio output/ .
   • Ejecución: TestExecutor carga el archivo de prueba JSON especificado, utiliza BrowserController para interactuar con el navegador de acuerdo con los pasos registrados y captura resultados, capturas de pantalla y registros de la consola.
   • Descubrimiento: CrawlerAgent utiliza BrowserController y LLMClient para rastrear páginas y sugerir pasos de prueba.
5. Navegador: Playwright dirige la interacción real del navegador.
6. Retroalimentación: Los resultados (éxito/fracaso, rutas de archivos, mensajes de error, pasos descubiertos) se devuelven a través del servidor MCP al asistente de codificación de IA, que luego los presenta al usuario.

Empezando

Prerrequisitos

• Python 3.10+
• Acceso a cualquier LLM (Gemini 2.0 Flash funciona mejor de forma gratuita en mis pruebas)
• MCP instalado ( pip install mcp[cli] )
• Navegadores de Playwright instalados ( playwright install )

Instalación

1. Clonar el repositorio:
   git clone <repository-url> cd <repository-name>
2. Crear un entorno virtual (recomendado):
   python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows
3. Instalar dependencias:
   pip install -r requirements.txt
4. Instalar navegadores Playwright:
   playwright install --with-deps # Installs browsers and OS dependencies

Configuración

1. Cambie el nombre del archivo .env.example a .env en el directorio raíz del proyecto.
2. Agregue su clave API de LLM y otros detalles necesarios:
   # .env LLM_API_KEY="YOUR_LLM_API_KEY"
   • Reemplace YOUR_LLM_API_KEY con su clave real.

Agregar el servidor MCP

Agregue esto a su configuración mcp:

Mantenga este servidor en funcionamiento mientras interactúa con su asistente de codificación de IA.

Uso

Interactúe con el agente a través de su asistente de codificación de IA habilitado para MCP utilizando lenguaje natural.

Ejemplos:

• Grabar una prueba:

  Para grabar una prueba, acceda a https://practicetestautomation.com/practice-test-login/ , escriba "estudiante" en el campo de nombre de usuario, escriba "Contraseña123" en el campo de contraseña, haga clic en el botón "Enviar" y verifique que el texto "Felicitaciones, estudiante" sea visible.

  • (El agente realizará estas acciones automáticamente y guardará un archivo test_....json en output/ )
• Ejecutar una prueba:

  Ejecutar la prueba de regresión output/test_practice_test_login_20231105_103000.json

  • (El agente ejecutará los pasos en el archivo especificado e informará el estado APROBADO/REPROBADO con errores y detalles).
• Descubra los pasos de la prueba:

  Descubra los posibles pasos de prueba a partir de https://practicetestautomation.com/practice/

  • (El agente rastreará el sitio, analizará las páginas y devolverá pasos de prueba sugeridos para cada una).
• Lista de pruebas grabadas:

  "Enumere las pruebas web grabadas disponibles".

  • (El agente devolverá una lista de archivos .json encontrados en el directorio output/ ).

Producción:

• Pruebas grabadas: se guardan como archivos JSON en el directorio output/ (consulte test_schema.md para conocer el formato).
• Resultados de la ejecución: Se devuelven como un objeto JSON que resume la ejecución (estado, errores y rutas de evidencia). Los resultados completos también se guardan en output/execution_result_....json .
• Resultados de descubrimiento: Se devuelven como un objeto JSON con las URL descubiertas y los pasos sugeridos. Los resultados completos se guardan en output/discovery_results_....json .

Inspiración

• Uso del navegador : La generación del árbol de contexto DOM se inspira en gran medida en ellos y se modifica para acomodar elementos estáticos, dinámicos y visuales. Les agradecemos especialmente su contribución al código abierto.

Contribuyendo

¡Agradecemos sus contribuciones! Consulte CONTRIBUTING.md para obtener más información sobre cómo empezar, reportar problemas y enviar solicitudes de incorporación de cambios.

Licencia

Este proyecto está licenciado bajo APACHE-2.0 .