Playwright with TypeScript | Setup Environment & Writing Tests ( Session 1)

¿Cómo comenzar con la automatización en Playwright?

Introducción a la clase

• Se inicia la clase sobre automatización con Playwright, donde se abordará la configuración del entorno y los archivos necesarios para el proyecto.

• Se recomienda revisar la documentación oficial de Playwright, que es detallada y accesible en su sitio web.

Documentación y recursos

• La documentación incluye información sobre instalación, escritura de pruebas, generación de pruebas y configuración de CI. Es fundamental para aprender a usar Playwright.

• Se enfatiza que todos deben consultar la documentación antes de discutir cualquier tema relacionado con Playwright.

Instalación de Node.js

• Para utilizar Playwright, es necesario tener instalado Node.js, ya que es un proyecto basado en JavaScript/TypeScript.

• Se menciona que si ya se ha trabajado con TypeScript, probablemente ya se tenga Node.js instalado.

Requisitos previos

• Los dos requisitos principales son:

• Tener Node.js instalado.

• Usar un editor como Visual Studio Code (VS Code).

Proceso de instalación

• Para instalar Node.js, se debe descargar el instalador desde su página oficial y seguir el proceso estándar de instalación.

• Una vez instalado Node.js, se debe verificar su correcta instalación usando el comando node -v en la línea de comandos.

Instalación del editor VS Code

• VS Code también es gratuito y no requiere licencia. Su instalación sigue un proceso similar al de Node.js.

• No es necesario instalar TypeScript por separado para usar Playwright; este último lo incluirá automáticamente durante su instalación.

Instalación y Configuración de Playwright

Creación del Proyecto en VS Code

• Se inicia la instalación de Playwright abriendo el editor VS Code y creando una nueva carpeta para los demos de Playwright, llamada "PW demos".

• Es importante abrir esta nueva carpeta en VS Code, ya que no se pueden mantener múltiples proyectos dentro de un solo espacio de trabajo.

• La carpeta creada está vacía y necesita ser configurada para usar Playwright. Se requiere tener NodeJS y el editor VS Code instalados previamente.

Instalación de Playwright

• Para instalar Playwright, se utiliza el comando npm init playwright@latest, que permite inicializar el proyecto con la última versión disponible.

• Al ejecutar este comando, se presentan instrucciones sobre cómo comenzar a escribir pruebas end-to-end con Playwright, preguntando si se desea utilizar TypeScript o JavaScript.

Selección de Lenguaje y Estructura del Proyecto

• Por defecto, TypeScript es la opción seleccionada; sin embargo, se puede cambiar utilizando las teclas de flecha en el teclado.

• Se solicita especificar una carpeta para almacenar las pruebas; por defecto, se sugiere una carpeta llamada "test".

Opciones Adicionales Durante la Instalación

• Se menciona la posibilidad de agregar un flujo de trabajo para GitHub Actions para automatizar procesos relacionados con el código. Esta opción está desactivada por defecto.

• El proceso continúa pidiendo confirmaciones sobre comandos adicionales necesarios para completar la instalación.

Finalización e Importancia del Comando

• Una vez completado el proceso inicial, se indica que los navegadores necesarios también serán instalados automáticamente junto con Playwright.

• Los navegadores soportados incluyen Chromium, WebKit y Firefox. La instalación puede hacerse manualmente más tarde si es necesario.

• Al finalizar la configuración exitosa del proyecto en "C:automationpw", se proporcionan comandos importantes como npx playwright test para ejecutar todas las pruebas a la vez.

Este resumen proporciona una guía clara sobre cómo iniciar un proyecto utilizando Playwright desde cero en Visual Studio Code.

Instalación y Estructura de Playwright

Proceso de Instalación

• Para instalar Playwright, se utiliza un solo comando: npm init playwright@latest. Este comando es suficiente si ya tienes instalado el editor VS Code y NodeJS.

• Después de ejecutar el comando, se debe crear una nueva carpeta en VS Code para que la instalación se realice correctamente.

Estructura de Carpetas

• Al instalar Playwright, se genera automáticamente una estructura de carpetas que incluye node_modules, donde se encuentran todos los paquetes relacionados con Playwright.

