Pruebas de aplicaciones web con Playwright

Rate this content
Bookmark

Las pruebas son difíciles, lleva tiempo aprender y escribir pruebas, y el tiempo es dinero. Como desarrolladores, queremos hacer pruebas. Sabemos que deberíamos hacerlo, pero no tenemos tiempo. Entonces, ¿cómo podemos lograr que más desarrolladores hagan pruebas? Podemos crear mejores herramientas.

Permíteme presentarte a Playwright: una herramienta confiable de pruebas de extremo a extremo para aplicaciones web modernas, desarrollada por Microsoft y completamente de código abierto. El generador de código de Playwright genera pruebas para ti en JavaScript, TypeScript, Dot Net, Java o Python. Ahora realmente no tienes excusas. Es hora de jugar tus pruebas correctamente.

20 min
03 Nov, 2022

Video Summary and Transcription

Pruebas de aplicaciones web con Playwright, una herramienta confiable de pruebas de extremo a extremo. Playwright ofrece una ejecución rápida, herramientas poderosas y soporte para múltiples lenguajes. Proporciona selectores precisos, afirmaciones web-first y generación de código para pruebas fáciles. Playwright también ofrece funciones como depuración en vivo, trazado y ejecución de pruebas en CI. El futuro de Playwright tiene como objetivo hacer que las pruebas sean fáciles y divertidas, con un enfoque en crear experiencias web libres de frustraciones.

Available in English

1. Introducción a las pruebas de Playwright

Short description:

Pruebas de aplicaciones web con Playwright. Las pruebas de Playwright son pruebas de extremo a extremo confiables para aplicaciones web modernas. Funciona en cualquier navegador y plataforma. Las pruebas se ejecutan en total aislamiento, con una ejecución rápida y herramientas poderosas. Puedes ejecutar tus pruebas en varios lenguajes, como C#, Java, Python, JavaScript o TypeScript. La extensión de VSCode para Playwright ofrece una integración perfecta y te permite elegir navegadores, configurar opciones y utilizar GitHub Actions para pruebas automatizadas.

♪♪♪ Pruebas de aplicaciones web con Playwright. Es hora de jugar tus pruebas correctamente. Hola a todos. Mi nombre es Debbie O'Brien. Soy una Gerente de Programa Senior en Microsoft, y básicamente trabajo en la promoción de Playwright. Soy una conferencista internacional, profesora, YouTuber, contribuidora de código abierto, y puedes seguirme en Twitter, devs underscore o'brien, para verme correr, andar en bicicleta y hacer todo tipo de deportes en la isla de Mallorca en España.

Así que estamos aquí para hablar de pruebas, así que vamos directo al grano. Las pruebas de Playwright, pruebas de extremo a extremo confiables para aplicaciones web modernas, funcionan en cualquier navegador. No importa en qué plataforma te encuentres. Cualquier navegador, cualquier plataforma. Una API. Las pruebas se ejecutan en total aislamiento. Eso significa que una prueba está aquí con un contexto de navegador, otra prueba está aquí. No se filtran cosas entre sí, ¿verdad? Así que todo aquí está en total aislamiento de la otra prueba aquí. Ejecución rápida. Tenemos herramientas poderosas, de las cuales hablaré mucho en esta charla, y multi-lenguaje, lo que significa que puedes ejecutar tus pruebas en C Sharp, en Java, en Python, o en JavaScript y TypeScript. Hoy te mostraré TypeScript, pero puedes elegir cualquiera de los otros lenguajes que desees. Te mostraré la extensión de VSCode porque realmente me encanta la integración con VSCode. Es muy, muy genial, pero no te preocupes, aún puedes usar Visual Studio. Aún puedes usar simplemente una terminal o lo que prefieras. Pero déjame mostrarte la extensión. Busca la prueba de Playwright para VSCode de la extensión de Microsoft, y luego básicamente en tu panel de comandos, simplemente escribe Instalar Playwright, y haz clic en eso. Y lo que obtienes es, ahora puedes seleccionar los navegadores, y puedes elegir Chromium, Firefox o WebKit. Puedes elegir todos o solo uno de ellos. Y más tarde puedes configurarlo, así que no te preocupes demasiado si no estás seguro de cuál quieres. Hay otra opción allí, usar JavaScript. Si no quieres usar TypeScript, es TypeScript por defecto, pero puedes usar JavaScript si prefieres. Y luego también las GitHub Actions. Al hacer clic en esa casilla, obtendremos las GitHub Actions, y básicamente funcionará sin necesidad de configurar nada. Podrás ejecutar tus pruebas en GitHub, en CI en cada push y pull request.

2. Ejecución de pruebas y depuración en vivo con Playwright

Short description:

Una vez que hayas instalado Playwright, tendrás acceso a la carpeta de GitHub con acciones, una carpeta de pruebas con archivos de ejemplo y la configuración de Playwright. La ejecución de pruebas es fácil con la extensión de VS Code, que proporciona depuración en vivo y mensajes de error. Al establecer puntos de interrupción, puedes analizar y depurar tus pruebas para resolver cualquier problema. Playwright también ofrece la ejecución paralela de pruebas y la opción de mostrar u ocultar la ventana del navegador durante las pruebas.

