Técnicas Avanzadas de Playwright para Pruebas Impecables

Hola a todos, Técnicas Avanzadas de Playwright para Pruebas Impecables. Mi nombre es Devi O'Brien, y soy una Principal Technical PM en Microsoft. Acabo de ser promovida, y básicamente me estoy enfocando en playwright y asegurándome de que la comunidad alrededor de playwright sea increíble y que haya contenido increíble para que todos puedan aprender pruebas, porque el objetivo es que todos deberían estar probando. Soy una oradora internacional, profesora, YouTuber, Contribuyente de Código Abierto, y me encanta absolutamente el deporte. Acabo de recibir el OK para volver a correr después de tener gemelos. Así que sí, síganme si quieren ver muchas fotos de mí corriendo y andando en bicicleta por la isla.

Pero vamos a hablar sobre Playwright. ¿Qué es Playwright? Para aquellos que no lo saben, Playwright es una prueba confiable de extremo a extremo para aplicaciones web modernas, y funciona en cualquier navegador, cualquier plataforma con una API. Las pruebas se ejecutan en aislamiento completo, por lo que no hay necesidad de limpiar, y no se pasa de una prueba a otra. Todo está aislado. Eso es realmente genial y lo hace mucho más fácil.

Y las pruebas se ejecutan realmente rápido. ¿Qué hay de rápido en estos días, verdad? Bueno, las pruebas se ejecutan rápido. Eso es realmente genial. Tenemos algunas herramientas poderosas. Podemos hacer cosas como usar una generación de código para simplemente grabar tu prueba simplemente jugando con el sitio web, muchas cosas geniales. Y también es multilenguaje, por lo que puedes usar JavaScript, TypeScript, o podrías usar Python y Java y .NET.

Entonces, ¿por qué deberías usar Playwright? Bueno, Playwright espera automáticamente por los elementos, así que si estás usando Playwright correctamente, básicamente va a esperar a que los elementos aparezcan en la página. También reintenta afirmaciones. Puedes usar iframes, Shadow DOM. Como mencioné antes, las pruebas están aisladas, y luego las pruebas se ejecutan en paralelo por defecto, y eso es lo que las hace mucho más rápidas. También puedes fragmentar. Si estás interesado en escalar, necesitas fragmentar a través de múltiples máquinas. Eso simplemente funciona. Y luego, por supuesto, nuestras herramientas, tenemos la extensión de VS Code. Tenemos generación de código para generar tu código. Tenemos un selector de localizadores para encontrar el localizador. Un localizador es el elemento en la página, ¿verdad?, el botón. Así que encuentra ese localizador. Tenemos modo UI. Probablemente te mostraré algunas cosas de modo UI hoy. Y luego tenemos informes HTML, Trace Viewer y GitHub Actions.

Funciona directamente con GitHub Actions, pero, por supuesto, podrías usar cualquier proveedor de CI. Así que vamos a sumergirnos en algunos consejos, simulación de API, prueba de fecha y hora, configuración de pruebas y un poco de la CLI. Vamos a sumergirnos.

Usa localizadores. Así que los localizadores tienen la espera automática y la capacidad de reintento, por lo que es realmente, realmente, realmente importante usar los localizadores adecuados. Eso significa que intenta no, tanto como sea posible, no uses localizadores CSS. Definitivamente no uses XPath. Así que para encontrar un elemento en la página, usa lo que llamamos localizadores. Y tenemos atributos orientados al usuario. Queremos priorizar eso. Así que tenemos cosas como GetByRole. Por ejemplo, GetByRoleButton, con el nombre submit, es mucho más orientado al usuario. Es mucho mejor para el usuario. El usuario lo ve, ¿verdad?, a diferencia de GetByTestID.

Podrías usar GetByTestID, pero recomendamos atributos orientados al usuario primero. Así que sí, usa localizadores, espera automática y capacidad de reintento. Usa las afirmaciones de playwright. Así que en lugar de decir to be, usa las afirmaciones de playwright para tener texto, para ser visible, etcétera, porque estos son de reintento automático y eso asegurará menos inestabilidad en tu prueba. Así que aquí tengo un ejemplo. Estoy usando un test ID en este ejemplo, expectPage.

