Pruebas de Aplicaciones Web con Playwright

♪♪♪ Pruebas de aplicaciones web con Playwright. Es hora de hacer tus pruebas correctamente. Hola a todos. Mi nombre es Debbie O'Brien. Soy Gerente de Programa Senior en Microsoft, y básicamente estoy trabajando en la promoción de Playwright. Soy una oradora internacional, profesora, YouTuber, contribuyente de open-source, y puedes seguirme en Twitter, devs underscore o'brien, para verme corriendo y haciendo ciclismo y 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. Pruebas con Playwright, pruebas de extremo a extremo confiables para aplicaciones web modernas, funciona en cualquier navegador. No importa en qué plataforma estés. 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 que voy a hablar mucho en esta charla, y multi-idioma, lo que significa que puedes ejecutar tus pruebas en C Sharp, en Java, en Python, o en JavaScript y TypeScript. Te voy a mostrar TypeScript hoy, pero puedes elegir cualquiera de los otros idiomas que quieras. Así que te voy a mostrar la extensión de VSCode porque realmente me encanta la integración con VSCode. Es muy, muy genial, pero no te preocupes, todavía puedes usar Visual Studio. Todavía puedes usar simplemente una terminal o lo que prefieras. Pero déjame mostrarte la extensión. Así que busca la prueba de Playwright para la extensión de VSCode de Microsoft, y luego básicamente en tu panel de comandos, solo 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 ellos 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 lo prefieres. Y luego también las GitHub Actions. Al hacer clic en esa casilla, vamos a obtener una GitHub Actions, y básicamente va a funcionar de inmediato sin que tengas que configurar nada. Podrás ejecutar tus pruebas en GitHub, en CI en cada push y solicitud de extracción.

Entonces, una vez que hayas instalado, obtendrás esto. Obtendrás esa carpeta de GitHub allí con las acciones dentro de ella, y obtienes una carpeta de pruebas, cuando tienes el archivo example.spec.ts. Eso tendrá una prueba muy pequeña allí, que vamos a repasar hoy, y luego hay un archivo de ejemplo de prueba, que tiene una aplicación de demostración de tareas pendientes, y puedes echarle un vistazo en más detalle.

Y luego la configuración de Playwright, en caso de que quisieras agregar más tarde 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 tocar la configuración, porque todo simplemente funciona.

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 ejecuta automáticamente en paralelo, lo que las hace súper rápidas. Así que voy a ejecutar las pruebas usando la extensión de VS Code. De nuevo, podrías usar la terminal y simplemente poner npx.playwritetest, pero aquí en la línea tres, verás este encantador triángulo verde. Así que voy a hacer clic en eso, y luego básicamente, va a ir bajando por cada línea, y va a ejecutar la prueba. Ahora, puedes ver que abrió una ventana del navegador para mí, y pude ver todo lo que está pasando. Lo voy a reproducir de nuevo. Puedes ver que es súper rápido, ¿verdad? Eso es porque tengo marcada esta opción de mostrar el navegador, y puedes desmarcar eso si quieres. Si no quieres ver el navegador, si quieres ver el navegador, asegúrate de que eso esté marcado.

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 así, tienes depuración en vivo y mensajes de error en el propio VS Code. Entonces, de nuevo, tenemos nuestra prueba aquí en VS Code, y simplemente voy a romper esto aquí, ¿verdad? Entonces getByText, voy a ejecutar esa prueba, va a fallar, y dice, error, violación del modo estricto. Entonces Playwright está diciendo, Oye, mira, hay uno, dos, tres elementos allí, y puedes tener todo el registro. Ahora, si no quieres leer el registro o no entiendes el registro, básicamente podrías establecer un punto de interrupción, y podrías ejecutar esa prueba de nuevo, para que puedas verlo. Así que lo ejecuto en modo de depuración, y ahora podemos pasar por eso y ver qué está pasando. Entonces, en este punto en el tiempo, Playwright está diciendo, Oye, mira, getByText, se resolvió a tres elementos. Aquí está uno de ellos. Aquí está el otro. Y en la parte inferior, tenemos otro que tiene la palabra estrella dentro de ese texto de inicio. Entonces Playwright no sabe cuál quieres que elija. Así que está diciendo, Oye, esto está rompiendo la violación estricta. Entonces puedes jugar y depurar en vivo esto y decir, Bueno, ¿qué pasa si pongo obtener estrella? Obtener estrella solo se resuelve a uno, así que eso estaría bien. Eso funcionaría. De nuevo, podemos volver aquí y jugar y poner algo como, imagina que ponemos Playwright, ¿verdad? Ponemos Playwright. Hay demasiados, ¿vale? Oye, hay como 12 de estos.