Una vez que hayas instalado, obtendrás esto. Obtendrás esa carpeta de GitHub allí con las acciones dentro, y obtendrás una carpeta de pruebas, donde se encuentra el archivo example.spec.ts. Eso tendrá una prueba muy pequeña allí, que vamos a ver hoy, y luego hay un archivo de ejemplo de prueba, que tiene una aplicación de demostración de tareas pendientes, y puedes ver eso con más detalle. Y luego la configuración de Playwright, en caso de que quieras agregar o eliminar algunos de esos navegadores, o poner 'testing' para Safari móvil, o configurar un servidor de desarrollo para ejecutar tu aplicación en localhost 3000 antes de ejecutar tus pruebas, etc. Puedes hacer todo eso en la configuración, pero rara vez necesitas modificarla, porque todo funciona correctamente. Entonces, cuando quieras ejecutar pruebas, puedes ejecutar todas las pruebas. Puedes ejecutar un conjunto de pruebas, una sola prueba, y las pruebas se ejecutan en paralelo. Sin que tengas que hacer nada, se ejecutan automáticamente en paralelo, lo que las hace muy rápidas. Voy a ejecutar las pruebas usando la extensión de VS Code. Nuevamente, podrías usar la terminal y simplemente escribir npx.playwritetest, pero aquí en la línea tres, verás este hermoso triángulo verde. Voy a hacer clic en eso y, básicamente, irá pasando por cada línea y ejecutará la prueba. Ahora, puedes ver que se abrió una ventana del navegador para mí y pude ver todo lo que está sucediendo. Lo reproduciré nuevamente. Puedes ver que es muy rápido, ¿verdad? Eso se debe a que tengo marcada la opción de mostrar el navegador, y puedes desmarcarla si quieres. Si no quieres ver el navegador, asegúrate de que esté desmarcada. Entonces, la depuración en vivo, si tienes algún error en tu prueba, quiero decir, nunca tienes errores, ¿verdad? Pero si tienes algún error o algo, tienes la depuración en vivo y los mensajes de error en el propio VS Code. Nuevamente, tenemos nuestra prueba aquí en VS Code y simplemente voy a romperla aquí, ¿de acuerdo? getByText, voy a ejecutar esa prueba, se va a romper y dice, error, violación del modo estricto. Entonces, Playwright está diciendo, mira, hay uno, dos, tres elementos allí, y puedes ver todo el registro. Ahora, si no quieres leer el registro o no entiendes el registro, básicamente puedes establecer un punto de interrupción y puedes ejecutar esa prueba nuevamente, para que puedas verlo. Así que ejecutándolo en modo de depuración, ahora podemos revisar eso y ver qué está sucediendo. En este punto, Playwright está diciendo, getByText resuelve a tres elementos. Aquí está uno de ellos. Aquí está el otro. Y en la parte inferior, tenemos otro que tiene la palabra 'star' dentro del texto de 'getting started'. Entonces, Playwright no sabe cuál quieres que elija. Así que está diciendo, hey, esto está rompiendo la violación estricta. Así que puedes jugar y depurar esto en vivo y decir, okay, ¿qué pasa si pongo get star? Get star solo resuelve a uno, así que eso estaría bien. Eso funcionaría. Nuevamente, podemos volver aquí y jugar y poner algo como, imagina que ponemos playwright, ¿de acuerdo? Ponemos playwright. Hay demasiados, ¿vale? Hey, hay como 12 de estos.

3. Selectores y Localizadores en Playwright

Short description:

Los selectores en Playwright te permiten elegir elementos en una página con precisión. Playwright proporciona esperas automáticas incorporadas y capacidad de reintentos para los localizadores, eliminando la necesidad de tiempos de espera. Las nuevas API inspiradas en la biblioteca de pruebas, como getByText, getByRole y getByLabel, ofrecen aún más opciones. Playwright también ofrece una opción de selección de selector en VS Code, lo que facilita la selección de selectores. Al pasar el cursor sobre los elementos, puedes obtener localizadores e insertarlos rápidamente en tu código.

Este va a ser un selector realmente, realmente difícil de elegir. Así que, sí, básicamente, al pasar por esto, puedes ver en vivo lo que está sucediendo en la página, lo que Playwright está tratando de seleccionar y ver, y luego podrás asegurarte de que esos selectores sean mucho mejores y mucho más precisos. Y luego simplemente puedes continuar, agregar más depuración, más puntos de interrupción, o simplemente pasar por esa prueba, detenerla, reproducirla, reiniciarla nuevamente, etc.

Ahora, ¿qué son los localizadores? Los localizadores son una forma de encontrar elementos en la página en cualquier momento, con esperas automáticas incorporadas y capacidad de reintentos. Sí, esperas automáticas incorporadas, eso significa que no tienes que hacer nada. Playwright esperará automáticamente a que ese localizador esté listo. No tienes que establecer tiempos de espera ni hacer nada parecido.

Entonces, los localizadores se ven así. Son estrictos por defecto. Por ejemplo, es page.locator, data test ID equals directions.click, digamos que estamos usando IDs. Ahora, incluso mejor que eso, déjame mostrarte algo más porque Playwright ahora tiene nuevas API inspiradas en la biblioteca de pruebas. Como puedes ver en este tweet de alguien de la comunidad, hay mucha emoción allí. Tenemos, por ejemplo, getByText, getByRole, getByLabel, getByPlaceholder, getByAltText y getByTitle. Y solo para mostrarte eso con más detalle, puedes ver aquí. Entonces, await page, getByLabel, username, philjohn, await page, getByLabel, password philjohn, password, await page, getByRole, button, name, sign in, y luego esperar que la página, getByText, welcome John sea visible. Así que asegúrate de usar nuestros nuevos localizadores, getByLabel, getByRole, getByText, etc.