• Es crucial crear todos los tests dentro de la carpeta test, donde también hay un archivo de ejemplo llamado example.spec.ts que sirve como referencia para nuevos archivos de prueba.

Archivos Importantes

• El archivo playwright.config.ts es fundamental para la configuración del entorno. Permite ajustar configuraciones como los navegadores soportados (Chromium, Firefox y WebKit).

• Se pueden deshabilitar navegadores específicos en la configuración si no se desea ejecutar pruebas en todos ellos simultáneamente.

Configuraciones Adicionales

• En el archivo de configuración también puedes especificar otros navegadores como Chrome móvil o Microsoft Edge, así como definir el directorio donde están ubicadas las pruebas.

• La opción para ejecutar pruebas en paralelo puede ser habilitada o deshabilitada según sea necesario.

Comparación con Maven

• Al igual que Maven utiliza un archivo pom.xml para gestionar dependencias en proyectos Java, Playwright usa package.json para manejar las dependencias necesarias en proyectos basados en NodeJS.

• Este archivo contiene información básica del proyecto y permite agregar más dependencias a medida que sean requeridas.

Estructura Final del Proyecto

• La estructura final del proyecto después de la instalación incluye carpetas como node_modules, test, y archivos esenciales como package.json y playwright.config.ts.

• Una vez completada la instalación, recibirás un mensaje indicando "happy hacking", lo cual confirma que todo ha sido instalado correctamente.

Instalación y Configuración de Playwright

Creación del Proyecto en NodeJS

• Al crear un proyecto basado en NodeJS, se genera un archivo package.json. Es importante seguir el proceso de instalación específico para cada carpeta del proyecto.

• Después de configurar el entorno, se ejecuta el comando npm init playwright@latest, lo que crea las carpetas necesarias como package.json, playwright.config.js y la carpeta de pruebas.

Comandos Importantes

• Para verificar la versión instalada de Playwright, se utiliza el comando npx playwright -v. Este comando debe ejecutarse en la terminal del proyecto.

• Si surgen problemas relacionados con permisos durante la instalación, estos serán abordados más adelante. La clave es seguir correctamente las instrucciones.

Estructura del Proyecto y Archivos de Prueba

• Se explica que npx es un ejecutor de paquetes de Node, mientras que npm es un gestor. Se utilizan ambos para instalar y ejecutar paquetes respectivamente.

• Los archivos de prueba deben crearse dentro de la carpeta designada (test). Esto es crucial ya que Playwright busca los casos de prueba únicamente en esta ubicación.

Creación y Escritura de Casos de Prueba

• Al crear nuevos archivos para pruebas, se recomienda usar extensiones .spec.js o .spec.ts, dependiendo si se usa JavaScript o TypeScript.

• Para escribir pruebas en Playwright, se deben importar dos funciones esenciales: test y expect. Estas funciones son fundamentales para definir los casos y realizar validaciones.

Importación y Uso de Funciones

• Las funciones importadas provienen del módulo @playwright/test, ubicado dentro del directorio node_modules.

• El primer paso al crear una nueva prueba es importar las funciones necesarias. Luego, al utilizar la función test, se definen dos parámetros: el título del test y una función callback donde se escribe la lógica del caso.

¿Cómo escribir pruebas en Playwright?

Sintaxis básica para escribir pruebas

• Se puede utilizar una función de flecha o una función normal (anónima o nombrada) como segundo parámetro al definir una prueba.

• La sintaxis incluye especificar el título de la prueba y los pasos a seguir dentro de un bloque delimitado por llaves.

• Es posible incluir múltiples bloques de prueba en un solo archivo, permitiendo así la creación de varios casos de prueba.

Implementación del caso de prueba

• Para implementar un caso de prueba, se debe abrir una página web y verificar el título y la URL.

• El primer paso es lanzar la página web utilizando el fixture llamado "page", que es esencial para realizar acciones sobre la misma.

Concepto de Fixture en Playwright

• Un fixture es una variable global accesible en todo el proyecto Playwright; ejemplos incluyen "page" y "browser".

• El fixture "page" representa una página específica dentro del navegador, mientras que "browser" representa todo el navegador.

