Pruebas de Aplicaciones Web

¿Qué hace Pruebas de Aplicaciones Web?

Para probar aplicaciones web locales, escribe scripts nativos de Python con Playwright.

Scripts auxiliares disponibles:

• scripts/with_server.py - Gestiona el ciclo de vida del servidor (admite múltiples servidores)

Ejecuta siempre los scripts con --help primero para ver el uso. NO leas el código fuente hasta que primero intentes ejecutar el script y descubras que una solución personalizada es absolutamente necesaria. Estos scripts pueden ser muy grandes y, por lo tanto, saturar tu ventana de contexto. Existen para ser llamados directamente como scripts de caja negra, en lugar de ser ingeridos en tu ventana de contexto.

Árbol de Decisión: Cómo Elegir tu Enfoque

Tarea del usuario → ¿Es HTML estático?
    ├─ Sí → Leer el archivo HTML directamente para identificar selectores
    │         ├─ Éxito → Escribir script de Playwright usando selectores
    │         └─ Fallo/Incompleto → Tratar como dinámico (abajo)
    │
    └─ No (aplicación web dinámica) → ¿El servidor ya está en ejecución?
        ├─ No → Ejecutar: python scripts/with_server.py --help
        │        Luego usar el helper + escribir script simplificado de Playwright
        │
        └─ Sí → Patrón de reconocimiento luego acción:
            1. Navegar y esperar a que la red esté inactiva (networkidle)
            2. Tomar captura de pantalla o inspeccionar el DOM
            3. Identificar selectores a partir del estado renderizado
            4. Ejecutar acciones con los selectores descubiertos

Ejemplo: Usando with_server.py

Para iniciar un servidor, ejecuta --help primero, luego usa el helper:

Servidor único:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python tu_automation.py

Múltiples servidores (por ejemplo, backend + frontend):

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python tu_automation.py

Para crear un script de automatización, incluye solo la lógica de Playwright (los servidores se gestionan automáticamente):

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Siempre lanza chromium en modo headless
    page = browser.new_page()
    page.goto('http://localhost:5173') # El servidor ya está en ejecución y listo
    page.wait_for_load_state('networkidle') # CRÍTICO: Esperar a que JS se ejecute
    # ... tu lógica de automatización
    browser.close()

Patrón de Reconocimiento Luego Acción

1. Inspeccionar el DOM renderizado:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. Identificar selectores a partir de los resultados de la inspección

3. Ejecutar acciones usando los selectores descubiertos

Error Común

❌ No inspecciones el DOM antes de esperar a networkidle en aplicaciones dinámicas ✅ Sí espera a page.wait_for_load_state('networkidle') antes de la inspección

Mejores Prácticas

• Usa los scripts empaquetados como cajas negras - Para realizar una tarea, considera si alguno de los scripts disponibles en scripts/ puede ayudar. Estos scripts manejan flujos de trabajo comunes y complejos de manera confiable sin saturar la ventana de contexto. Usa --help para ver el uso, luego invócalos directamente.
• Usa sync_playwright() para scripts sincrónicos
• Siempre cierra el navegador al terminar
• Usa selectores descriptivos: text=, role=, selectores CSS o IDs
• Agrega esperas apropiadas: page.wait_for_selector() o page.wait_for_timeout()

Archivos de Referencia

• examples/ - Ejemplos que muestran patrones comunes:
  • element_discovery.py - Descubrir botones, enlaces y entradas en una página
  • static_html_automation.py - Usar URLs de tipo file:// para HTML local
  • console_logging.py - Capturar registros de consola durante la automatización