Esto va a ser realmente, realmente difícil seleccionar. Entonces, sí, básicamente pasando por esto, puedes ver en vivo lo que está pasando 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 puedes continuar, añadir más debugging, más puntos de interrupción, o simplemente seguir esa prueba, detenerla, reproducirla, reiniciarla una y otra vez, etc.

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

Entonces, los localizadores se ven así. Son estrictos por defecto. Así que es page.locator, data test ID equals directions.click, por ejemplo, digamos que estamos usando IDs. Ahora, mejor que eso, déjame mostrarte algo más porque Playwright ahora tiene nuevas API inspiradas por la biblioteca de testing. Como puedes ver en este tweet de alguien en la community, hay mucha emoción. Así que tenemos, ya sabes, getByText, getByRole, getByLabel, getByPlaceholder, getByAltText y getByTitle. Y solo para mostrarte eso en 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 espera que la página, getByText, welcome John sea visible. Así que asegúrate de que estás usando nuestros nuevos localizadores, getByLabel, getByRole, getByText, etc.

Y en caso de que te estés preguntando como, oh Dios mío, esto es tan difícil. ¿Cómo voy a, ya sabes, saber qué selectores elegir? ¿Cómo voy a saber cuáles? Tenemos una opción de selector de selección en VS Code. Ahora, si no estás usando VS Code, también puedes usar la terminal. Básicamente puedes lanzar el inspector y podrás hacer lo mismo. Así que déjame mostrarte. Así que aquí tenemos nuestra página. Y mientras pasamos el cursor sobre ella después de hacer clic en ese selector de selección, ahora tenemos getByRole heading. Podemos hacer clic en ese encabezado allí. Y dentro de nuestra caja de selector de selección, tenemos getByRole, heading, name, installation. Ahora puedo simplemente presionar Enter. Va a ir a mi portapapeles y ahora puedo ir a mi code y básicamente pegarlo en mi code. Y ahora tengo mi nuevo selector configurado y puedo usarlo. Así que puedo seguir aquí de nuevo y puedo pasar el cursor sobre y ver getByRole link. Este es name equals how to install PlayRide.

Vamos a revisar aquí, getByRole link. Esto es genial, getByRole button. Y este es el nombre, cambiar entre el modo oscuro y claro. Así que ese es el nombre de ese. Y de nuevo, pasando el cursor sobre cada elemento nos dará el selector que queremos. Así que es una forma fácil de ver qué selectores están disponibles para ti y fácilmente poder copiar eso y ponerlo en tu code y usarlo. Así que sí, pickSelectorBox allí, asegúrate de jugar con eso y diviértete mucho eligiendo tus selectores.

Así que 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', 'have your own' y muchos más. ¿Verdad? Debería ser Robert, ¿verdad? Sí, así que todas son tus afirmaciones. Así que eso es lo que va a conseguir unas pocas que auto-esperan. Así que asegúrate de usar esas afirmaciones para asegurarte de conseguir eso.

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

Y puedo continuar haciendo cosas. Así que estoy haciendo clic en este logo aquí porque quiero asegurarme de que el logo está ahí. El usuario puede que no haga clic en ese logo, ¿verdad? Pero estoy haciendo clic en él para que registre esa acción y luego cambiaré eso a una afirmación. De nuevo, hago clic en ese encabezado y normalmente eso 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 puedo iniciar sesión en Netflix. Bien, esto se ve genial. Haremos clic en ese título, asegurémonos de que está ahí, encantador, eso es perfecto. ¿Fue útil este artículo? Hagamos clic en sí. Y simplemente comprobaremos el gracias por tu feedback, ¿existía ese texto? Eso es genial. De nuevo, cambiaremos eso a una afirmación más tarde 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? Encantador. Simplemente enviemos una respuesta allí, digamos, testing tu chat y enviemos eso.