Uso del Fixture Page

• El fixture "page" permite realizar todas las acciones necesarias, como lanzar URLs y validar títulos.

• Es obligatorio envolver el nombre del fixture entre llaves para acceder a su valor correctamente dentro de la función.

Acceso a parámetros dentro de funciones

• Los parámetros pasados al arrow function pueden ser utilizados dentro de ella, lo que permite ejecutar diversas operaciones con el fixture.

• Se enfatiza que primero se debe entender cómo usar el fixture "page" antes de abordar otros conceptos relacionados con el navegador.

¿Cómo lanzar una URL y verificar el título de la página?

Introducción a la configuración del navegador

• Se menciona que se realizarán varias configuraciones dentro del navegador, pero por ahora solo se está hablando de la página. Se asegura que cada parte será explicada en detalle más adelante.

Uso del fixture de página

• Se introduce el concepto de "fixture" de página, necesario para lanzar URLs y realizar validaciones en la misma. Este es un paso crucial para iniciar las pruebas automatizadas.

Métodos disponibles en el objeto página

• Al acceder al objeto page, se pueden utilizar múltiples métodos necesarios para la automatización. El primer paso es lanzar una URL utilizando el método go to.

Configuración predeterminada de navegadores

• Si no se especifica un navegador, por defecto se ejecutarán las pruebas en Chromium, Firefox y WebKit (Safari). Esto se determina a partir del archivo de configuración.

Verificación del título de la página

• Después de abrir la URL, se debe verificar el título mediante una aserción usando expect. Esta función permite comprobar si el título coincide con lo esperado ("my shop").

Captura y visualización del título

• Para imprimir el título en consola, se utiliza el método title disponible en el objeto page. Esto permite almacenar y mostrar el título actual como una cadena.

Promesas y asincronía en JavaScript

• Es importante entender que todos los pasos dentro de las pruebas devuelven promesas. Se introducen conceptos clave como "asincrónico" y "sincrónico", fundamentales para manejar operaciones asíncronas en JavaScript y TypeScript.

¿Qué es la naturaleza sincrónica y asincrónica en programación?

Naturaleza Sincrónica

• La naturaleza sincrónica implica que las tareas se ejecutan una tras otra. Por ejemplo, en JavaScript o TypeScript, el paso uno debe completarse antes de que comience el paso dos.

• Lenguajes como Java y Python siguen estrictamente esta naturaleza sincrónica, donde no se inicia un nuevo paso hasta que el anterior ha finalizado.

• En JavaScript, ciertas declaraciones como console.log también son sincrónicas; se ejecutan secuencialmente y no realizan tareas en segundo plano.

Naturaleza Asincrónica

• La naturaleza asincrónica permite que múltiples pasos se inicien sin esperar a que los anteriores terminen. Por ejemplo, si el paso uno está realizando una tarea en segundo plano, el paso dos puede comenzar inmediatamente.

• Las funciones o métodos en JavaScript y TypeScript pueden seguir esta naturaleza asincrónica cuando están involucrados con recursos externos o tareas de fondo.

Problemas con la Programación Asincrónica

• Un problema común es la dependencia entre pasos. Si el paso uno necesita completarse para que el paso dos pueda ejecutarse (por ejemplo, al buscar datos en una base de datos), esto puede complicar la ejecución asincrónica.

• En situaciones donde ambos pasos requieren acceso a la misma información (como verificar si un usuario está activo), hay una dependencia crítica entre ellos.

Soluciones a Problemas Asincrónicos

• Para resolver problemas de programación asincrónica, es necesario esperar a que las tareas previas se completen antes de proceder con las siguientes. Esto puede implicar manejar promesas.

• Una "promesa" representa una tarea que se realiza en segundo plano; su estado puede ser exitoso o fallido dependiendo del resultado de esa tarea.

¿Qué es una Promesa en Programación?

Concepto de Promesas

• Una promesa es una garantía sobre la finalización de una tarea, que puede ser resuelta (exitosa) o rechazada (fallida).

• Al iniciar un trabajo en segundo plano, se devuelve una promesa que indica si la tarea fue exitosa o no. Si se resuelve, se considera "promesa resuelta"; si no, "promesa rechazada".