Y en caso de que te preguntes, oh Dios mío, esto es tan difícil. ¿Cómo voy a saber qué selectores elegir? ¿Cómo voy a saber cuáles? Tenemos una opción de selección de selector en VS Code. Ahora, si no estás usando VS Code, también puedes usar la terminal. Básicamente, puedes abrir el inspector y podrás hacer lo mismo. Permíteme mostrarte. Aquí tenemos nuestra página. Y al pasar el cursor sobre ella después de hacer clic en esa opción de selección de selector, ahora obtenemos getByRole heading. Podemos hacer clic en ese encabezado allí. Y dentro de nuestra caja de selección de selector, tenemos getByRole, heading, name, installation. Ahora solo tengo que presionar Enter. Se copiará en mi portapapeles y ahora puedo ir a mi código y simplemente pegarlo en mi código. Y ahora tengo mi nuevo selector configurado y puedo usarlo fácilmente. Así que puedo continuar aquí nuevamente y puedo pasar el cursor sobre y ver getByRole link. Esto es name equals how to install PlayRide.

4. Selectores, Afirmaciones y Generación de Código en Playwright

Short description:

Playwright ofrece una variedad de selectores para elegir elementos en una página. Las afirmaciones web-first, como to be checked, to be disabled, to be editable y muchas más, garantizan pruebas precisas. Code Gen es una herramienta útil para generar pruebas mediante la grabación de acciones. Es una excelente manera de comenzar a hacer pruebas, especialmente para principiantes. Usando la extensión de VS Code o la terminal, puedes grabar fácilmente pruebas y generar código.

Veamos aquí, getByRole link. Esto es encantador, getByRole button. Y este es el nombre, switch between dark and light mode. Ese es el nombre de ese. Y nuevamente, al pasar el cursor sobre cada elemento nos dará el selector que queremos. Es una forma fácil y agradable de ver qué selectores están disponibles para ti y poder copiarlo fácilmente y ponerlo en tu código y usarlo. Así que sí, elige la caja de selección de selector allí, asegúrate de jugar con eso y diviértete mucho eligiendo tus selectores.

Asegúrate de usar afirmaciones web-first. Tenemos muchas afirmaciones. Tenemos, to be checked, to be disabled, to be editable, to be empty, to be enabled, to be focused, to be hidden, to be visible, to contain text, to have attribute, to have class, to have count, to have CSS, to have ID, to have JS property, to have text, to have titles, tener el tuyo propio y muchas más. ¿Verdad? Así que debería ser Robert, ¿verdad? Sí, todas son tus afirmaciones. Así que eso es lo que va a obtener un poco de peso automáticamente. Así que asegúrate de usar esas afirmaciones para asegurarte de obtener eso.

Ahora, déjame presentarte a Code Gen. Code Gen es mi amigo. Me encanta Code Gen. Code Gen es increíble. Code Gen generará pruebas mediante la grabación de tus acciones. Ahora, no es perfecto, ya sabes, pero es una forma increíble de comenzar y realmente te ayuda a adentrarte en las pruebas si eres nuevo en las pruebas, especialmente. Esta es una muy buena manera de empezar. Así que déjame mostrarte qué hace Code Gen. Ahora, nuevamente, voy a usar la extensión de VS Code, pero podrías usar completamente la terminal y abrir ese inspector y poder usarlo desde allí. Desde VS Code, voy a ir a esa barra lateral de pruebas, voy a hacer clic en grabar nuevo. Y lo que hace es darme una ventana del navegador, pero al mismo tiempo, me da un archivo test1spec.ts. Está importando pruebas o pruebas de Playwright y está comenzando ese bloque de prueba. Ahora puedo ir a cualquier URL. Y solo voy a probar el sitio web de Netflix por ahora. Y vengo aquí y tiene una espera de página, ir a Netflix, esto es genial. Ahora voy a hacer clic en este botón aceptar y tienes este hermoso getByRole button, nombre accept dot click. Así que fantástico.

5. Testing Help Center and Live Chat

Short description:

Continuando acciones haciendo clic en el logotipo y el encabezado. Probando las características del Centro de Ayuda, el chat en vivo y la interacción con iframes. Chateando con Martial y finalizando el chat.

Y puedo seguir adelante y hacer cosas. Así que estoy haciendo clic en este logotipo aquí porque quiero asegurarme de que el logotipo esté ahí. El usuario puede que no haga clic en ese logotipo, ¿verdad? Pero yo solo hago clic en él para que registre esa acción y luego lo cambiaré a una afirmación. Nuevamente, haga clic en ese encabezado y eso normalmente no es un evento de clic pero quiero hacer clic en eso para que esté ahí y luego lo convertiré en una afirmación más tarde.

Ahora hagamos algo divertido. Vamos al Centro de Ayuda. Abrimos una nueva página aquí y hagamos clic en algo, digamos que no se puede iniciar sesión en Netflix. Bien, esto se ve genial. Haremos clic en ese título, asegurémonos de que esté ahí, perfecto. ¿Y este artículo fue útil? Hagamos clic en sí. Y verifiquemos si aparece el texto gracias por tus comentarios, ¿existía ese texto? Eso es genial. Nuevamente, cambiaremos eso más tarde a una afirmación y comencemos el chat en vivo. Ahora, hice clic en el chat en vivo y ¿qué queremos hacer? No queremos ninguno de esos así que digamos cuál es tu problema. Hagamos clic en eso y genial, ahora estamos chateando con el Centro de Ayuda de Netflix. Hola, ¿en qué podemos ayudarte hoy? Genial. Enviemos una respuesta allí, digamos, testing tu chat y enviémoslo.