Así que ahora estoy en un iframe, testing el iframe en el sitio web. Quiero chatear con un agente, encantador. ¿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 comprobar que eso está ahí y veamos qué pasa. Así que ahora estamos interactuando con un iframe. Somos capaces de probar fácilmente ese iframe, como puedes ver, y asegurarnos de que el chat funciona como se esperaría que funcionara. Así que ahora estoy chateando con Martial, así que gracias Martial por responderme y solo voy a decir, hey, solo estoy testing el chat. Gracias Martial. Y lo enviaremos allí y luego no molestemos más a la gente de Netflix. Así que terminemos ese chat. Presionaremos fin, hagamos clic en ese botón. Sí, queremos terminarlo y envíame una transcripción de este chat por correo electrónico. Eso suena realmente genial en realidad.

Hagamos eso. Así que hacemos clic en eso e introducimos nuestro correo electrónico. Solo voy a poner Debbie y presionar enviar porque realmente no quiero poner mi correo electrónico. 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 a arreglar ese code, ¿verdad? Basándonos en cómo estamos encontrando cosas.

Como pueden ver, estoy haciendo clic alrededor e incluso estoy encontrando errores mientras hago clic alrededor y escribo la prueba y ni siquiera estoy escribiendo realmente ningún code. Muy bien. De vuelta 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, comprobar que esa imagen está ahí. Hagamos clic en ese botón, ese botón de mostrar más información y asegurémonos de que el cliente está ahí. Así que de nuevo, puedo comprobar en múltiples dominios. Puedo comprobar iframes y todo mi code se escribe por mí, como pueden ver. Y ni siquiera tuve que abrir ningún code, ¿verdad?

Ahora, obviamente vamos a tener que cambiar algo de esto, lo cual veremos en un segundo, pero pueden ver que mi iframe está siendo probado. Pueden 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 y asegurarme de que funciona simplemente haciendo clic en ese botón. Eso básicamente va a iniciar el navegador. Va a pasar por aquí y pueden ver que inició el chat y llegaremos a esa espera de un minuto y miren, Playwright va a esperar a que eso esté disponible. Bang, está hecho, está ahí. Tengo a Chunia esta vez. Todo funciona, yendo al siguiente dominio, testing que eso funciona y aparece mi pequeño botón. Va a esperar por ese botón. Está esperando, está esperando, aún no está ahí. Una vez que aparece, bang, llegué allí y todo es como se esperaba. Así que no tuve que establecer ningún tiempo de espera allí. Tenemos todo funcionando. Así que de nuevo, deberíamos estar usando afirmaciones web y vieron que hice clic en algunos de esos encabezados. Así que luego volví sobre esta prueba y la mejoré. Así que cambié algunos de ellos como el logo para ser una afirmación. Así que espero que sea visible y pude como mirar estas páginas, obtener por roll heading.

Si es un get by roll heading y quiero asegurarme de que eso es visible. Get by roll link, sí, eso es un evento de clic que es perfecto. De nuevo, el siguiente es la URL que está bien. Get by page link, clic, perfecto. Y podemos ir a través de la prueba y cada vez que vemos un get by roll heading, ese, solo queremos que sea una afirmación por lo que podemos modificar fácilmente cada uno lo que hace que sea mucho más fácil, ya sabes, escribir tu prueba, ¿verdad? Podrías escribir esto completamente por tu cuenta sin usar code gen si eso es lo que te gusta pero simplemente encuentro que usar code gen es mucho más fácil para empezar.