Funcionamiento de las Promesas

• Cuando se ejecuta un paso en el código, este debe esperar a que el paso anterior complete su ejecución. Esto se logra utilizando await.

• La declaración await espera hasta que la promesa del paso anterior esté completada antes de continuar con el siguiente paso.

Manejo de Errores y Tiempos de Espera

• Si una promesa es rechazada, el sistema esperará un máximo de 30 segundos antes de lanzar un error y omitir los pasos restantes.

• No es necesario usar await para funciones como console.log, ya que estas no devuelven promesas ni realizan tareas en segundo plano.

Aplicación Práctica en Scripts de Automatización

• En scripts de automatización, cada instrucción generalmente devuelve una promesa debido a las actividades en segundo plano involucradas.

• Es esencial utilizar await para cada instrucción dentro del código automatizado para asegurar que todas las tareas sean completadas correctamente.

Reglas sobre Async y Await

• Al usar await, también es necesario definir la función como asíncrona utilizando la palabra clave async. Sin esto, await no tendrá efecto.

• Existe una relación fuerte entre async y await; solo se utiliza await cuando hay naturaleza asíncrona presente en las declaraciones dentro de la función.

¿Qué es la programación síncrona y asíncrona?

Conceptos Básicos

• Es fundamental entender la diferencia entre programación síncrona y asíncrona, especialmente al trabajar con JavaScript y TypeScript. La primera pregunta que se suele hacer es sobre el uso de async y await.

• Cada declaración en un código puede devolver una promesa. Si una declaración devuelve una promesa, se debe utilizar await para esperar su resolución antes de continuar con la siguiente declaración.

Pruebas en Playwright

• Al escribir pruebas, es recomendable tener solo una afirmación por prueba. Si se necesitan verificar múltiples cosas, se deben crear funciones de prueba separadas.

• Incluir múltiples afirmaciones en una sola función puede causar problemas si la primera falla; las siguientes no se ejecutarán, lo que limita la efectividad de las pruebas.

Ejecución de Pruebas

• Para ejecutar pruebas en Playwright, se utiliza el comando npx playwright test. Este comando ejecutará todas las pruebas dentro del directorio especificado.

• Al ejecutar el comando sin especificar un archivo particular, todas las pruebas en la carpeta de pruebas serán ejecutadas automáticamente.

Modo Headless

• Por defecto, Playwright opera en modo "headless", lo que significa que las pruebas se ejecutan en segundo plano sin mostrar ninguna interfaz gráfica.

• El modo headless permite ejecutar múltiples instancias del navegador simultáneamente sin necesidad de visualización directa.

Uso de Workers

• Un "worker" representa una instancia única del navegador. En este caso específico, hay ocho workers utilizados para ejecutar nueve pruebas diferentes.

• Cada prueba puede ser ejecutada varias veces (en diferentes navegadores), lo que explica por qué hay más tests que workers disponibles. Esto optimiza el tiempo total de ejecución al permitir paralelismo.

Estos puntos resumen los conceptos clave discutidos sobre programación asíncrona y cómo realizar pruebas eficaces utilizando Playwright.

¿Cómo se generan y visualizan los informes en Playwright?

Generación de Informes HTML por Defecto

• Por defecto, Playwright genera un informe HTML que incluye todos los tests ejecutados. Se menciona que hay nueve tests, pero esto incluye tanto pruebas de la aplicación demo como pruebas predeterminadas.

• Se eliminan las pruebas de muestra para enfocarse en una única prueba. Después de eliminar estas muestras, solo queda un archivo de prueba con una sola prueba.

• Al ejecutar la prueba nuevamente, se observa que aunque solo hay una prueba definida, el sistema reporta tres pruebas porque cada navegador (Chrome, Firefox y WebKit) ejecuta la misma prueba.

Ejecución y Resultados de Pruebas

• Cada navegador cuenta como una ejecución separada; por lo tanto, si se ejecutan tres navegadores, se reportan tres pruebas pasadas. Si alguna falla ocurre en cualquiera de los navegadores, se indicará en el informe.