Ahora estoy en un iframe, testing el iframe en el sitio web. Quiero chatear con un agente, genial. ¿Podemos iniciar sesión? No, no iniciemos sesión. Alguien estará contigo en breve, genial. Y el tiempo de espera ahora es de un minuto así que podemos verificar que esté ahí y veamos qué sucede. Así que ahora estamos interactuando con un iframe. Podemos probar fácilmente ese iframe, como puedes ver, y asegurarnos de que el chat funcione como se espera que funcione. Ahora estoy chateando con Martial, así que gracias Martial por responderme y solo voy a decir, hola, solo estoy testing el chat. Gracias Martial. Y enviaremos eso allí y luego no molestaremos más a la gente de Netflix. Así que terminemos ese chat. Presionaremos finalizar, hagamos clic en ese botón. Sí, queremos finalizarlo y envíame un resumen de este chat por correo electrónico. Eso suena realmente genial en realidad.

6. Testing with Playwright and Generating Code

Short description:

Haciendo clic y encontrando errores sin escribir código. Probando múltiples dominios y iframes. Playwright genera código para pruebas. No se necesitan tiempos de espera. Utiliza afirmaciones web y mejora las pruebas.

Hagamos eso. Así que haz clic en eso y ponemos nuestro correo electrónico. Solo voy a poner Debbie y presionar enviar porque no quiero poner mi correo electrónico de verdad. Y oh, tenemos un, hemos enviado esta transcripción al chat, al correo electrónico, así que probablemente no deberíamos haberlo hecho. Así que podemos ir y arreglar ese código, ¿verdad? Basado en cómo estamos encontrando cosas.

Como puedes ver, estoy haciendo clic por ahí e incluso encontrando errores mientras hago clic y escribiendo la prueba y ni siquiera estoy escribiendo código real. Muy genial. En el pie de página, podemos abrir otro dominio. No estoy testing otro dominio. Estoy testing este fast.com desde el pie de página de Netflix, verifica que esa imagen esté ahí. Vamos a hacer clic en ese botón, ese botón de mostrar más información y asegurémonos de que el cliente esté ahí. Entonces, nuevamente, puedo verificar en varios dominios. Puedo verificar iframes y todo mi código está escrito para mí, como puedes ver. Y ni siquiera tuve que abrir ningún código, ¿verdad?

Ahora, obviamente vamos a tener que cambiar algo de esto, lo cual veremos en un segundo, pero puedes ver que mi iframe está siendo probado. Puedes ver que mi otra página está siendo probada y todo aquí está escrito para mí, bang, justo ahí en VS Code. Y puedo seguir adelante y asegurarme de que funcione simplemente haciendo clic en ese botón. Eso básicamente ejecutará el navegador. Pasará por aquí y puedes ver que inició el chat y llegaremos a esa espera de un minuto y mira, Playwright esperará a que esté disponible. Bang, está hecho, está ahí. Tengo chunia esta vez. Todo funciona, pasamos al siguiente dominio, testing que eso funcione y aparece mi pequeño botón. Esperará a ese botón. Está esperando, está esperando, aún no está ahí. Una vez que aparezca, bang, llegué y todo está como se esperaba. Así que no se necesitaron tiempos de espera allí. Tenemos todo funcionando. Entonces, nuevamente, deberíamos usar afirmaciones web y viste que hice clic en algunos de esos encabezados. Luego volví sobre esta prueba y la mejoré. Así que cambié algunos de ellos, como el logotipo para que sea una afirmación. Así que espero que sea visible y pude mirar esta página, obtener por encabezado de rol.

7. Using Code Gen and Analyzing Traces

Short description:

Al escribir pruebas, el uso de la generación de código puede facilitar el inicio. Los informes de muestra proporcionan una vista completa de los resultados de las pruebas, incluidos los registros y las trazas. Las trazas registran cada acción durante una prueba, lo que permite un análisis detallado y la solución de problemas. Las trazas se pueden ejecutar localmente utilizando el comando npx playwright test --trace.

Si es un encabezado de obtención por rol y quiero asegurarme de que sea visible. Obtener enlace por rol, sí, ese es un evento de clic que es perfecto. Nuevamente, el siguiente es la URL, eso es bueno. Obtener enlace por página, hacer clic, perfecto. Y podemos avanzar en la prueba y cada vez que veamos un encabezado de obtención por rol, ese, solo queremos que sea una afirmación para poder modificar cada uno fácilmente lo que facilita mucho, ya sabes, escribir tu prueba, ¿verdad? Podrías escribir esto completamente por tu cuenta sin usar la generación de código si eso es lo que te gusta pero yo encuentro que usar la generación de código es mucho más fácil para comenzar.

