Cuando se crean aplicaciones, las pruebas son una etapa crucial en el ciclo de desarrollo de un software. Las pruebas permiten a los desarrolladores determinar hasta qué punto el software cumple sus requisitos, identificar y solucionar errores o vulnerabilidades del software y, en general, mejorar y comprobar la calidad del software.
Sin las pruebas adecuadas, es probable que lance un software de baja calidad que no cumpla todos los requisitos del usuario y que tenga fallos y vulnerabilidades que puedan ser aprovechados por agentes maliciosos.
Por mucho que las pruebas de software sean importantes, no son fáciles de realizar. Las pruebas de software, especialmente con aplicaciones web, pueden ser un proceso complicado, costoso, lento y doloroso si tiene que hacerlo manualmente.
Al probar una aplicación web, necesita simular lo que harán los usuarios previstos. Por lo tanto, necesita realizar todas las acciones posibles que los usuarios pueden llevar a cabo, desde crear cuentas, iniciar sesión e interactuar con diferentes elementos de la aplicación web.
Cuando se hace manualmente, esto puede resultar aburrido, llevar mucho tiempo y ser muy ineficaz, ya que pueden pasarse por alto errores o no realizarse las pruebas de forma exhaustiva. Esto es lo que hace necesarias herramientas como Playwright y Cypress, que automatizan el proceso de comprobación de las aplicaciones web en los navegadores web modernos.
Introducción a Playwright
Playwright es un marco multinavegador de código abierto para la automatización y las pruebas de extremo a extremo de aplicaciones web. La automatización se refiere al uso de software para automatizar acciones web comunes como la creación de cuentas, el inicio de sesión, la cumplimentación de formularios y la pulsación de botones. La automatización permite que el software experimente su aplicación igual que lo haría un usuario humano
Las pruebas de extremo a extremo son una estrategia de pruebas minuciosa y exhaustiva que evalúa y verifica el flujo completo de una aplicación de principio a fin.
Playwright está desarrollado y mantenido por Microsoft, y permite la automatización y las pruebas en los navegadores web basados en Chromium, Firefox y WebKit utilizando una única API.
Chromium es una base de código abierto y un navegador gratuito que se utiliza para construir otros navegadores. Navegadores como Chrome, Microsoft Edge, Opera y Samsung Internet se basan en el código de Chromium. WebKit, por su parte, es el motor de navegación utilizado por el navegador web Safari. Playwright permite realizar pruebas y automatizaciones en todos estos navegadores diferentes utilizando una única API.
Playwright le permite probar escenarios que abarcan múltiples orígenes, pestañas y usuarios. También le permite crear escenarios con diferentes contextos para diferentes usuarios y ejecutarlos contra su servidor. Playwright también tiene funciones que le ayudan a evitar las pruebas defectuosas; es decir, que las pruebas den resultados de fallo y de aprobado sin necesidad de realizar cambios en la prueba o en el código.
Lo mejor de todo es que Playwright viene con potentes herramientas como Trace Viewer, que captura información como instantáneas del DOM y screencasts de la ejecución de la prueba que le permiten investigar el fallo de la prueba.
También viene con Codegen, que le permite generar pruebas simplemente grabando sus acciones, y Playwright Inspector, que le permite inspeccionar más a fondo las ejecuciones de sus pruebas.
Introducción a Cypress
Cypress es una herramienta de código abierto, agnóstica de la pila tecnológica, para probar de forma fiable cualquier cosa que se ejecute en un navegador web. Cypress le permite configurar, escribir, ejecutar y depurar sus pruebas.
Además, le permite escribir todo tipo de pruebas, incluidas pruebas de extremo a extremo, pruebas unitarias, pruebas de integración y pruebas de componentes. Independientemente de los lenguajes de programación que haya utilizado para escribir su aplicación web, si puede ejecutarse en un navegador, Cypress definitivamente puede probarla.
Cypress le permite viajar en el tiempo a través de sus pruebas, ya que toma instantáneas de sus pruebas a medida que se ejecutan. Esto le permite ver lo que sucedió en cada paso. Además, Cypress toma automáticamente capturas de pantalla de los fallos y vídeos de conjuntos de pruebas completos cuando se ejecutan desde la interfaz de línea común.
Cypress también le permite verificar y controlar las respuestas del servidor y el comportamiento de las funciones, además de permitirle controlar y bloquear el tráfico de red mientras ejecuta sus pruebas. Por si fuera poco, Cypress le ofrece resultados de pruebas coherentes y hace que la depuración de su aplicación sea pan comido, ya que genera errores y trazas de pila legibles.
Herramientas de automatización de pruebas: Beneficios
Algunos de los beneficios de utilizar herramientas de automatización y pruebas web como Playwright y Cypress incluyen:
Amplia cobertura de las pruebas
Herramientas como Playwright y Cypress le permiten realizar pruebas muy completas en sus aplicaciones web. Mediante el uso de herramientas de pruebas automatizadas, puede ejecutar un gran número de pruebas en su aplicación a través de una variedad de escenarios, contextos, configuraciones, navegadores y condiciones.
A diferencia de las pruebas manuales realizadas por humanos, que suelen tener una cobertura de pruebas muy baja, la automatización y las herramientas de pruebas dan como resultado una cobertura de pruebas de las aplicaciones mucho mayor. Además, le permiten ejecutar una gran variedad de pruebas en su aplicación. Esto da como resultado, a su vez, aplicaciones web mejor probadas y de mayor calidad.
Pruebas más sencillas de las aplicaciones web
Un argumento de venta clave de las pruebas web y las herramientas de automatización es que facilitan las pruebas y las convierten en una experiencia más agradable. Las pruebas manuales son muy difíciles, sobre todo si tiene que probar a fondo su aplicación en una gran variedad de navegadores y condiciones. Utilizando herramientas como Playwright y Cypress, puede hacer que el proceso de prueba de su aplicación web sea mucho más fácil y
Detección temprana de errores
Las herramientas de automatización son realmente buenas a la hora de detectar fallos en las aplicaciones web. Las herramientas de prueba pueden detectar fallos y errores que los desarrolladores pueden pasar por alto. Además, facilitan el proceso de depuración generando rastros de pila y mensajes de error legibles y tomando instantáneas de dónde se producen los errores en la aplicación web.
Pruebas más rápidas y precisas
Para probar correctamente sus aplicaciones, tiene que realizar todas las acciones que los usuarios previstos de la aplicación pueden llevar a cabo y, a continuación, replicarlas en diversos navegadores web. Este proceso puede llevar mucho tiempo si se realiza manualmente. Sin embargo, utilizando herramientas como Playwright o Cypress, puede hacer que las pruebas de sus aplicaciones sean mucho más rápidas y precisas, reduciendo así el tiempo necesario para desplegar sus aplicaciones.
Mejores informes y análisis de las pruebas
Las herramientas de pruebas automatizadas generan informes detallados de las pruebas. Esto permite a los equipos de desarrollo y pruebas realizar un seguimiento sencillo del proceso de pruebas, ver cómo se comporta una aplicación en diversos escenarios, identificar patrones y obtener informes que respalden los procesos de toma de decisiones. Estos informes y análisis también pueden utilizarse para identificar las áreas de la aplicación que deben mejorarse.
Cómo funcionan Playwright y Cypress
Al ser marcos de pruebas y automatización web, Playwright y Cypress funcionan simulando las interacciones de los usuarios con las aplicaciones web para verificar que éstas se comportan como se espera, muestran la información correcta y cumplen los requisitos de los usuarios.
Para ello, los desarrolladores y probadores utilizan la herramienta para escribir scripts que simulan las interacciones del usuario con una aplicación web, automatizando así las acciones que pueden realizar los usuarios. Por ejemplo, se pueden escribir scripts que indiquen que se pueden abrir navegadores, navegar a URL específicas, iniciar sesión en aplicaciones, rellenar formularios, hacer clic en botones y realizar diversas acciones disponibles en la aplicación web.
Los scripts que escriba determinarán el tipo de pruebas que ejecutará en su aplicación. Herramientas como Cypress le permiten ejecutar una gran variedad de pruebas, como pruebas de extremo a extremo, pruebas unitarias, pruebas de componentes y pruebas de integración.
A continuación se muestra un ejemplo de script de pruebas de Cypress:
describe('Conjunto de pruebas de ejemplo', () => {
it('Debe visitar ejemplo.com e interactuar con la página', () => {
cy.visit('https://example.com');
// Interactuar con los elementos de la página
cy.get('input[type="text"]').type('¡Hola Mundo!');
cy.get('botón[type="submit"]').click();
// Verifique que el comportamiento es el esperado
cy.title().should('eq', 'Ejemplo de dominio');
});
});
A continuación se muestra un script de prueba de Playwright de ejemplo;
const { chromium } = require('playwright');
(async () => {
// Abrir el navegador chromium
const navegador = await chromium.launch();
// Crear una página
const page = await browser.newPage();
// Abrir y acceder a una URL
await page.goto('https://example.com');
// Trabaje con los elementos de la página
await page.fill('input[type="text"]', '¡Hola Mundo!');
await page.click('botón[type="submit"]');
// Confirme si el comportamiento es el esperado
const title = await page.title();
await(title).toBe('Ejemplo de dominio');
// Cierre el navegador
await browser.close();
})();
Para interactuar con los elementos de una aplicación web, las herramientas de pruebas proporcionan selectores que le permiten describir cómo encontrar elementos específicos como botones, enlaces y campos de entrada en una aplicación web.
Una vez que pueda identificar los elementos, las herramientas de prueba proporcionan herramientas que le permiten hacer afirmaciones y determinar si los diferentes componentes de su aplicación web se comportan como se espera.
Playwright y Cypress también vienen con la capacidad de grabar y tomar instantáneas de sus pruebas. Esto le permite viajar en el tiempo hacia atrás y ver qué ocurrió exactamente en cada fase de las pruebas.
Por último, las herramientas de pruebas y automatización proporcionan resultados detallados de las pruebas, registros e informes que ayudan a identificar problemas en las aplicaciones que se están probando, a depurar y también a realizar un seguimiento de la cobertura de las pruebas.
Playwright frente a Cypress
Tanto Playwright como Cypress son herramientas de automatización de pruebas muy potentes. Sin embargo, difieren ligeramente en cuanto a las características que ofrecen. He aquí una comparación de las características que ofrece cada una de estas herramientas:
| Característica | Cypress | Playwright |
| Lenguaje de pruebas | JavaScript es el principal lenguaje utilizado para escribir pruebas. Puede probar aplicaciones escritas con cualquier lenguaje o framework siempre que la aplicación pueda ejecutarse en un navegador | Admite la escritura de pruebas utilizando TypeScript, JavaScript, Python, .NET y Java. |
| Compatibilidad con navegadores | Admite pruebas sólo en navegadores de la familia Firefox y Chrome | Admite pruebas en Firefox, navegadores de la familia Chrome y navegadores basados en WebKit |
| Soporte multipestaña | Nunca soportará pruebas a través de múltiples pestañas del navegador | Le permite ejecutar escenarios de prueba que abarcan múltiples pestañas del navegador |
| Compatibilidad con varios navegadores | No permite realizar pruebas en varios navegadores simultáneamente | Le permite realizar pruebas en varios navegadores simultáneamente |
| Pruebas multiplataforma | Cypress puede instalarse y utilizarse para realizar pruebas en Mac, Linux y Windows | Puede instalarse y utilizarse para realizar pruebas en Windows, Linux y macOS, localmente o en CI, headless o headless. |
| Capturas de pantalla y vídeos | Permite capturar pantallas y vídeos durante la ejecución de las pruebas | Permite capturar pantallas y vídeos durante la ejecución de las pruebas |
| Red Stubbing & Mocking | Soporta tanto stubbing de red como mocking de red | Admite tanto stubbing de red como mocking de red |
| Pruebas asíncronas | Espera automáticamente comandos y aserciones antes de continuar | Requiere un manejo explícito de las operaciones asíncronas mediante async/await |
| Pruebas paralelas | Puede ejecutar pruebas grabadas en paralelo en varias máquinas. No se recomienda ejecutar pruebas en paralelo en una sola máquina | Ejecuta pruebas en paralelo ejecutando varios procesos de trabajador a la vez por cada núcleo de CPU disponible. |
Casos de uso de Playwright y Cypress
Dado que las pruebas son un componente integral de cualquier ciclo de desarrollo de software, muchas empresas utilizan Cypress y Playwright.
Por ejemplo, DHL, una empresa de logística, necesitaba una forma de acelerar el despliegue de sus soluciones de software sin comprometer la calidad de las mismas. Para lograrlo, utilizaron Cypress, que les permitió aumentar sus ejecuciones de pruebas y su cobertura, mejorar su cultura de pruebas frontales y también lograr tiempos de ejecución de pruebas un 65% más rápidos.
Spotahome, un servicio online de reserva de casas en Europa, también utiliza Cypress en sus pruebas. Esto les ha permitido probar más de 160 escenarios, conseguir realizar 250 despliegues cada semana, ejecutar más de 130 pruebas semanales y utilizar la paralelización para ahorrar un 70 por ciento del tiempo dedicado a las pruebas.
Gatsby, un generador de sitios de código abierto para construir sitios web y aplicaciones, ha podido aceptar más contribuciones de código abierto gracias a la utilización de Cypress para las pruebas. Al utilizar Cypress, Gatsby ha estado enviando más funciones antes y con más frecuencia, reduciendo la antigüedad acumulada de las relaciones públicas abiertas en un 54 por ciento y aumentando la confianza y la fiabilidad.
Playwright es también uno de los favoritos entre empresas, startups y proyectos de código abierto. Aplicaciones como Visual Studio Code, Bing, Outlook y Disney Hotstars utilizan Playwright para probar sus aplicaciones y garantizar el lanzamiento de aplicaciones de calidad.
Proyectos de código abierto como Material UI, Adobe Spectrum web components, Lion y React Navigation utilizan Playwright para las pruebas web y la automatización.
Conclusión
Las pruebas son un paso crucial en el desarrollo de software y nunca deben ignorarse si se quiere lanzar un software de calidad que cumpla los requisitos de los usuarios. Como demuestran los casos de uso destacados, las pruebas aportan muchos beneficios al rendimiento general de una empresa o de un software.
En cuanto a la selección de la herramienta de pruebas, tanto Cypress como Playwright son herramientas de pruebas y automatización web muy sólidas y robustas.
En caso de que desee una herramienta que le permita ejecutar fácilmente pruebas en paralelo, a través de múltiples pestañas, escribir sus pruebas en una variedad de lenguajes de programación, ejecutar pruebas a través de todos los navegadores populares y acceder a funciones avanzadas, Playwright es la herramienta que debe elegir.
Si sus pruebas se centran más en probar el front-end, en particular los desarrollados utilizando marcos de JavaScript como Angular, Vue y React, Cypress debe ser su herramienta de elección.
También debería ser su herramienta de pruebas de elección si desea un rendimiento muy rápido, desarrollo impulsado por pruebas, desarrollo local y depuración y también necesita una herramienta fiable que funcione bien con proyectos de tamaño pequeño a mediano.