Así que hablemos de los informes de muestra. Así que cuando tienes tus pruebas, esto es en este momento, necesito usar el terminal para esto. No puedo usar la extensión VS Code. Así que quiero ejecutar mi prueba primero, npx playwright test, y luego quiero mostrar el informe. npx playwright show report. Ahora lo que esto me da es un informe completo de mis pruebas y puedo ver, vaya, falló en Firefox. Pasó en Chromium y WebKit y luego podría entrar e inspeccionar lo que pasó en Firefox. Puedo ver un registro completo de ello pero quiero mostrarte el rastro porque el rastro es mucho más divertido. Es ese pequeño icono de ahí, las tres pequeñas barras. Así que puedo hacer clic en eso y se abrirá el rastro o puedo entrar en detalle de eso y verás en la parte muy, muy inferior, el rastro también. Cuando hago clic en el rastro, lo que se abrirá y mostrará, bueno, primero que nada, déjame mostrarte cómo puedes ejecutar los rastreos, ¿verdad? Puedes grabar un rastro para cada prueba localmente usando npx playwright test dash dash trace on. Normalmente el rastro se ejecuta en CI en los primeros tres intentos. Si tu prueba falla en el primer reintento se graba un rastro para ti. No tienes que hacer nada para configurar eso, está todo hecho. Pero si quisieras hacerlo localmente, harías npx playwright test dash dash trace on y luego básicamente abrirías el informe y luego haces clic en eso y verás el rastro. Así que este es un rastro aquí. Básicamente lo que el rastro está haciendo es que está grabando cada cosa que sucedió durante esa prueba. Así que podrás entonces ir a lo largo de esa línea de tiempo y en tu propio tiempo, ir hacia atrás y adelante y realmente ver lo que está pasando. Así que estas son capturas de imagen de cada acción. Puedes ver que cada una está resaltada con diferentes colores, localizador, clic en el marco que era el iframe. Así que cada tipo de evento está resaltado allí y básicamente puedes pasar por eso, desplazarte, volver, ver suavemente lo que estaba pasando. Puedes ver allí mi dirección de correo electrónico, Debbie, puedes ver que envié, puedes ver que no hay ninguna dirección añadida allí. Serás capaz de señalar fácilmente cuando algo salió mal y así alguien va a poder arreglarlo. Realmente pueden ver, oh mira lo que pasó allí. Oh puedo ver, realmente puedo, ralentizarlo y speed up y averiguarlo.

Ahora, si no quieres usar la línea de tiempo, también puedes ir a las acciones y cosas así. Ahora las acciones, lo que va a hacer cuando haga clic aquí en el medio. Esto 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 está resaltado allí en cada acción. Y seríamos capaces de ver qué pasó antes, qué pasó después. Y podemos ir a esas acciones y puedes ver cuál fue clickeado.

El texto gracias por el iframe, ahora estamos en el iframe. ¿Qué está pasando en ese iframe y cada uno el localizador clickeado allí, esperaban que fuera visible, el iframe. Y luego en el otro lado, puedes ver la llamada, la console, la red, y la fuente. Así que puedes ver en cada momento durante cada acción, qué está pasando en esa llamada, la duración, el tiempo de espera, qué selectores. Si es estricto, qué valor, todo el registro esperando el iframe, el selector también es visible, esperando que el elemento sea visible, el elemento es visible, habilitado y editable. Y viste que en realidad 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á pasando. Y puedes ver entonces que tienes como las diferentes solicitudes de red están resaltadas allí. Así que uno de ellos tuvimos una solicitud de red allí, y a medida que avanzas, puedes ver todo lo que está pasando también en el code fuente también. Así que puedes ver la fuente de tu prueba.

Ahora, esto es una PWA, que básicamente puedes enviar a alguien más para que puedan ver el code fuente en lugar de simplemente, ya sabes, tener que abrir el code real. Así que los metadatos también están allí, ves si es móvil, etc. Así que esta es una forma realmente buena de depurar tu prueba, me encanta también cuando estoy construyendo, pero sí, es muy, muy genial. Así que asegúrate de revisar el visor de trazas.