GetByTestID de status para tener el texto submitted. Anotaciones. Esto es realmente genial. ¿Estás usando anotaciones? Este es un informe de playwright. Y cuando usas anotaciones, obtienes las anotaciones en el informe. También lo obtienes en modo UI o en el visor de trazas. Así que aquí en las anotaciones, tengo como un problema. Tengo problemas relacionados. Así que podría haber algo sucediendo con esta prueba y quieres que esa información se vea en un informe. Y este es el lugar perfecto para hacerlo, así que usa anotaciones. Ahora, para agregar una anotación, todo lo que tienes que hacer es simplemente poner la anotación justo después del nombre de la prueba. Así que llamo a la prueba Usa Anotaciones. Terrible nombre.

Y luego simplemente abre esas llaves y escribe una anotación. La anotación es un array, por lo que acepta más de un tipo. Y puedes poner tu propio tipo o descripción. Podrías decir tipo Debbie, ¿verdad? Lo que quieras. Así que eso es realmente genial y también son clicables.

Así que en el informe, simplemente haces clic y vas directamente a ese problema. Y no tiene que ser problemas. Podría ser lo que quieras. Así que aquí tienes una pequeña idea que he creado solo para mostrarte cómo se ve. Así que aquí tengo una prueba. Voy a ejecutar esta prueba. Y lo que va a pasar es que va a ejecutar todas las pruebas en la lista de gestión. Ahora, tengo una prueba aquí. Puedes ver que no se está ejecutando. Entonces, ¿por qué es eso? Vamos a echar un vistazo a la pestaña de anotaciones. Y eso es porque he puesto un fix me. Así que fix me también se llama una anotación. Así que hay algo mal con esta prueba. Necesito que alguien lo arregle, así que voy a poner fix me.

Ahora, la última prueba aquí, está un poco lenta. Pero mira, está fallando. De hecho, tengo un test.fail allí. Así que la anotación viene como fallida. Y tengo el problema para mostrar a cualquiera que esté ejecutando esta prueba que hay un problema. Esta prueba va a fallar hasta que alguien solucione ese problema. Y puedes ver aquí que tengo test.fail. Eso significa que no va a estropear CI. Pero la prueba fallará. Quiero que falle. Y tengo mi anotación allí para que podamos mantener un control sobre eso.

Y luego filtrar por prueba fallida más tarde, etcétera. Así que las anotaciones son muy geniales. Pasos de prueba. Los pasos de prueba son realmente agradables, especialmente si tienes una prueba realmente larga. Quieres simplemente poner ciertas cosas en un pequeño paso. Así que aquí hay un paso de prueba dot create first to do. Y luego lo lleno, y hago ese tipo de cosas. Y luego tengo otro paso, crear el segundo to do. Y por supuesto, esto podría ser una función. Pero este es un ejemplo de, como, lo tengo en mis películas, uno donde tengo muchas cosas sucediendo, y lo divido en pasos de prueba. Lo hace mucho más fácil de ver en el modo UI y también mucho más fácil en el Trace Viewer y en el informe en sí. Así que aquí en el informe, por ejemplo, simplemente voy a crear el primer to do, luego espero el texto superior. Crear el segundo to do, bam. Y realmente no me importan los detalles de implementación, pero puedo simplemente, ya sabes, abrir eso si realmente quisiera y ver más. Así que es una forma agradable de hacer eso. Así que te animo a usar pasos de prueba. Y por supuesto, también puedes encuadrar los pasos de prueba. Así que podrías decir box dot true. Y lo que esto hace es básicamente detener el mensaje de error de, como, darte demasiada información. Así que aquí tengo, como, el mensaje de error, el nuevo to do dot fill, y no sé a dónde ir, ¿verdad? Hay dos pequeños errores allí. Pero con los pasos encuadrados, básicamente está diciendo, el error está en el get by placeholder, lo que necesita ser hecho. Así que puedo ir directamente a esa área para arreglar eso en lugar de enfocarme demasiado. Así que esa es otra opción también, encuadrar tus pasos.

