Habilidad de Pruebas de Aplicaciones Web con Playwright

--- name: web-application-testing-skill description: Un conjunto de herramientas para interactuar y probar aplicaciones web locales usando Playwright. --- # Pruebas de Aplicaciones Web Esta habilidad permite realizar pruebas y depuración exhaustivas de aplicaciones web locales utilizando la automatización de Playwright. ## Cuándo Usar Esta Habilidad Use esta habilidad cuando necesite: - Probar la funcionalidad del frontend en un navegador real - Verificar el comportamiento de la interfaz de usuario y las interacciones - Depurar problemas en aplicaciones web - Capturar capturas de pantalla para documentación o depuración - Inspeccionar registros de la consola del navegador - Validar envíos de formularios y flujos de usuario - Verificar el diseño responsivo en diferentes tamaños de pantalla ## Requisitos Previos - Node.js instalado en el sistema - Una aplicación web ejecutándose localmente (o una URL accesible) - Playwright se instalará automáticamente si no está presente ## Capacidades Principales ### 1. Automatización del Navegador - Navegar a URLs - Hacer clic en botones y enlaces - Rellenar campos de formularios - Seleccionar opciones en listas desplegables - Manejar diálogos y alertas ### 2. Verificación - Afirmar la presencia de elementos - Verificar contenido de texto - Comprobar la visibilidad de elementos - Validar URLs - Probar el comportamiento responsivo ### 3. Depuración - Capturar capturas de pantalla - Ver registros de la consola - Inspeccionar solicitudes de red - Depurar pruebas fallidas ## Ejemplos de Uso ### Ejemplo 1: Prueba Básica de Navegación ```javascript // Navegar a una página y verificar el título await page.goto('http://localhost:3000'); const title = await page.title(); console.log('Título de la página:', title); ``` ### Ejemplo 2: Interacción con Formularios ```javascript // Rellenar y enviar un formulario await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### Ejemplo 3: Captura de Pantalla ```javascript // Capturar una pantalla para depuración await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## Directrices 1. **Verifique siempre que la aplicación esté en ejecución** - Compruebe que el servidor local sea accesible antes de ejecutar las pruebas 2. **Use esperas explícitas** - Espere a que los elementos o la navegación se completen antes de interactuar 3. **Capture capturas de pantalla en caso de fallo** - Tome capturas de pantalla para ayudar a depurar problemas 4. **Limpie los recursos** - Siempre cierre el navegador cuando termine 5. **Maneje los tiempos de espera con elegancia** - Establezca tiempos de espera razonables para operaciones lentas 6. **Pruebe de forma incremental** - Comience con interacciones simples antes de pasar a flujos complejos 7. **Use selectores con criterio** - Prefiera data-testid o selectores basados en roles sobre las clases CSS ## Patrones Comunes ### Patrón: Esperar un Elemento ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### Patrón: Verificar si un Elemento Existe ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### Patrón: Obtener Registros de la Consola ```javascript page.on('console', msg => console.log('Registro del navegador:', msg.text())); ``` ### Patrón: Manejar Errores ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## Limitaciones - Requiere un entorno Node.js - No puede probar aplicaciones móviles nativas (use React Native Testing Library en su lugar) - Puede tener problemas con flujos de autenticación complejos - Algunos frameworks modernos pueden requerir configuración específica