Ahora también puedes ejecutar tu prueba en CI muy fácilmente con GitHub Actions. Esto es lo que vas a obtener que ya está incluido para ti una vez que marques esa casilla, que son las GitHub Actions. Y una vez que eso ha sucedido, sabes que tu prueba va a fallar o van a pasar. Vas a tenerlo rojo, vas a tenerlo verde. Y si están rojos, especialmente quieres averiguar qué está pasando. Así que puedes ejecutar, mirar esas acciones, seguir, revisar el registro, y también puedes ver ese informe de Playwright allí. Te mostré el informe localmente, ahí es donde obtienes el informe en CI que luego puedes descargar y usar Playwright para servirlo. Y podrás hacer clic en eso y trazar y, ya sabes, visualizar esa traza y ver qué pasó en CI, ¿por qué falló? Y ya sabes, depurar eso y mejorar tu prueba. Así que con las pruebas de Playwright, tienes la extensión de VS Code. Tienes Code Gen, mi amigo, va a generar automáticamente la prueba para ti.

Puedes ejecutar tu prueba en modo debug. Tienes localizadores y localizadores de marcos. Así que puedes probar iframes. Puedes ver informes, puedes abrir el visor de trazas y realmente ver un rastro completo de esos, aún puedes hacer capturas de pantalla y videos si lo deseas, pero me encanta el visor de trazas.

Así que eso es por defecto, pero si prefieres videos, totalmente depende de ti, también puedes hacer eso. Espera automática incorporada para todas las acciones. Así que no hay necesidad de 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. Así que también emula dispositivos móviles. Intercepta solicitudes, sigue todas las redirecciones y omite cores y gestiona cookies para ti.

Entonces, ¿quién está usando Playwright? Absolutamente todos. 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 de la pestaña 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 etcétera 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 escribir con Playwright? Espero verlos a todos básicamente en la community de Playwright creando grandes pruebas. Mejoremos la escena de las testing en general. Escribamos mejor code. Probemos ese code y simplemente divirtámonos y hagamos que las testing sean fáciles y divertidas. Ese es el objetivo. Muchas gracias por tu tiempo. Consulta nuestros docs. Consulta nuestro Twitter. Consulta nuestro YouTube y nuestro canal de Slack de la community.

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

Y esa fue una charla tan llena de energía 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 de hecho aprendí mucho. Así que vi Playwright por primera vez y creo que lo voy a intentar y muchos de los espectadores también, por supuesto, después de ver la charla.

Así que hicimos la pregunta, es como si la API de Playwright pudiera ser utilizada con todos estos excepto, y creo que el 93% de las personas dicen C plus plus. ¿Qué dices tú? ¿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 estás en los C pluses entonces podrías confundirte. Pero sí, Playwright funciona en C sharp o podemos decir .net, ¿verdad? Python también, TypeScript, JavaScript y Java. Así que tenemos una cobertura bastante amplia de lenguajes en los que puedes escribir pruebas de Playwright. Exactamente, lo cual es genial, ¿verdad? Porque quiero decir, si trabajamos en la misma empresa, ¿verdad? Y ahora nuestros desarrolladores de backend que están escribiendo 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 tienes miedo de TypeScript, pero eso está bien. Y aún así podremos usar la misma herramienta de testing aunque estemos usando diferentes lenguajes y todos entenderemos las pruebas de los demás pero todos las escribiremos de la manera que entendemos. Así que es genial. Eso es genial, así que solo una pregunta que me viene a la mente después de esto es que ¿puedes escribir todas las diferentes pruebas de lenguaje para el mismo proyecto o como... 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 ejecutarlo, es mejor que las ejecutes en Node, pero también puedes ejecutarlas fuera de tu proyecto o podrías configurar un servidor de desarrollo en GitHub Actions para lanzar ese servidor. Así que todo depende de dónde esté funcionando tu servidor para poder ejecutar esas pruebas o no, pero puedes probar totalmente fuera de tu aplicación 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 horrible. Porque sabes, Cypress es genial. Me encanta Cypress, sabes, solía trabajar con Cypress.

