Automatización de Pruebas Web Simplificada con Playwright
Al construir cualquier interfaz de usuario, es esencial que no solo trabajemos en las características, sino que también nos aseguremos de hacerlas a prueba de fallos antes de llegar a producción. Una de las herramientas que nos puede ayudar con las pruebas es la que vamos a discutir en este post.
¿Qué es Playwright?
Playwright es una herramienta de código abierto.Inició como una bifurcación de Puppeteer y actualmente es una librería para automatización Web. Fue creada por los autores de Puppeteer, pero actualmente es mantenido y actualizado por Microsoft
Playwright permite la automatización de pruebas en navegadores web modernos como Chrome, Firefox y WebKit. Su potencia y flexibilidad lo convierten en una opción popular entre los desarrolladores y equipos de QA por igual.
Ventajas de Playwright
- Soporte Multi-Navegador: Playwright ofrece soporte para múltiples navegadores, lo que permite a los desarrolladores probar sus aplicaciones en diferentes entornos de manera simultánea.
- API Potente y Amigable: La API de Playwright es intuitiva y fácil de aprender, lo que facilita la creación y mantenimiento de scripts de prueba.
- Automatización Completa: Con Playwright, es posible automatizar una amplia gama de acciones, desde interactuar con elementos de la página hasta simular comportamientos complejos del usuario.
- Velocidad y Estabilidad: Playwright está diseñado para ser rápido y confiable, lo que permite ejecutar pruebas de forma eficiente sin comprometer la estabilidad del proceso.
Desventajas de Playwright
Curva de Aprendizaje: Aunque la API de Playwright es amigable, puede llevar tiempo familiarizarse completamente con todas sus características y funcionalidades
No es una librería para automatizar automatizaciones mobile:Si bien se pueden simular Web Apps en los navegadores de los dispositivos móviles no se debe tomar como una herramienta de automatización mobile por el momento
Características
Auto- waiting: Es una característica propia de playwright que aumenta la estabilidad de las automatizaciones, haciendo que espere automáticamente los elementos de la página sin necesidad de indicarle o “quemarle” una espera
Multibrowser: Compatibilidad completa con diferentes navegadores basados en chromium (Por ejemplo: Firefox, Webkit, Google Chrome, Microsoft Edge, Opera), y es que cuando por ejemplo Chrome está en la versión 120, Playwright ya es compatible con la siguiente versión (121) lo que lo hace una herramienta de automatización muy potente en cuanto a compatibilidad con los navegadores
Políglota: Y es que una de las grandes características de Playwright es que tiene compatibilidad con diferentes lenguajes de programación como Typescript, Javascript, Python, C# y Java, lo que convierte a Playwright en una alternativa más que interesante
Paralelización, Headless Nativa todo desde un mismo archivo:
Todas estas características se pueden utilizar para diferentes objetivos, puedes reutilizar cuantos workers sean necesarios para hacer que las pruebas sean mucho más rápidas, o puedes tomar screenshots o grabar videos de las pruebas, todo desde el playwright.config
Si llegaste hasta este punto me imagino que quieres hacer tu primer test, permíteme te doy una guia rápida para iniciar tu primer test en Playwright
Instalación de Playwright en TypeScript
Una de las razones por las que se utiliza Playwright es que es fácil de instalar. Tan facil como simplemente crear la carpeta de tu proyecto y ejecutar 2 comandos.
(Pre-requisito debes tener instalado el gestor de paquetes de Node JS) si no es así acá te dejo el link:
https://nodejs.org/en/download/
Te recomiendo descargar e instalar la LTS(Long Time Support) para que no tengas inconvenientes
Tambien recomiendo descargar Visual Studio Code, puesto que tiene un soporte para la herramienta de forma nativa y se integra perfectamente
El link es: https://code.visualstudio.com/download
Ahora si vamos a tu primer test, para iniciar tu proyecto creas una carpeta y ejecutas el comando :
npm init playwright@latestEn la primera opción eliges entre Typescript y Javascript yo elegí Typescript
En la segunda pregunta es como se llamara tu carpeta de test e2e, en este caso lo deje predeterminado con el nombre tests
En la tercera pregunta no añadí ningún workflow de github por lo que lo dejamos en false
Y en la cuarta pregunta nos preguntará si instalamos todos los navegadores o solo 1 en este caso se instalaron todos los navegadores
Y listo tienes ahora instalado Playwright y 2 test basicos que solo falta ejecutar
Para ejecutar los tests puedes usar el comando:
npx playwright testEste empezará a ejecutar el tests en modo headless y obtendrá el reporte de la ejecución
Puedes ver el reporte con el comando
npx playwright show-reportNotas finales
Y listo, ¡ felicitaciones! , haz ejecutado tu primer test en playwright, de ahora en adelante el limite lo pones tu, puedes empezar a modificar el test que viene como demo y el playwright.config.ts para mejorar los reportes, agregar nuevos test, modificar los existentes, etc hay muchas posibilidades y se puede adecuar de acuerdo a lo que necesites
Y eso es todo, ahora estás listo para empezar a escribir y ejecutar tus pruebas de Playwright en TypeScript.