• El informe HTML generado por defecto almacena resultados en formato JSON. Para visualizarlo correctamente, es necesario usar el comando npx playwright show-report, que abrirá el informe HTML correspondiente.

Visualización del Informe HTML

• El informe HTML muestra detalles sobre las ejecuciones: todas las pruebas pasaron sin fallos ni omisiones. Se pueden expandir para ver información específica sobre cada navegador utilizado durante la ejecución.

• Al hacer clic en cada sección del informe, se puede observar el tiempo total y los pasos específicos que fueron ejecutados durante la prueba.

Modo Encabezado vs Modo Sin Cabeza

• Las pruebas pueden ser ejecutadas en modo "sin cabeza" (headless), donde no se visualiza la interfaz gráfica. Para ver la UI durante las ejecuciones, es necesario usar npx playwright test --headed.

• En modo encabezado (headed), todas las interfaces gráficas de los navegadores se lanzan simultáneamente y permiten observar cómo se realizan las pruebas visualmente.

Manejo de Múltiples Archivos de Prueba

• Se introduce un segundo archivo de prueba (my_test_2.spec.ts) para demostrar cómo manejar múltiples archivos dentro del mismo proyecto. Esto permite organizar mejor las validaciones realizadas.

• En lugar de verificar títulos de páginas web, ahora se valida la URL actual utilizando métodos predefinidos para asegurar que coincida con lo esperado.

Validaciones Específicas

• La validación ahora implica comprobar partes específicas de la URL usando expresiones regulares para mayor flexibilidad al verificar coincidencias parciales dentro del enlace completo.

• Se discuten diferentes aserciones disponibles en Playwright para validar condiciones específicas dentro del contexto del testeo automatizado.

Ejecución de Pruebas con Playwright

Configuración y Ejecución de Pruebas

• Se discute cómo verificar la URL de una página en las pruebas, enfatizando que la cadena debe estar presente en la URL para que pase la verificación.

• Al ejecutar npx playwright test, se ejecutan todos los archivos de prueba por defecto. En este caso, hay dos archivos con un total de seis pruebas ejecutadas (dos pruebas en tres navegadores).

• Para ejecutar una prueba específica, se puede usar el comando npx playwright test seguido del nombre del archivo específico, lo que permite enfocarse solo en esa prueba.

• Si se desea ejecutar solo una prueba en un navegador específico (por ejemplo, Chromium o Firefox), se puede especificar el proyecto usando --project=<nombre_del_navegador>.

• El comando para ejecutar pruebas específicas también permite seleccionar múltiples archivos al listar sus nombres después del comando.

Opciones Avanzadas para Ejecutar Múltiples Pruebas

• Se pueden especificar múltiples nombres de archivos al ejecutar pruebas. Por ejemplo: npx playwright test my_test1.spec.ts my_test2.spec.ts.

• Al no especificar ningún modo o trabajador adicional, ambas pruebas se ejecutan por defecto en seis trabajadores.

Filtrado por Títulos de Prueba

• Se introduce la opción --grep para filtrar las pruebas basándose en palabras clave dentro del título. Por ejemplo, si se usa --grep verify, solo las pruebas cuyos títulos contengan "verify" serán ejecutadas.

• La palabra clave utilizada con --grep actúa como un filtro global; si coincide con el título de cualquier prueba, esta será incluida en la ejecución.

• Si se cambia la palabra clave a algo que no coincida con todas las pruebas (como "title"), solo aquellas que contengan ese término específico serán ejecutadas.

Este resumen proporciona una visión clara sobre cómo utilizar Playwright para gestionar y ejecutar diferentes tipos de pruebas, así como opciones avanzadas para personalizar su ejecución según necesidades específicas.

¿Cómo ejecutar pruebas en modo UI con Playwright?

Introducción al Modo UI

• Se plantea la necesidad de ejecutar pruebas en modo UI, utilizando un título simple y especificando algunas palabras clave.

• Para ejecutar las pruebas en modo UI, se utiliza el comando npx playwright test, que ejecuta todas las pruebas en todos los navegadores por defecto.

Ejecución de Pruebas en Modo UI

