Automatizando con Playwright 

(Si prefieres leer el artículo en Inglés, CLICA AQUÍ)

¿Por qué Playwright? ¿Cómo arrancar un proyecto con este framework? ¿Qué ventajas tiene? ¿Cómo funciona a nivel código? Te lo cuento muy resumidito en este artículo 🙂 

Antes que nada… ¿Qué es Playwright? 

Es un Framework de automatización open source para pruebas End-to-End desarrollado por Microsoft, que no solo permite hacer pruebas de automatización de aplicaciones web, sino también de APIs. 

Las pruebas End to End son pruebas de extremo a extremo que simulan el comportamiento del usuario final. 

¿Por qué Playwright? 

Este framework nos permite probar en diferentes browsers (Edge, Chrome, Firefox, webkit, etc.), en diferentes plataformas (web, móvil, etc.) así como pruebas de API (de la misma manera que se hace en Postman). Otro de los potenciales de este framework es que es multilenguaje, lo que nos permite poder codificar nuestras pruebas en C#, JavaScript, TypeScript, Python, Java. Así como ejecutarlo tanto en Windows, Ubuntu, Mac, etc. Las ejecuciones de las pruebas se pueden lanzar en paralelo, lo que permite optimizar la velocidad de ejecución de estas, a diferencia de las pruebas que se lanzaran de manera secuencial.  

Más cosas a favor de esta herramienta. No necesitamos instalar en nuestra máquina códigos, frameworks, etc para que funcione. Simplemente en el #code nos instalamos el playwright (npm init playwright) y seguimos los pasos. Es muy intuitivo.  

Podemos generar las pruebas picando código, pero también podemos utilizar el generador de código que nos facilita Playwright para grabar estas pruebas, facilitando así su codificación. Como también lanzarlas en manera debug para depurar. Y lo mejor de todo es que no hay problemas con las versiones de navegador como sucede con otros framework. 

Ahora que ya conocemos un poco más sobre este potente framework de automatización vamos a ver un poco más en detalle cómo funciona a nivel código y que más nos ofrece al momento de hacer nuestras pruebas. 

Proyecto Playwright 

Podemos dividir nuestro proyecto en 3 partes: 

• Pages 
• Specs 
• Steps 

Pages: Sobre este apartado vamos a configurar nuestras páginas de prueba. Por ejemplo, si nuestro sitio tiene un login por medio de una URL determinada pero nuestras pruebas apuntan a otra URL, pues creamos un page de Login y otro de nuestras pruebas con su correspondiente URL. 

También aquí podemos crear nuestro config.ts (documento de configuración de datos), donde va a contener usuarios / contraseñas / configuraciones afines al resto de las pruebas, etc. 

Spect: En esta parte lo que se configura es nuestro flujo de prueba según datos de prueba. Aquí es donde le decimos que es lo que queremos probar. Por ejemplo, Prueba1 – pantalla ropa mujer + carrito de compra, prueb2 – pantalla ropa hombre + carrito de compra, y así… tantas combinaciones necesitemos probar. 

Steps: Aquí es donde vamos a configurar los pasos de nuestras pruebas. Por ejemplo, si probamos una página de ropa, aquí podremos configurar un steps1 – ropa mujer, otro steps2 – ropa hombre, otro – carrito de compra, y todos los pasos de cada pantalla, pinchar en pantalón, buscar camiseta, etc… 

Y luego tenemos el configurador de playwright, donde podemos configurar el comportamiento de nuestras pruebas: 

• Navegadores web / móvil 
• Workers 

• Trazas 
• Screenshoot 
• Etc… 

Una vez tengamos nuestras pruebas, podemos obtener (ya sea por medio de la configuración de Jtest o Allure) los reportes de las mismas. 

Por ejemplo, con Allure tenemos una metodología de reporte muy potente, donde un dashboard  nos mostrará las pruebas por navegador con sus correspondientes errores de consola, como sus screenshoot, así como las gráficas y porcentajes con información sobre todas las pruebas ejecutadas; informándonos de forma muy gráfica sobre los resultados obtenidos: cuántas pruebas resultantes OK, cuántas KO y cuántas han finalizado, pero con algún tipo de fallo.  

Otra ventaja que podemos encontrar en la realización de nuestras pruebas son las grabaciones del video de la prueba. 

Conclusión: Respecto a otros framework de automatización, la forma de codificar es muy sencilla. La estructura es de proyecto (diseño en el que se organiza el mismo), pudiendo reutilizar código llamando al steps de prueba. 

Otra ventaja a la hora de usar Playwright es el ahorro de problemas con los versionados de navegador y su sistema de reporte; el cual, ya sea para ver el resultado de las pruebas, como para presentar dicho informa a alguien de negocio, resulta muy práctico e intuitivo.  

Y por último, otro de sus puntos fuertes es que es muy fácil de mantener por la estructura que tiene para diseñar las pruebas, como hemos podido ver en las imágenes. 

¡Por cierto! Antes de acabar, quiero dar las gracias a Alberto Díaz por inspirarme para escribir este artículo,  y por supuesto, también a todo el equipo de QA de ENCAMINA, porque en su medida, todos han colaborado para sacar el proyecto adelante 😍