Entonces hablemos de los informes de muestra. Cuando tienes tus pruebas, esto es ahora mismo, necesito usar la terminal para esto. No puedo usar la extensión de VS Code. Primero quiero ejecutar mi prueba, npx playwright test, y luego quiero mostrar el informe. npx playwright show report. Ahora esto me da un informe completo de mis pruebas y puedo ver, vaya, falló en Firefox. Pasó en Chromium y WebKit y luego puedo inspeccionar qué sucedió en Firefox. Puedo ver un registro completo de eso pero quiero mostrarte la traza porque la traza es mucho más divertida. Es ese pequeño icono allí, las tres barras pequeñas. Puedo hacer clic en eso y se abrirá la traza o puedo ver los detalles de eso y verás en la parte inferior, la traza también. Cuando hago clic en la traza, lo que se abrirá y mostrará, bueno, primero déjame mostrarte cómo puedes ejecutar las trazas, ¿verdad? Puedes grabar una traza para cada prueba localmente utilizando npx playwright test --trace on. Normalmente, la traza se ejecuta en CI en los primeros tres intentos. Si tu prueba falla en el primer reintento se graba una traza para ti. No tienes que hacer nada para configurarlo, todo está hecho. Pero si quisieras hacerlo localmente, harías npx playwright test --trace on y luego básicamente abrirías el informe y luego harías clic en eso y verías la traza. Entonces esta es una traza aquí. Básicamente, lo que hace la traza es registrar todo lo que sucedió durante esa prueba. Entonces podrás recorrer esa línea de tiempo y a tu propio ritmo, retroceder y avanzar y realmente ver qué está sucediendo. Estas son capturas de imagen de cada acción. Puedes ver que cada una está resaltada con diferentes colores, localizador, marco de clic que era el iframe. Entonces cada tipo de evento se resalta allí y básicamente puedes recorrer eso, desplazarte, retroceder, ver suavemente qué estaba sucediendo. Puedes ver allí mi dirección de correo electrónico, Debbie, puedes ver que envié, puedes ver que no se agregó ninguna dirección allí. Podrás señalar fácilmente cuándo algo salió mal y así alguien podrá solucionarlo. Realmente pueden ver, oh mira lo que sucedió allí. Oh puedo ver, puedo realmente, ralentizarlo y acelerarlo y descubrirlo.

8. Debugging Tests and Running on CI with Playwright

Short description:

Ahora puedes depurar tus pruebas con el visor de trazas, que proporciona una vista completa de las acciones de prueba, incluidas las instantáneas del DOM, las solicitudes de red y el código fuente. Además, puedes ejecutar pruebas en CI utilizando GitHub Actions y analizar el Informe de Playwright para depurar y mejorar tus pruebas. Las pruebas de Playwright ofrecen la extensión de VS Code y Code Gen para generar pruebas automáticamente.

Ahora, si no quieres usar la línea de tiempo, también puedes ir a las acciones y demás. Ahora, las acciones, lo que va a hacer cuando haga clic aquí en el medio. Esta es una instantánea del DOM, no una instantánea de imagen, así que esto es aún mejor. Y puedes ver el evento de clic, la acción, el pequeño punto rojo se resalta allí en cada acción. Y podremos ver qué sucedió antes, qué sucedió después. Y podemos ir a esas acciones y puedes ver cuál fue la que se hizo clic.

El texto gracias al iframe, ahora estamos en el iframe. ¿Qué está sucediendo en ese iframe y cada uno de los localizadores que se hicieron clic allí, se espera que estén visibles, el iframe. Y luego, en el otro lado, puedes ver la llamada, la consola, la red y el código fuente. Por lo tanto, puedes ver en cada momento durante cada acción, qué está sucediendo en esa llamada, la duración, el tiempo de espera, qué selectores. Si es estricto, qué valor, todo el registro esperando al iframe, el selector también es visible, esperando a que el elemento sea visible, el elemento es visible, habilitado y editable. Y viste que realmente escribí allí porque es una instantánea real del DOM en lugar de una instantánea de imagen. Así que eso significa que también puedes abrir las DevTools de Chrome, puedes esperar el CSS allí, realmente puedes entender qué está sucediendo. Y luego puedes ver que las diferentes solicitudes de red están resaltadas allí. Así que tuvimos una solicitud de red allí, y a medida que avanzas, puedes ver todo lo que está sucediendo también en el código fuente. Por lo tanto, puedes ver el código fuente de tu prueba.

Ahora, esto es una PWA, lo que básicamente puedes enviar a otra persona para que pueda ver el código fuente en lugar de tener que abrir el código en sí. Por lo tanto, los metadatos también están ahí, puedes ver si es móvil, etc. Así que esta es una muy buena manera de depurar tus pruebas, también me encanta cuando estoy construyendo, pero sí, es muy, muy genial. Así que asegúrate de revisar el visor de trazas.

Ahora también puedes ejecutar tus pruebas en CI muy fácilmente con GitHub Actions. Esto es lo que obtendrás que ya está incluido para ti una vez que marques esa casilla, que es GitHub Actions. Y una vez que eso suceda, sabrás si tus pruebas fallaron o si pasaron. Lo verás en rojo, lo verás en verde. Y si están en rojo, especialmente querrás saber qué está sucediendo. Por lo tanto, puedes ejecutar, examinar esas acciones, avanzar, verificar el registro, y también puedes ver ese Informe de Playwright allí. Te mostré el informe localmente, eso es lo que obtienes en CI que luego puedes descargar y usar Playwright para servirlo. Y podrás hacer clic en eso y rastrear y visualizar ese rastro y ver qué sucedió en CI, ¿por qué falló? Y puedes depurar eso y mejorar tu prueba. Así que con las pruebas de Playwright, tienes la extensión de VS Code. Tienes Code Gen, amigo mío, que generará automáticamente la prueba por ti.

9. Benefits of Playwright and Community Engagement

Short description:

Puedes ejecutar pruebas en modo de depuración, con localizadores y localizadores de marcos para probar iframes. El visor de trazas proporciona un seguimiento completo de las acciones, y también puedes tomar capturas de pantalla y videos. El autoespera está integrado, eliminando la necesidad de tiempos de espera. Las pruebas se ejecutan en paralelo en todos los navegadores y dispositivos, con intercepción de solicitudes, seguimiento de redirecciones y gestión de cookies. Playwright es utilizado por todos, es de código abierto y gratuito. Conéctate con nuestros embajadores para obtener contenido increíble y participa en la comunidad de Playwright. ¿Estás listo para unirte a nosotros para mejorar las pruebas y divertirte? Echa un vistazo a nuestra documentación, Twitter, YouTube y canal de Slack.

