Prueba de aplicaciones web con Node.js y Playwright

El desarrollo de aplicaciones modernas depende de pruebas automatizadas, utilizando marcos de prueba para garantizar que el código esté listo para integrarse en los paquetes de aplicaciones y para los usuarios finales. Para aprovechar al máximo las pruebas, las pruebas se escriben antes del código y se pueden integrar en el control de código fuente y las canalizaciones de CI / CD (integración continua / implementación continua). Las pruebas deben estar en todas partes en su proceso de desarrollo. ¿Necesita fusionar una solicitud de extracción? Prueba el código. ¿Necesitas comprometerte con una sucursal? Prueba el código.

Pero hay un área en la que las pruebas son difíciles, especialmente cuando es necesario automatizarlas. Estoy hablando de la necesidad de interactuar y probar interfaces de usuario dinámicas. La prueba de aplicaciones web es un proceso complejo. Herramientas como Selenium y webdriver son elementos clave para automatizar el contenido de la página y para garantizar que está probando tanto los elementos de la página como la aplicación en su conjunto. Son importantes si está utilizando navegadores sin cabeza en una aplicación; He estado usando un conjunto de scripts de Python en una aplicación de Twitter construida alrededor del soporte del controlador web de Selenium y Chromium para automatizar la toma de capturas de pantalla desde una aplicación de seguimiento de aeronaves.

Presentamos Playwright, el marco de pruebas web de Microsoft

Selenium y webdriver no son las únicas herramientas para crear pruebas de extremo a extremo para navegadores y aplicaciones web modernas. Una alternativa popular es Puppeteer de Google, que maneja tanto el envío de clics a los navegadores utilizando las mismas técnicas que las herramientas del controlador web de Chrome como el acceso a la información de depuración a través de las API de herramientas de desarrollo conocidas. Un participante más reciente en la liga de pruebas de navegadores, Playwright está siendo desarrollado por Microsoft como un proyecto de código abierto alojado en GitHub.

Dramaturgo toma la arquitectura básica de Puppeteer y la mueve más en la dirección de Selenium, agregando un marco de automatización web y mejorando la forma en que Puppeteer interactúa con el contenido de la página. Está diseñado para instalarse rápida y fácilmente utilizando la sintaxis npm familiar, utilizando JavaScript para crear automatización y pruebas de aplicaciones web. Funciona con más navegadores, con soporte para navegadores basados ​​en Chromium como Edge, así como Firefox y WebKit de Apple.

Hay un mensaje importante en la lista de navegadores compatibles de Playwright: no puede usarlo con navegadores basados ​​en Trident o EdgeHTML. No es sorprendente. Microsoft ha hecho un firme compromiso con su rama Chromium en su nuevo Edge, y tanto el antiguo Edge como Internet Explorer están cerca del final de su vida útil. Si va a utilizar Playwright para realizar pruebas, está tomando la decisión de admitir solo los navegadores modernos convencionales, por lo que deberá informar a los usuarios de lo que está reservado para futuras versiones de cualquier aplicación web que esté creando y apoyando.

Probando la web con Dramaturgo

La capacidad de realizar pruebas multiplataforma en todos los navegadores principales con el mismo conjunto de scripts es importante, al igual que la compatibilidad con las versiones móviles de los sitios (ya que las dos principales plataformas móviles utilizan variantes de sus navegadores de escritorio Playwright actualmente emula las vistas móviles en los navegadores de escritorio ). También es importante la compatibilidad con las pruebas sin cabeza, en las que no se representa la interfaz de usuario del navegador, sino que se trabaja con el modelo de objeto de documento generado (y un DOM en la sombra si se utilizan tecnologías y funciones de navegador modernas como componentes web).

Puede usar Playwright para automatizar un navegador en ejecución en escritorios de desarrollo para inspeccionar errores como parte de la depuración de la aplicación, lo que garantiza que ejecute constantemente todas las rutas de prueba mientras registra información de rendimiento adicional y observa fallas en la interfaz de usuario sin seguimiento. Alternativamente, se puede configurar como parte de una acción de GitHub para probar código nuevo como parte de una confirmación o fusión, automatizando lo que de otro modo podría ser una prueba manual compleja.

Creación y ejecución de pruebas de dramaturgo

Comenzar con Playwright es tan fácil como configurar un nuevo proyecto de Node.js. Primero, instale Node.js en sus dispositivos de prueba. Dado que Playwright usa Node, puede ejecutarlo en PC de desarrollo o en servidores en su canal de CI / CD, lo que lo convierte en parte de una acción de GitHub que se puede usar en todo el proceso de desarrollo de software. Todo lo que necesita es un solo comando npm, que instala el paquete Playwright, así como los binarios para todos los navegadores compatibles. Con la instalación completa, puede crear scripts de automatización usando JavaScript o TypeScript para llamar a las API de Playwright. Todas estas son llamadas asincrónicas, así que use las declaraciones de espera para administrar sus promesas.