Bien, vamos a la simulación de API. La simulación de API es bastante divertida. Y hay mucho tipo de, como, ¿deberíamos simular nuestras APIs y cosas así? Y obviamente, quieres ejecutar y probar. Quieres probar todo lo más posible. Pero hay momentos en los que necesitarás simular tu API, y eso está totalmente bien. Así que te voy a mostrar haciendo una demostración, voy a usar el modo UI.

Así que una vez que hago eso, tengo el modo UI abierto, y todas mis pruebas están aquí. Ahora tengo esta prueba en la página de detalles de la película. Así que aquí están los detalles de mi película, ¿verdad? Ahora esta película no va a cambiar mucho. Es muy estática, ¿verdad? El título no va a cambiar, el género no va a cambiar, la descripción, los personajes. Quiero decir, no deberían cambiar, ¿verdad? La película está terminada. Es un producto terminado. Pero la calificación va a cambiar. Y vamos a sacar eso para que puedas verlo más de cerca, ¿verdad? Tengo una calificación de 7.02. Ahora esa calificación es constante, así que mañana, podría ser 7.03, ¿verdad? Entonces, ¿cómo probamos ese contenido dinámico como parte de esta página estática? Y ahí es donde quieres simular un poco la API, porque realmente, solo quieres asegurarte de que las estrellas aparezcan en la página. Entonces, ¿cómo haríamos eso? Bueno, básicamente, en nuestra prueba aquí, tengo un waitPage.root allí en la línea ocho, y solo estoy poniendo en la raíz a la que iríamos, que es el ID de la película. Así que cuando llego a la raíz del ID de esa película, quiero que vayas y obtengas ese Json, ¿verdad? Espera a que ese Json regrese. Y luego quiero decir, bueno, Json, quiero que el promedio de votos sea 7.02. Bien, ahora eso es lo mismo que es. Está bien. No te preocupes por eso por ahora. Y luego solo estoy afirmando que realmente está ahí, ¿verdad? Ahora, si entro en mi pestaña de red en el modo UI, realmente puedo echar un vistazo, y puedo ver en el cuerpo de esto, el 7.02, ¿verdad? Eso es correcto. Así que eso no tiene mucho sentido para ti, porque estás como, ¿por qué estás simulando algo que es exactamente lo mismo que es, verdad? Puedo ver la API, el cuerpo de la API también es el mismo. Así que realmente no hay mucha diferencia aquí, ¿de acuerdo? Pero lo que queremos hacer es cambiarlo. Así que imaginemos, no sé, todos vieron esa película, todos pensaron que era increíble, y obtuvimos un 10, ¿verdad? Así que 10 vino de la API, pero mi contenido estático, mi prueba va a fallar porque va a estar buscando 7.02, pero algo cambió en la API. Obtuve un 10, mi prueba falló. Mira, el 10 se muestra allí. Eso es genial. Puedo ver que a todos les encanta esta película, pero todo falló. Entonces, ¿cómo arreglo eso? Y eso es básicamente donde quieres simular esa API. Y si miro mi cumplido, veo la forma en que me muestra que este es el cumplido, puedo ir al cuerpo y me va a mostrar en la API, en el JSON, el promedio de votos es 10, porque eso es lo que simulé, ¿de acuerdo? Eso es lo que intercepté, fui y cambié eso. Y puedes ver que mi prueba está fallando porque está esperando el 7.02, que está en la prueba. Y por supuesto, puedo volver a la prueba y cambiar eso a 10, y podría dejar el promedio de votos de 10 si quisiera. Y obviamente tengo el modo Watch activado, así que esa prueba se ejecuta automáticamente. Y mi prueba pasó, y tengo 10. Así que realmente no me importa cuál sea el voto.

Lo que me importa es que todo funcione como debería. Así es como lo haces. Ahora también puedes, básicamente, ir a una ruta, por ejemplo, en este sitio web, no quiero acceder al sitio web de IMDB cada vez que quiero probar el sitio, pero quiero asegurarme de que el enlace sea clicable. Así que puedes ver aquí, cada película hace clic en el sitio web, hace clic en el sitio web de IMD, y básicamente estoy diciendo, cuando quieras ir a ese sitio web, solo ve aquí en su lugar. Así que simulando, ¿verdad?