Puedes ejecutar tu prueba en modo de debug. Tienes localizadores y localizadores de marcos. Por lo tanto, puedes probar iframes. Puedes ver informes, puedes abrir el visor de trazas y realmente ver un seguimiento completo de esas acciones. Todavía puedes tomar capturas de pantalla y videos si quieres, pero me encanta el visor de trazas.

Eso es por defecto, pero si prefieres videos, totalmente a tu elección, también puedes hacer eso. Autoespera integrada para todas las acciones. Por lo tanto, no es necesario establecer tiempos de espera. Las pruebas se ejecutan en paralelo de forma gratuita sin que tengas que hacer nada lo que lo hace súper rápido. Se ejecuta en todos los navegadores y dispositivos. Por lo tanto, emula dispositivos móviles también. Intercepta solicitudes, sigue todas las redirecciones y omite los cors y gestiona las cookies por ti.

Entonces, ¿quién está usando Playwright? Absolutamente todo el mundo. Quiero decir, mira ese gráfico. Playwright es de código abierto y gratuito. Es de Microsoft y nos encantan las estrellas de GitHub. Así que asegúrate de darnos una estrella. Y estos son embajadores increíbles. Échales un vistazo. Están en nuestra página de embajadores en la pestaña de community. y están creando contenido increíble sobre Playwright. Así que conéctate con ellos y revisa sus video y cursos y publicaciones de blog y demás y asegúrate de seguirlos.

Pero en serio, solo tengo una pregunta para ti. ¿Estás listo? ¿Estás listo para la pregunta? ¿Estás listo para usar Playwright? Espero verte a todos básicamente en la comunidad de Playwright creando grandes pruebas. Mejoremos la escena de las testing en general. Escribamos un código mejor. Probemos ese código y divirtámonos y hagamos que las testing sean fáciles y divertidas. Ese es el objetivo. Muchas gracias por tu tiempo. Echa un vistazo a nuestra documentación. Echa un vistazo a nuestro Twitter. Echa un vistazo a nuestro YouTube y a nuestro canal de Slack de community.

QnA

Q&A and Advantages of Playwright

Short description:

Y si quieres comunicarte por cualquier cosa, puedes encontrarme, Debs underscore Brian, en Twitter. Mi sitio web es Debbie dot codes. Espero ver a más de ustedes en la comunidad de Playwright. Gracias a todos, adiós. La charla de Debbie fue potente e informativa. Playwright funciona con lenguajes como C#, .NET, Python, TypeScript, JavaScript y Java. Puedes usar diferentes lenguajes para las pruebas en el mismo proyecto. Playwright ofrece flexibilidad para ejecutar pruebas dentro o fuera de tu proyecto. Hay una pregunta sobre las ventajas de Playwright sobre Cypress.

Y si quieres comunicarte por cualquier cosa, puedes encontrarme, Debs underscore Brian, en Twitter. Mi sitio web es Debbie dot codes. Y espero ver a muchos más de ustedes en la comunidad de Playwright. Gracias a todos, adiós.

Y esa fue una charla muy potente de Debi. Así que antes de la charla, hicimos la pregunta y ahora me gustaría invitar a Debbie al escenario conmigo y discutiremos las preguntas y respuestas y las preguntas de la encuesta. Debbie, por favor únete a mí. Hola. ¡Woohoo! Hola. Gracias Debbie. Esa fue una charla increíble y realmente aprendí mucho. Vi Playwright por primera vez y creo que lo voy a probar y muchos de los espectadores también, por supuesto, después de ver la charla.

Así que hicimos la pregunta, si se puede usar la API de Playwright con todos estos excepto, y creo que el 93% de las personas dijo C plus plus. ¿Qué dices? ¿Es esa la respuesta correcta? Creo que lo hicieron bastante bien. Es bastante complicado, ¿verdad? Porque es C plus, ¿verdad? Y no C plus plus, ¿verdad? Y eso es si no te gusta el C plus entonces puedes confundirte. Pero sí, Playwright funciona en C sharp o podemos decir .net, ¿verdad? También Python, TypeScript, JavaScript y Java. Así que tenemos una amplia cobertura de lenguajes en los que puedes escribir pruebas con Playwright. Exactamente, lo cual es genial, ¿verdad? Porque quiero decir, si trabajamos en la misma empresa, ¿verdad? Y ahora nuestros desarrolladores de backend que escriben en Java por ejemplo, o .net, pueden seguir escribiendo en su lenguaje y nosotros vamos a escribir en TypeScript y tú vas a escribir en JavaScript porque le tienes miedo a TypeScript, pero está bien. Y podremos seguir usando la misma herramienta de testing aunque estemos usando diferentes lenguajes y todos entenderemos las pruebas de los demás pero las escribiremos de la manera que entendamos. Así que es genial. Eso es genial, así que solo una pregunta que me viene a la mente después de esto es ¿puedes escribir pruebas en diferentes lenguajes para el mismo proyecto o algo así? Sí, puedes decidir poner tus pruebas con tu proyecto. Así que si estás escribiendo un proyecto de Node.js, entonces obviamente si tus pruebas están dentro de ese proyecto y quieres ejecutarlas, es mejor ejecutarlas en Node, pero también puedes ejecutarlas fuera de tu proyecto o simplemente configurar un servidor de desarrollo en GitHub Actions para lanzar ese servidor. Así que todo depende de dónde se esté ejecutando tu servidor para poder ejecutar esas pruebas o no, pero puedes probar completamente fuera de tu aplicación o dentro de ella, lo que funcione mejor. Genial, así que hay una pregunta. Mark R pregunta, sí, pensé que sería una pregunta. ¿Cuáles son las ventajas de usar Playwright sobre Cypress? Esa es una pregunta difícil. Porque sabes, Cypress es genial. Me encanta Cypress, ya sabes, solía trabajar con Cypress.

