Ejercicio: Uso de Playwright en Visual Studio Code
En la sección anterior, hemos recorrido los conceptos básicos relacionados con la configuración de pruebas de Playwright y la especificación de prueba de Playwright, pero usamos la línea de comandos playwright (CLI) para ejecutar nuestras pruebas y ver informes.
¿Qué ocurre si podríamos hacerlo en nuestro entorno de Visual Studio Code y tener un proceso de interacción más visual para crear, ejecutar y depurar, nuestras pruebas?
Con la extensión Playwright Test for Visual Studio Code, obtendrá una experiencia de desarrollador superior y algunas características de herramientas únicas que podrían hacer que su manera preferida de interactuar con el ejecutor de pruebas de Playwright. Echemos un vistazo a eso y realicemos una visita guiada.
Cómo empezar
La documentación de Playwright tiene un tutorial completo con el recorrido en vídeo que le recomendamos ver a su conveniencia. En esta lección, trataremos de cubrir un subconjunto de los ejercicios para que pueda familiarizarse con Playwright.
]
Instalación de la extensión Playwright
Instale la extensión desde Marketplace de Visual Studio Code. Una vez instalado, debe detectar un icono de beaker en el lado izquierdo de la ventana de Visual Studio Code, como se muestra en la captura de pantalla. Observe cómo la extensión detecta y recopila automáticamente las especificaciones de prueba del proyecto.
Ejecutar pruebas (sin interfaz gráfica)
Para ejecutar pruebas de forma sin encabezado (sin ventana del explorador), asegúrese de que las opciones Mostrar explorador y Mostrar visor de seguimiento están desactivadas. Seleccione el botón de reproducción verde en la línea 3 del archivo example.spec.ts para ejecutar la primera prueba. También puede seleccionar los botones grises de reproducir en la barra lateral del Explorador de pruebas para ejecutar todas las pruebas del archivo o para ejecutar una prueba específica.
Una vez ejecutadas las pruebas, la pestaña Resultados de pruebas abre una ventana en la que puede ver todo el historial de ejecuciones de pruebas. También puede explorar en profundidad una prueba y seleccionar Ejecutar prueba para volver a ejecutar esa prueba específica.
Mostrar explorador (encabezado)
Si desea ejecutar en modo encabezado , lo que significa ejecutar las pruebas con una ventana del explorador abierta, puede activar la casilla Mostrar explorador antes de ejecutar las pruebas.
Playwright es un usuario muy rápido, lo que puede dificultar el seguimiento de lo que sucede en la prueba al usar mostrar explorador. Para depuración, recomendamos usar la opción Mostrar visor de seguimiento.
Mostrar el visor de seguimiento (con interfaz gráfica)
Active el cuadro Mostrar visor de seguimiento y active el botón de reproducción verde para la segunda prueba. Esto inicia la ventana del visor de seguimiento, que muestra una representación visual de la ejecución de la prueba.
En la parte superior, verá una escala de tiempo de la prueba sobre la que puede mantener el puntero para ver el estado del explorador. Para seleccionar un intervalo de tiempo específico en el que centrarse, seleccione y arrastre la escala de tiempo.
En la barra lateral izquierda, puede ver las acciones que se han realizado durante la ejecución de la prueba. Si selecciona la acción locator.click , verá un punto rojo en el botón Introducción de la instantánea DOM.
A continuación, seleccione la aserción expect.toBeVisible y verá que la instantánea de DOM ha cambiado para mostrar la página Instalación con un resaltado en el encabezado que estamos verificando. Encima de la instantánea DOM, puede seleccionar los botones Antes y Después para ver el estado del DOM antes y después de realizar la acción.
Se puede separar la instantánea de DOM a una ventana independiente seleccionando el icono separar en la esquina superior derecha. Esto puede ser útil si quiere inspeccionar el DOM durante la depuración de la prueba.
Hablando de depuración, también puede elegir un localizador de la instantánea de DOM seleccionando el botón Seleccionar localizador en el panel inferior. A continuación, mantenga el puntero sobre los elementos de la instantánea DOM para ver el localizador de ese elemento. Al seleccionar un elemento, se agrega al cuadro Localizador, ubicado en la parte inferior del visor de seguimiento, donde puede editarlo antes de copiarlo en el portapapeles.
No dude en explorar por su cuenta el resto de las características del visor de seguimiento, como las pestañas Llamada, Consola, Red y Origen .
Depuración de pruebas
Para la depuración, se recomienda ejecutar las pruebas con la opción Mostrar visor de seguimiento y usar el seguimiento de la prueba para comprender mejor lo que sucede.
Sin embargo, con la extensión de Visual Studio Code, también puede depurar las pruebas directamente en Visual Studio Code, ver mensajes de error, crear puntos de interrupción y depurar las pruebas en directo. Obtenga más información en la documentación o vea el siguiente vídeo para obtener una idea del soporte para la depuración.
Generación de pruebas
CodeGen genera las pruebas a medida que realiza acciones en el explorador, lo que lo convierte en la manera más sencilla de empezar a crear pruebas para flujos de trabajo complejos.
Para generar una prueba, seleccione el botón Grabar nuevo en la barra lateral de pruebas de Visual Studio Code. Se abre una ventana del explorador en la que puede realizar acciones que se grabarán y se convertirán en una prueba. También observará que se crea un nuevo archivo en la tests carpeta con la prueba generada.
Escriba una dirección URL en la ventana del explorador y empiece a realizar acciones como haría un usuario. Verá cómo se registran las acciones en el archivo de prueba en VS Code.
Vamos a volver a crear la prueba sencilla que hemos ejecutado anteriormente; para ello, vaya al sitio web de Playwright y seleccione el botón Introducción . A continuación, podemos seleccionar el icono Assert Visibility en la barra de herramientas de Codegen y seleccionar el encabezado Instalación para verificar que está visible.
Obtenga más información sobre cómo generar pruebas en el vídeo siguiente.
Pasos siguientes
En esta sección, ha aprendido a usar la extensión de Visual Studio Code para buscar y ejecutar pruebas y cómo trabajar con el visor de seguimiento para obtener una experiencia más visual para las pruebas de depuración.
También ha aprendido cómo Visual Studio Code proporciona herramientas más completas para generar pruebas mediante las funciones Registrar una nueva prueba, Seleccionar localizador y Registrar en el cursor. Ahora, es el momento de aplicar los aprendizajes de Playwright Fundamentals en un proyecto guiado para crear una especificación de prueba de un extremo a otro para nuestra aplicación de ejemplo.