Estoy simulando eso, para que no acceda a ese sitio web, pero aún puedo probar que ese botón es clicable y va a ir a donde debería ir. Echemos un vistazo rápido a cómo harías eso. Así que en la misma prueba, de hecho tengo esto en la misma prueba, mira cómo estoy usando test.stats, ¿ves? Mis hermosas pruebas, y asombrosas. Así que aquí, ¿verdad? Tengo mi página, espera, page.context. Mira esa línea 77, y estoy diciendo ruta. Así que el sitio web de la película Twister. Así que cuando vayas al sitio web de la película Twister, voy a crear una página HTML y una página simulada, ¿verdad? Solo para probar que estoy yendo a esa página. Y luego básicamente solo, y lo mismo aquí, ¿verdad? Para el sitio web de IMDb, cada vez que veas esa ruta, intercepítala, y complétala con este cuerpo en su lugar, esta cosa simulada que estoy creando. Y luego básicamente obtengo el pequeño botón, lo hago clic, y luego espero que la página uno tenga la URL, IMDb. Así que esa es una forma de simular enlaces externos a los que quieres ir, pero quieres asegurarte de que sean clicables y que alguien pueda hacer eso. Así que eso es realmente genial, y puedo simplemente reproducir eso de nuevo, y puedes ver cómo básicamente solo va y encuentra el sitio web de la película Twister en lugar de ir al sitio web real. Puedes ver www.twistersmovie.com, ¿verdad? Así que es realmente, realmente genial. Así que sí, eso es simulación de API.

Así que echemos un vistazo a probar fecha y hora. ¿Cómo harías eso? Así que podrías querer probar algo como esto. Tenemos un reloj, ¿verdad? Y tenemos 16, 36, 52, y está contando hacia arriba, y está usando date.now. Así que básicamente, lo que tengo que hacer, tengo una función llamada startClock. Tengo el const today, mi fecha, etcétera. Y tengo un window addEventListener, load, start the clock, ¿verdad? Así que eso es básicamente mi reloj, HTML. Y luego mi prueba, lo que va a hacer es básicamente estoy usando el page.clock, y estoy configurando una hora fija. Así que mi hora fija es una nueva fecha a las 10 de la mañana en esta fecha específica. Y luego voy a mi sitio web del reloj. Así que fixed, setFixedTime devuelve una hora falsa fija en todo momento, ¿de acuerdo? Y luego básicamente ejecuto esta prueba, y solo me aseguro de que la hora sea las 10 en punto. Tengo que eso pasa, y puedes ver en mi visor de trazas aquí, estoy ejecutando a través de la extensión de VS Code, y obtengo el visor de trazas porque tengo eso configurado. Y solo muestra, sí, va a las 10 en punto. Así que perfecto.

Realmente, realmente fácil de probar. Y puedes ver allí que la hora era realmente 4.37. No son las 10 en punto, pero he simulado esa hora. Así es como puedes detener el tiempo y cambiar la hora e ir hacia adelante y hacia atrás en el tiempo. Muy genial.

¿Qué tal avanzar manualmente el tiempo? Entonces puedes usar clock install para inicializar el reloj. Y puedes decir, quiero que inicialices en esta hora específica. Así que estos temporizadores falsos se utilizan para controlar manualmente el flujo del tiempo en las pruebas. Y luego puedes avanzarlo. Entonces puedes decir, clock.pauseAt, por ejemplo. Así que pausarlo a las 10 en punto, y luego puedes esperar que algo suceda. Y luego puedes adelantar 30 minutos y esperar que suceda otra cosa, ¿verdad?

