Playwright: Lo bueno y lo malo, desde un novato del E2E

Antes de empezar, me gustaría aclarar que llevo muy poco haciendo testing así que aún no conozco mucho y puede que esté mal realizada la reseña pero es desde mi punto de vista de novato.

Bueno, ahora sí “a lo que te truje chencha”, hace poco tenía una serie de pruebas realizadas en Cypress, sin embargo tuve 5 problemas principalmente:

1. No tenía forma de probar algo cercano a Safari
2. Las pruebas fallaban muy seguido en Github Actions porque por alguna razón, no lograba tener a Firefox disponible para cuando empezaban las pruebas, así que ocupaba forzarlas varias veces hasta que “jalara”.
3. Hacer algunas pruebas se me hacía un tanto complicado en Cypress por lo que tardaba más de lo normal
4. Los resultados obtenidos de las pruebas dentro de Github Actions siempre salían corrompidos (los videos generados).
5. Tardaba muchísimo en ejecutar las pruebas

Por lo que me puse a investigar algunos frameworks de E2E que cubrieran mis necesidades, sobre todo que los puntos anteriores, se resolvieran y ahí fue a donde llegué a Playwright.

Lo bueno…

¿Qué cubrió Playwright que no tuviera Cypress?… bueno, vamos a empezar por lo bueno:

1. Playwright sí me permite descargar más navegadores (incluso ¡Soporte de Electron!). Esto fue un “hitazo” porque por fin podría hacer mayor cantidad de pruebas y cubrir más puntos. Ya que el código que quería probar sería para una web que podría ser usada por personas mayores, a lo que cubrir más navegadores me ayudaría aún más…
2. La descarga de los navegadores se hace en un paso que hasta que no termina, Github Actions no permite el avance a otros pasos del job hasta que no termina.
3. Hacer pruebas es mucho más sencillo gracias a su generador, abres la URL, y empiezas a cliquear cosas como si fueras un usuario, así solo ocupas generar los expects pero los procesos los puedes realizar de forma muy fácil (quizá incluso los expects se puedan hacer gracias al generador pero por ahora no sé cómo :P)
4. Los resultados en video salen sin corromperse y son descargables de forma fácil, puedes solo generar videos en caso de que las pruebas fallen y así si no fallan no hay necesidad de dejarlos.
5. Tarda mucho menos en ejecutar las pruebas, para 9 pruebas que generamos, tardaba unos 2-3 minutos por prueba, ahora tarda entre 1 y 2 minutos (claro, dependiendo de la velocidad que nos responde un API), por lo que tardaba en finales con todos los jobs en unos 30 minutos~ con Playwright, a pesar de que tiene un navegador extra, nos redujo el tiempo a unos 20 minutos~

Y estos solo fueron los puntos que cubrieron mis necesidades. Obviamente, encontré muchos más puntos muy buenos.

Aunque la documentación no es clara y esto va un punto en contra… lo que sí va a favor es que es fácil de implementar al final del día (quizá haga un tutorial de ello), por lo que configurarlo es en un “pim pam pum tras y se acabó”.

Los comandos son bastante sencillos, y rápidos, puedes o no abrir un navegador por lo que al final puedes hacer las pruebas más rápido. Agregar funcionalidades también es más rápido, por ejemplo en mi caso necesito setear una configuración en el objeto window en Cypress me costó algo de trabajo encontrarlo mientras que en Playwright es más fácil.

Las opciones de configuración en Playwright permite más adaptabilidad y son bastante fáciles de implementar, por lo que puedes adaptar a Playwright a tus necesidades de forma bastante fácil.

Lo malo…

Pero no todo ha sido bueno, la forma de trabajar las pruebas dado que se basa en JEST (y quizá por mi inexperiencia) no son del todo amigables. Cypress tiene una concatenación que nos permite hacer varias validaciones en orden y de forma bastante fácil, ejemplo:

cy.get('body div[id="bot-webchat-sdk-chat-wrapper"]').should('not.have.class', 'bot-webchat-sdk-animated-element').should('have.class', 'bot-webchat-sdk-release-chat');

Mientras que esta validación en Playwright se hace generando varios expect, por ejemplo:

await expect(page.locator('#bot-webchat-sdk-chat-wrapper')).not.toHaveClass(/bot-webchat-sdk-animated-element/);
await expect(page.locator('#bot-webchat-sdk-chat-wrapper')).toHaveClass(/bot-webchat-sdk-release-chat/);

Ahora bien, siguiendo el mismo caso si se fijan, debemos agregar un regex para validar 1 sola clase… mientras que en Cypress, se agrega tal cual la clase y el servicio se encarga. Bien podría ser algo como si el tipo de toHaveClass es string, sabemos que es 1 sola clase, si tenemos el array, entonces son varias y Playwright debería identificar esto para buscar solo esa clase.

Claro, tiene la opción de pasar el array, sin embargo como digo al pasar una string no la detecta como si fuera solo 1 clase, en este caso es menos útil y como digo, entiendo que se basa en Jest pero aquí viene el siguiente gran problema.

Como está basado en Jest, las funcionalidades están “en empate” haciendo que tengamos que buscar entre Jest y Playwright y aprender de Jest y a la vez de Playwright haciendo todo un revoltijo cuando bien pudo haber sido Playwright quien hiciera su propio sistema facilitando bastante las cosas.

Otro punto fuerte malo es que si uno Googlea ciertas cosas, por alguna razón nos salen combinadas, ni si quiera con Jest si no con otros servicios. Haciendo que encontrar una posible solución a nuestros problemas como novatos se complique.

Por último, un punto que tampoco me agradó, es la carencia de ciertas funcionalidades básicas, en Cypress se puede agregar un “timeout” para que “espere antes de continuar” mientras que en Playwright necesita uno agregar una función con un “await” y entonces “espere para avanzar” y ese tipo de cosas ya deberían venir dentro como “helpers” pero no es así por lo que extender sus funcionalidades nos toca a nosotros.

Conclusión…

Creo que en conclusión le doy un 4/5, debido a que como menciono hay cosas que lo complican pero el hecho de que exista el generador, y que sea bastante completo, le da muchos puntos, creo que en algún punto conforme crezca la plataforma será una gran competencia y sobre todo si algún día retiran JEST (que no sé si vaya a suceder pero hey se vale soñar) y quizá bajaría un poco la puntuación pero, para alguien que va comenzando, creo que Playwright fue mucho más amigable que Cypress conmigo.