Entonces, ¿cuáles son las ventajas sobre Cypress? Supongo que lo que mostré específicamente en la charla, poder probar aplicaciones de chat, ir a través de múltiples dominios, entrar en Iframes sin nada más, simplemente funciona. Paralelismo gratis y probablemente otras cosas, pero no vamos por ese camino. Pero sí, prueba tus aplicaciones. Creo que esos dos son marcos bastante buenos, así que sí.

Entonces tenemos una pregunta de Murray, con la nueva API page.getByTestId, ¿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, podrías escribir data mis hermosas pruebas si quieres, ¿verdad? Puedes cambiar ese atributo a lo que quieras así que puedes configurarlo. Genial, genial, sí, gracias. Eso suena a una idea bastante buena para el nombre del atributo, seguro.

Sí, entonces, esa es también una pregunta para las personas que podrían querer empezar con PlayWrite. ¿Cómo pueden empezar con PlayWrite? 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 literalmente solo pasa por la guía de inicio. Sé que la gente dice, oh Dios mío docs, odio docs. No lo quiero pero es tan simple porque literalmente solo te lleva 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 play, va a correr, ¿verdad? Ahora estás en un minuto y medio. Así que ahora otros 30 segundos para obtener code gen, crea una prueba solo con hacer clic. Bang, tienes la otra prueba, ejecútala, y luego puedes subirla en GitHub Actions en otro minuto, tres minutos, prueba ejecutándose en GitHub Actions en CI fácil. Verás, 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. Genial, sí, gracias, gracias.

Entonces 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 va a encantar testing y siempre estarán testing sus aplicaciones. Así que nunca tenemos problemas de que hagamos clic en algo y no funcione, que el usuario se frustre. No vamos a tener más frustración en la web porque si hacemos testing fácil y divertido, más personas harán pruebas. Testing simplemente sucederá y se convertirá en una cultura, parte de la cultura. Como en los Países Bajos, montar en bicicleta, ¿verdad? Esa es la cultura. Vamos a hacer que todo el mundo monte en bicicleta. Vamos a hacer que todo el mundo haga pruebas.

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

También, ¿cuál es, has estado trabajando en Playwright durante un tiempo, ¿verdad? Entonces, ¿cuál es tu característica favorita de Playwright hasta ahora? Sabes, es un poco difícil porque estoy entre Codegen y el visor Trace. Me encanta Codegen porque nunca tengo que pensar en cuál de esos localizadores necesitas elegir. No pienso, simplemente hago clic, me dice cuáles y luego puedo mirarlo y decir, sí, sabes, eso está bien, se ve bien, perfecto. Escribe mis pruebas por mí, eso ahorra mucho tiempo. Y luego el visor Trace, cuando la prueba falla, poder hacer eso. Pero realmente no estoy obteniendo muchas pruebas fallidas. Así que voy a decir Codegen porque me está ayudando a realizar muchas pruebas. Pero luego cuando lo vi como para mí también, fue como que Codegen fue como, wow, eso suena súper genial. Sí. Sí. Entonces, sí. Por eso tengo tanto tiempo para hacer deporte, ¿verdad? Porque Codegen está escribiendo mis pruebas por mí. Ahora ves el secreto de Debbie haciendo tres horas y seis horas de deporte todos los días. Sí, así que ya te pregunté pero solo para la audiencia de nuevo, ¿cuántas horas hiciste hoy y qué vas a hacer a continuación para los deportes? Sí, así que corrí al gimnasio. Eso fue un kilómetro. Jugué un partido. Eso fue un partido de poder 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. Tengo en realidad dos partidos, pero son partidos más cortos. Así que será otra hora y media. Así que serán unas tres horas, 20 minutos. Eso es simplemente increíble. Como la forma en que te gusta realmente motiva.

Entonces, en esa nota, estoy muy, y la otra pregunta es cómo mantenerse motivado y tan enérgico. ¿Cómo pueden las personas ser tan enérgicas? Danos algunos tips, vamos. Literalmente tienes que ponerlo en el calendario. Está en mi calendario que necesito hacer deporte. Porque si no, voy a sentarme aquí y voy a code toda la noche y olvidaré incluso cenar. Así que literalmente lo pongo, si está en el calendario, va a 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 tenerme aquí y gracias a todos por ver.