Así que esta es una prueba muy simple, pero podrías imaginar lo que estarías haciendo allí durante esos para asegurarte de que es a las 10, y luego es en otro momento, y luego está avanzando rápidamente. Así que ejecutemos esa prueba para que puedas ver rápidamente cómo funciona, súper rápido. Y tienes como las ocho en punto, y tengo las 10 en punto, y luego estoy avanzando rápidamente, y luego tengo las 10.30. Así que muy, muy genial. Y luego te evita tener que esperar 30 minutos, ¿verdad? Así que algo más, tengo una cuenta regresiva, ¿verdad? Así que conoces esas ofertas, ¿verdad? Acabo de actualizar la página allí, para que puedas ver esa cuenta regresiva, se apaga rápidamente. Tienes cinco minutos para comprar.

Amazon hizo esto conmigo el otro día, cinco minutos para comprar, y yo estaba como volviéndome loco, como, ah, y fui, ya sabes, ¿lo compro? Y no lo hice. Y luego actualicé la página y volvió a aparecer. Así que pensé, genial. Entonces, ¿cómo probarías algo como esto sin tener que esperar cinco minutos? Entonces harías el clock.install, y luego básicamente esperarías que la oferta flash sea visible, ¿verdad? Así que has inicializado el reloj, y luego esperas que algo sea visible. Y luego adelantas cinco minutos porque entonces la oferta flash habrá terminado, y luego esperarás lo que sucede en esa página. Esperarás que la expiración de la oferta sea visible. Así es como ejecutas esa prueba.

Echemos un vistazo y veámoslo en acción. Y mi prueba pasa y puedes ver allí mi reloj inicializado, tengo cinco cuentas regresivas, y luego veo las ofertas flash allí, y luego básicamente avanzo rápidamente y obtengo mi oferta expirada. Así es como pruebas algo así. Nuevamente, asegúrate de que esté usando cosas como data now y no como algo que venga del backend.

Genial, ¿qué hay de las pruebas de configuración? Entonces, ¿qué pasa cuando tienes algo como un escenario de inicio de sesión, algo que quieres hacer antes de otras pruebas? Así que tengo una demostración para mostrarte esto. Nuevamente, mpxplaywritetest-ui para abrir ese modo UI para que puedas ejecutar tus pruebas y jugar con las cosas mucho más fácilmente. Entonces, lo que vamos a hacer aquí es que tengo un sitio de películas donde necesito iniciar sesión para gestionar la lista de películas. Así que mi sitio de películas necesita estar iniciado sesión y básicamente puedo mirar aquí en el modo UI, porque tengo el modo UI abierto. Si hago clic en esta pequeña cosa, puedo hacer clic en la prueba de configuración. Quiero mostrar, quiero ver eso. Así que eso está oculto para ti. Puedes hacer clic en eso para básicamente verlo. Así que tengo mi prueba de configuración y voy y ejecuto un watch. Solo ejecuto la prueba de agregar y eliminar una película, pero automáticamente ejecutó la prueba de iniciar sesión del usuario y luego fue y ejecutó la prueba de películas. Así que dependía de eso. La configuración se ejecutó primero. Y luego puedo ejecutar rápidamente. Esta es una prueba realmente larga sobre agregar una película a mi lista de películas para que pueda crear las películas que quiero ver, etcétera. Así que aquí está, nuevamente, una prueba realmente, realmente genial. Mira cómo el modo UI, puedes ver realmente fácilmente cualquier cosa. Puedes hacer clic en algo allí y expandir esa línea de tiempo, lo cual es genial para depurar y verificar cosas. Mi código fuente está abajo y tienes todo lo demás fácilmente a mano. Entonces, ¿cómo funciona esa configuración? Bueno, básicamente volvamos a VS Code y puedes ver aquí mi archivo login.setup.ts. Básicamente estoy usando import test a setup para que pueda llamarlo setup, así que es más claro para mí. La configuración usa los inicios de sesión. Y luego, básicamente, esa prueba de configuración está en mi proyecto, ¿verdad? Así que es un proyecto llamado setup y mi prueba o proyecto de Chrome iniciado sesión, cada prueba en ese proyecto depende de la configuración y luego usa el estado de almacenamiento, ¿verdad? El inicio de sesión es solo iniciar sesión en la prueba simple, pero todo es importante sobre el proyecto. Las dependencias del proyecto, esto se llama. Ahora puedo desmarcar en el modo UI, esa configuración y puedo ejecutar esa prueba nuevamente. Y ahora no está ejecutando la prueba de inicio de sesión porque ya la tiene guardada en el estado de almacenamiento. Y eso lo hace realmente rápido para el desarrollo.