Advantages and Future of Playwright

Short description:

Las ventajas de Playwright sobre Cypress incluyen probar aplicaciones de chat, múltiples dominios y iframes. La nueva página de API getByTestId permite la configuración de atributos personalizados. Comenzar con Playwright es simple y se puede hacer en tres minutos siguiendo la guía proporcionada y la extensión de VS Code. El futuro de Playwright es hacer que las pruebas sean fáciles y divertidas, creando una cultura de pruebas para experiencias web sin frustraciones.

Entonces, ¿cuáles son las ventajas sobre Cypress? Supongo que lo que mostré en la charla específicamente, poder probar aplicaciones de chat, ir a través de múltiples dominios, ingresar a iframes sin nada más, simplemente funciona. Paralelismo gratis y probablemente otras cosas, pero no nos adentraremos en eso. Pero sí, prueba tus aplicaciones. Creo que ambos son frameworks bastante buenos, así que sí.

Tenemos una pregunta de Murray, con la nueva API page.getByTestId, ¿esto requiere que el atributo personalizado sea data test ID o puede detectar automáticamente otros atributos personalizados como data-test o algo similar? Sí, por supuesto, solo configuramos uno y si eso funciona para ti, perfecto. Pero si no, puedes escribir data mis hermosas pruebas si quieres, ¿verdad? Puedes cambiar ese atributo a lo que quieras para que puedas configurarlo. Genial, genial, sí, gracias. Eso suena como una buena idea para el nombre del atributo, seguro.

Sí, esa también es una pregunta para las personas que quieran comenzar con Playwright. ¿Cómo pueden empezar con Playwright? Te recomiendo que te tomes tres minutos de tu día. Eso es todo lo que va a tomar, tres minutos de tu día y simplemente sigue la guía de inicio. Sé que la gente dice, oh Dios mío, documentación, odio la documentación. No quiero, pero es tan simple porque literalmente te guía a través de la instalación. Puedes usar la extensión de VS Code, que mostré. Y ni siquiera tienes que escribir una prueba porque ya te han dado una prueba. Presiona el botón de reproducción, se ejecutará, ¿verdad? Ahora llevas un minuto y medio. Así que ahora otros 30 segundos para obtener la generación de código, crear una prueba simplemente haciendo clic. ¡Bang, tienes la otra prueba, ejecútala, y luego puedes subirla a GitHub Actions en otro minuto, tres minutos, ejecutar pruebas en GitHub Actions en CI fácilmente. Ves, solo se necesitan tres minutos, ¿verdad? Para pasar de cero a héroe en Playwright, sí. Y si fallas, si fallas, ven y habla conmigo. Si no funciona para ti, ven y habla conmigo. Quiero saber por qué, porque debería funcionar. Genial, sí, gracias, gracias.

También tenemos una pregunta, en tu opinión, ¿cuál es el futuro de Playwright? ¿El futuro? El futuro es que a todos les encantará testing y siempre estarán testing sus aplicaciones. Así que nunca tendremos problemas en los que hacemos clic en algo y no funciona, que el usuario se frustre. Ya no habrá frustración en la web porque si hacemos que testing sea fácil y divertido, más personas probarán. Las pruebas simplemente sucederán y se convertirán en una cultura, parte de la cultura. Como en los Países Bajos, andar en bicicleta, ¿verdad? Esa es la cultura. Hagamos que todo el mundo ande en bicicleta. Hagamos que todo el mundo realice pruebas.

Favorite Feature of Playwright

Short description:

El futuro de Playwright es brillante, con las pruebas volviéndose comunes y fáciles. La función Codegen es favorita entre los usuarios, ya que genera automáticamente pruebas, ahorrando tiempo y esfuerzo. El visor de trazas también es apreciado para solucionar pruebas fallidas. Con Codegen haciendo el trabajo pesado, Debbie tiene más tiempo para hacer deporte, dedicando alrededor de tres horas y veinte minutos a actividades físicas.

Sí, eso es lo que creo que es el futuro. Esa es una respuesta increíble. Realmente, como las pruebas son muy comunes y fáciles. Así que todos se meten en eso, seguro. Gracias.

Además, has estado trabajando en Playwright durante un tiempo, ¿verdad? ¿Cuál es tu función favorita de Playwright hasta ahora? Sabes, es un poco difícil porque estoy entre Codegen y el visor de trazas. Me encanta Codegen porque nunca tengo que pensar en cuál de esos localizadores necesito elegir. No pienso, solo hago clic, me dice cuáles y luego puedo verlo y decir, sí, eso está bien, se ve bien, perfecto. Escribe mis pruebas por mí, eso ahorra mucho tiempo. Y luego el visor de trazas, cuando la prueba falla, poder hacer eso. Pero realmente no tengo muchas pruebas fallidas. Así que voy a decir Codegen porque me está ayudando a hacer muchas pruebas. Pero cuando lo vi, también para mí, fue como wow, eso suena súper genial. Sí. Sí. Entonces, sí. Por eso tengo tanto tiempo para hacer deporte, ¿verdad? Porque Codegen escribe mis pruebas por mí. Ahora conoces el secreto de que Debbie hace tres horas y seis horas de deporte todos los días. Sí, como ya te pregunté pero solo para la audiencia nuevamente, ¿cuántas horas hiciste hoy y qué vas a hacer después para el deporte? Sí, corrí al gimnasio. Eso fue un kilómetro. Jugué un partido. Eso fue un partido de una hora y media. Y corrí a casa. Eso fue otro kilómetro. Y en una hora voy a correr al gimnasio para mi segundo partido. En realidad tengo dos partidos, pero son más cortos. Así que serán otra hora y media. Así que serán aproximadamente tres horas y veinte minutos. Es simplemente increíble. Como te gusta realmente motiva.