El resultado es una forma muy clara de crear scripts, comenzando con la apertura de una instancia del navegador sin cabeza y luego navegando a una página antes de interactuar con las instancias de la página. Es una buena idea crear inicialmente pruebas con navegadores completos para que pueda seguir cómo Playwright interactúa con su aplicación. Una útil opción de cámara lenta ejecuta las interacciones a una velocidad más humana, lo que facilita la visualización y la gestión de las pruebas que se ejecutan en los navegadores de escritorio. Una vez que se ha depurado una prueba y se está ejecutando bien, puede moverla al modo sin cabeza y luego ejecutarla como parte de una implementación de CI / CD.

Playwright incluye una herramienta CLI que puede registrar interacciones con sitios, generando automáticamente el JavaScript necesario para ejecutar pruebas. La opción codegen es una herramienta útil para comenzar rápidamente con Playwright, mostrándole el código que interactúa con los elementos de la página que luego puede usar como plantilla para sus propias pruebas, copiando y editando el código generado según sea necesario. La compatibilidad con TypeScript puede ayudar a escribir pruebas más complejas, utilizando un tipo fuerte para administrar las variables.

Trabajar con aplicaciones web en Dramaturgo

Una de las características más útiles de Playwright es su soporte para contextos de navegador. Estos le permiten ejecutar acciones aisladas en una sola instancia de navegador, por lo que puede configurar varios contextos para probar varias interacciones al mismo tiempo. Dentro de cada contexto, crea páginas, que se consideran pestañas en un navegador de escritorio. Las páginas admiten sus propias interacciones de clic y se pueden monitorear en paralelo. Una vez que esté en una página, puede usar diferentes formas de encontrar contenido para interactuar, usando selectores CSS o XPath, atributos HTML o texto. Si está familiarizado con Selenium, debería familiarizarse con la navegación por las páginas, con la capacidad adicional de esperar a que una página se cargue por completo o que el contenido dinámico se represente en una aplicación web de una sola página.

Puede utilizar funciones de evaluación para enviar parámetros desde y hacia páginas web al código JavaScript que se ejecuta en el contexto de la página. Los resultados se devuelven a un ejecutor de scripts de prueba en Node.js para su análisis, lo que le brinda las herramientas necesarias para aprobar o reprobar las pruebas. Dramaturgo trabaja con las herramientas de desarrollo del navegador F12, por lo que puede hacer mucho más que simplemente interactuar con el contenido de la página. Puede monitorear el tráfico de la red, por lo que puede usarlo para probar tanto la autenticación como la descarga de archivos, entre otras cosas. Puede acceder a la consola del navegador y registrar errores que pueden no ser inmediatamente visibles en una página renderizada: por ejemplo, rastrear problemas de CSS o bibliotecas de JavaScript que no se cargan.

Hay mucho en Playwright, y es una alternativa convincente a Selenium para probar aplicaciones de navegador. Con Microsoft agregando continuamente a las herramientas de desarrollo F12 en Edge, será interesante ver a Playwright agregar nuevas características que amplían sus opciones para probar aplicaciones alojadas en el navegador y aplicaciones web progresivas junto con aplicaciones web tradicionales.

Más allá de JavaScript: pruebas en Python y C #

Microsoft lanzó recientemente una nueva versión de Playwright para desarrolladores que prefieren crear pruebas en Python en lugar de JavaScript. Es una opción útil, ya que muchos marcos de prueba de Selenium existentes están basados ​​en Python y le permite vincular su código de prueba a paquetes analíticos para un análisis de resultados más detallado utilizando el rico ecosistema de aplicaciones y herramientas estadísticas de Python.

Playwright incluye enlaces de idioma para C #, por lo que puede incorporar Playwright a los marcos de prueba existentes para ASP.NET u otras herramientas .NET. No debería tener que cambiar la forma en que trabaja para incorporar nuevas herramientas, y Microsoft promete enlaces de lenguaje adicionales para Java y Ruby. Existe la posibilidad de más en el futuro, ya que la documentación de Dramaturgo afirma que está diseñada para admitir enlaces para cualquier idioma. Con todo el código en GitHub, existe la oportunidad de crear sus propios enlaces para el idioma de prueba de su elección y enviarlos como una solicitud de extracción al proyecto.