No necesitas estar ejecutando esa prueba de inicio de sesión todo el tiempo. Se ejecuta una vez, inicia sesión, desmárcala y luego simplemente sigue ejecutando tus pruebas que necesitan el inicio de sesión, pero ya está iniciado sesión porque ya la has ejecutado una vez y se ha guardado en ese estado de almacenamiento. Y eso es dependencia del proyecto. Así que te animo encarecidamente a que lo revises. No tiene que ser iniciar sesión, podría ser cualquier cosa. Podrías estar creando una lista de películas, podría ser una que dependa de, no sé, lo que sea. Pero hay muchas cosas realmente geniales que puedes hacer con las dependencias del proyecto.

Así que un par de cosas extra, tenemos la última fallida para la CLI. Así que si no estás usando la extensión de VS Code, estás usando la CLI, esto es realmente genial. Básicamente puedes ejecutar la última prueba fallida. Así que en lugar de ejecutar 103 pruebas usando cinco trabajadores donde dos fallaron y 101 pasaron, básicamente puedes hacer npx playwrite test dash dash last failed y solo ejecutará esas dos últimas pruebas que fallaron y ver si, cuando trabajaste en ellas, se han solucionado o siguen fallando. Esa es una solución rápida realmente buena. También solo cambiado para la CLI. Así que básicamente solo cambiarías, solo puedes ejecutar, solo ejecutas los archivos de prueba que han sido modificados desde el último comentario.

Así que aquí, como por ejemplo, git status, estoy en la rama principal. Cambios no preparados para el comentario, nuestras pruebas solo cambiaron. Esta es mi prueba llamada solo ejemplo cambiado. Y luego cuando ejecuto npx playwright test dash dash solo cambiado, ejecuto una prueba usando un trabajador y ejecuta esa prueba. Así que esto es realmente genial. ¿Y qué sigue? Bueno, básicamente playwright es de código abierto y gratuito. Así que asegúrate de estar usando playwright. Mira todas sus estrellas, ¿verdad? Nos encantan las estrellas. Estamos subiendo alto, pero aún queremos más estrellas. Así que estrellas en GitHub, realmente lo apreciamos. Las descargas de NPM están por las nubes. Es playwright, es de Microsoft. Así que no tienes absolutamente ninguna excusa para no estar usando playwright. Y tenemos embajadores increíbles. Te animo encarecidamente a seguir a todas estas personas. Son increíbles y están creando contenido realmente genial por ahí.

Puedes encontrar la página de embajadores en la pestaña de comunidad de nuestro sitio web. Y no olvides unirte a nuestro Discord de Playwright. Tenemos 14,000 miembros allí. Eso es una locura, estoy muy impresionada. Y hay personas constantemente ayudándose entre sí, compartiendo contenido. Y también hacemos happy hours allí. Así que ven y únete a nosotros en el escenario de Discord de Playwright.

Y por supuesto, ¿estás listo para Playwright? Espero que todos hayan disfrutado esto. Espero que les haya ayudado. Si eres nuevo en Playwright, asegúrate de unirte, solo pruébalo. Si eres un usuario avanzado, asegúrate de estar en un servidor de Discord y asegúrate de estar charlando con otros miembros de la comunidad y creando issues para cualquier cosa que tengas de la que no estés seguro.

Y básicamente, muchas gracias. Espero que hayas disfrutado la charla. Recuerda leer la documentación, la documentación es muy importante. Sé que no la estás leyendo, deberías leerla. Pero también puedes revisar nuestro canal de YouTube donde publicamos algunos videos geniales y cosas así. Nuestro canal de Discord, como mencioné, estamos en Twitter. Y si necesitas algo, solo envíame un correo electrónico, debiobrian at microsoft.com o visita mi sitio web debiobrian.codes. Muchas gracias a todos por escuchar y que tengan un gran resto de las charlas. Adiós.