• Al usar el comando npx playwright test --ui, se abre la interfaz gráfica de Playwright, permitiendo observar las pruebas disponibles.

• La interfaz permite seleccionar y ejecutar pruebas específicas haciendo clic en un ícono de flecha. Se puede ver cómo se ejecutan las pruebas directamente desde la ventana del UI.

Ventajas del Modo UI

• El modo UI captura información detallada sobre cada prueba, incluyendo registros, errores y redes. Esto es especialmente útil para pruebas complejas.

• La función de "time travel" permite retroceder y avanzar a través de los pasos de ejecución, mostrando interacciones con elementos específicos.

Ejecución y Depuración de Pruebas

• Se menciona que hay una opción para depurar paso a paso usando el comando npx playwright test --debug, lo que abre una nueva ventana para observar la ejecución detallada.

• Durante la depuración, se pueden detener las ejecuciones en líneas específicas y continuar paso a paso para verificar resultados.

Comandos Adicionales y Consideraciones

• Existen múltiples comandos para ejecutar diferentes tipos de pruebas: en modo encabezado, en diferentes navegadores o solo aquellas que fallaron previamente.

• Se discute qué sucede si no se utiliza await al manejar promesas; esto puede resultar en errores debido a asignaciones incorrectas.

Introducción a Playwright y Promesas

Ejecución de Pruebas con Promesas

• Se inicia la ejecución de una prueba utilizando npx playwright test my test dotspec.ts, observando que el título devuelve una promesa sin usar await, lo que resulta en una promesa pendiente.

• La afirmación se ejecuta antes de que la promesa del título se resuelva, lo que permite que la afirmación pase debido al uso de await en la obtención del título de la página.

• Sin el uso de await, no se puede imprimir el título porque no se espera a que la tarea en segundo plano complete su ejecución.

Importancia del Uso de Await

• Al incluir await, ahora se obtiene correctamente el valor del título, demostrando cómo trabajar adecuadamente con pruebas en Playwright.

• Se menciona un documento adicional donde se explican los comandos y conceptos como async y await, sugiriendo revisarlo para entender mejor su aplicación.

Arquitectura de Herramientas de Automatización

Comparativa entre Selenium y Playwright

• Se discute cómo cada herramienta tiene su propia arquitectura; Playwright utiliza WebSocket mientras que Selenium usa el protocolo W3C, realizando llamadas HTTP internas.

• En Selenium, cada método abre y cierra una conexión por separado para cada comando, lo cual afecta negativamente al rendimiento debido a las múltiples conexiones necesarias.

Eficiencia del Protocolo WebSocket

• A diferencia de Selenium, Playwright solo abre una conexión única para ejecutar todos los métodos antes de cerrarla, mejorando así el rendimiento general.

• El uso del protocolo WebSocket permite ejecutar múltiples comandos sin necesidad de abrir y cerrar conexiones repetidamente, lo cual es más eficiente.

Resumen sobre Conexiones

• En resumen, mientras Selenium requiere abrir y cerrar conexiones constantemente para cada método (lo que ralentiza su rendimiento), Playwright optimiza este proceso mediante una única conexión durante toda la ejecución.

• La diferencia clave radica en cómo ambos protocolos manejan las conexiones: HTTP establece nuevas conexiones para cada solicitud/respuesta, mientras que WebSocket mantiene una conexión persistente.

Diferencias entre Selenium y Playwright

Arquitectura de Comunicación

• La tasa de reproducción en Playwright utiliza websockets en lugar de HTTP para interactuar con los clientes y servidores, lo que permite enviar solicitudes continuas sin terminar la conexión, aumentando así la velocidad.

• Esta diferencia es fundamental al comparar las arquitecturas de Selenium y Playwright; Selenium utiliza el protocolo W3C junto con solicitudes HTTP, mientras que Playwright se basa en el protocolo websocket.

Interacción Directa con Navegadores

• En Playwright no hay controladores específicos para navegadores; la herramienta se comunica directamente con los navegadores, simplificando su uso.

Práctica Recomendada

• Se recomienda realizar una práctica básica: instalar Playwright, ejecutar un script simple y probar diferentes modos como modo UI, modo depuración e informes.