Staying Motivated and Thank You

Short description:

Para mantenerse motivado y lleno de energía, coloque actividades en su calendario. Debbie agradece a la audiencia por la charla y por compartir información sobre Playwright.

Entonces, en ese sentido, estoy muy y la otra pregunta es cómo mantenerse motivado y lleno de energía. ¿Cómo pueden las personas estar tan llenas de energía? Vamos, danos algunos consejos. Literalmente tienes que ponerlo en el calendario. Tengo en mi calendario que necesito hacer deporte. Porque si no, me quedaré aquí y programaré toda la noche y hasta me olvidaré de cenar. Así que literalmente lo pongo en el calendario, y sucederá. Si no está en el calendario, no sucede.

Me encanta. Pero gracias. Muchas gracias, Debbie, nuevamente por esta maravillosa charla y por mostrarnos todo sobre Playwright y responder todas las preguntas. Fue realmente increíble tenerte hoy con nosotros. Fue encantador verte de nuevo y gracias por recibirme aquí y gracias a todos por ver.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
TestJS Summit 2023TestJS Summit 2023
21 min
Everyone Can Easily Write Tests
Let’s take a look at how Playwright can help you get your end to end tests written with tools like Codegen that generate tests on user interaction. Let’s explore UI mode for a better developer experience and then go over some tips to make sure you don’t have flakey tests. Then let’s talk about how to get your tests up and running on CI, debugging on CI and scaling using shards.
TestJS Summit 2022TestJS Summit 2022
21 min
Tiny Tests, Large Results
Yes, Big things do come in small packages. For example, isn’t a unit test’s speed, feedback, and reliability fantastic? Did you know we can also have fast, focused, and reliable feedback from our functional e2e tests? Atomic e2e tests are those that are targeted and focused. They’re tiny in size but large in their impact. This tutorial will teach you how to create atomic e2e tests with several code examples. First, we will use Cypress.io to authenticate by setting a cookie. Instead of using a UI. Second, we will use Cypress.io to set a JSON Web Token for authentication. Join me, and let’s write tiny tests for large results.
TestJS Summit 2022TestJS Summit 2022
17 min
Testing Mail Service With Playwright
Top Content
We send emails to our users - account verification and newsletters. We allow the user to contact us by sending an email via inbuild form. Do we? Does the user receive an account verification email or exactly what notification they signed up for? We can cover this functionality as part of E2E tests: get an email and open it to check what is in it. We will need Playwright and a fake SMTP server to capture emails sent by the app.
TestJS Summit 2022TestJS Summit 2022
21 min
E2E Tests for Web3 Applications
Top Content
We will go through a brief explanation of what is Web3 and the architecture of a web3 application. Then we will talk about how to end-to-end test, its challenges, some test tools that are available, and a demo using cypress and metamask.Agenda: What is Web3; The Architecture of a Web3 Application; Web3 E2E Tests Introduction; Web3 E2E Tests Challenges; E2E Test Tools; Demo.
React Advanced Conference 2022React Advanced Conference 2022
29 min
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component can result represent hundreds or thousands of discrete visual states. How do you test it? Manually disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development has so many dimensions. Time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, and document our work — automating the grunt work of UI development.

Workshops on related topic

React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
TestJS Summit 2023TestJS Summit 2023
89 min
Building out a meaningful test suite that's not all E2E
Workshop
We're all taught to follow the Testing Pyramid but the reality is that we build out the Testing Christmas Tree. In this workshop, David will talk you through how to break down projects and put the tests where they need to be. By the end of the workshop you will be able to update your projects so that anyone and everyone can start contributing and truly living up to "Quality is everyone job".
He will walk you through:- Component Testing- API Testing- Visual Regression Testing- A11Y testing
He will also talk you through how to get these all setup in your CI/CD pipeline so that you can get shorter and faster feedback loops.
TestJS Summit 2021TestJS Summit 2021
146 min
Live e2e test debugging for a distributed serverless application
WorkshopFree
In this workshop, we will be building a testing environment for a pre-built application, then we will write and automate end-to-end tests for our serverless application. And in the final step, we will demonstrate how easy it is to understand the root cause of an erroneous test using distributed testing and how to debug it in our CI/CD pipeline with Thundra Foresight.

Table of contents:
- How to set up and test your cloud infrastructure
- How to write and automate end-to-end tests for your serverless workloads
- How to debug, trace, and troubleshot test failures with Thundra Foresight in your CI/CD pipelines
TestJS Summit - January, 2021TestJS Summit - January, 2021
127 min
Uniform Browser Automation Infrastructure
Workshop
In this workshop, I will show you how to quickly deploy and use browser automation infrastructure with Moon solution. We will start deploying everything on your workstation and will soon be able to run Selenium, Playwright and Puppeteer tests in parallel in the same cluster. Then I will demonstrate how to easily deliver the same experience for your team using a remote cluster in the cloud platform.