Vamos con una pedazo de crack, es que es todo cracks, y es que Debbie es Senior Program Manager en Microsoft
y se está dedicando especialmente a Playwright, que es muy interesante para hacer testing en tu end.
Así que vamos con Debbie O'Brien. Hola, Debbie, ¿cómo estás?
Fantástico, pero yo quiero preguntar a ti, ¿cómo estás después de tantas cervezas?
Bien, es mi segunda cerveza, acabo de empezar.
Ah, vale, vale, está bien. Tú y yo sabemos que ambos tenemos un buen control, ¿no?
Siempre bebemos con responsabilidad, pero que con dos cervezas todavía podemos programar.
Con tres ya, igual, alguna línea o sabes, Torcía, ¿no?
O lo programas más.
Esa me parece una muy buena idea, Debbie. Bueno, ¿cómo estás? ¿Qué tal todo?
Ah, fantástico, pero madre mía, mucho nervios. Hay 9.500 personas. ¿Dónde lo han sacado tanta gente?
Pues he llamado a mi familia, es que tengo mucha familia en Andalucía, le he dicho, os tenéis que conectar todos a la vez.
Y están aquí todos.
Todos los primos, los tíos.
No saben nada, no se están enterando de nada.
Pero bueno, me han dicho, pero luego me mandan la cerveza, ¿eh?
Y yo sí, sí.
Ah, viene por la cerveza, ¿eh?
Ahí está el truquillo, que le voy a decir. La selecta de San Miguel la tienes ahí.
Pues, Debbie, te dejo el stage todo para ti. Muchas gracias por hacer el esfuerzo de hacerla en castellano, en español.
Así que te lo agradezco un millón.
Y espero que todo el mundo tenga paciencia y comprensión con Debbie, que habla bien español.
Habla perfectamente español, pero bueno, para que poco a poco, pues, que se lo va a trabajar mucho.
Y Playwright tiene muy buena pinta. Así que te dejo con ello, Debbie, y te mando un abrazo enorme.
Mucha suerte. Ánimo.
Bueno, test E2E con Playwright.
Mi nombre es Debbie y vamos a hablar de Playwright Testing.
Playwright, reliable end-to-end testing por tus aplicaciones.
Cualquier browser, cualquier platform, un API, los test en completamente isolación, súper rápido, y tu link es impresionante.
Vamos a ver.
Si estás utilizando VS Code, hay una extensión.
Y es una pasada.
Entonces, lo puedes instalarlo y, como así, directamente puedes install Playwright desde VS Code.
So, sin abrir el terminal, vamos a utilizar Playwright. Voy a enseñarte.
Tú puedes elegir, en este momento, cuál browser quieres.
Quieres Chromium, quieres Firefox, quieres WebKit, los tres, solo uno, lo que tú quieres.
Y mira esto, añadir on GitHub Actions Workflow.
Entonces, automáticamente vamos a añadir el workflow sin tener que hacer cualquier trabajo.
Y vamos a ver cómo funciona esto después.
Bueno, una vez que lo has instalado, eso es lo que tienes en tu VS Code Editor.
Tienes el workflow que está hecho.
Tienes el Node Modules, el carpeta de test que tiene un ejemplo spec file.
Un test examples que es otro ejemplo de un todo app que te puedes mirar en tu tiempo.
Un getignore, el package lock, el package JSON.
Y luego el Playwright config donde puedes configurar cosas si lo necesitas.
No vamos a ni necesitar. Voy a enseñarte todo.
Entonces, lo que tenemos que hacer es lanzar el test, ¿vale?
Tenemos el test de ejemplo. Vamos a lanzarlo.
Y podemos lanzar todos los test, un test específico.
Los test se lanzan en paralelo y es súper, súper rápido.
Entonces, otra vez, directamente en VS Code, hay un triángulo, justamente en línea 3.
Y vamos a click en el triángulo.
Y como así, los test se lanzan.
Y lo has visto, se ha abierto en browser.
Era súper rápido. A lo mejor ni has visto y era demasiado rápido.
Pero aquí lo ves, ¿vale?
El carpeta test, aquí es el test de ejemplo.
Yo puedo clicar el show browser.
Lo puedo quitar y ya no he hecho nada.
Voy a parar el browser y ahora voy a intentar otra vez.
Entonces, aquí, vale, súper rápido.
No has visto, ¿vale?
Ahora, con el browser y se abre el browser.
Entonces, tú puedes elegir si quieres ver el browser cuando estás haciendo tu test o si no.
Es completamente nuevo.
Si no has visto esto antes, es un nuevo feature del VS Code extension.
Bueno, ¿qué pasa cuando la cosa no va bien?
Que a veces los test hay bugs, siempre hay bugs.
Hay live debugging en el VS Code.
Entonces, aquí vamos a ver.
Vamos a romper el test.
Entonces, en vez de poner text get started, vamos a cambiarlo y poner start, ¿vale?
Esto se va a romper.
Y voy a enseñarte por qué.
Ok, lanzamos el test y dice, uff, hay un problema.
El error, strict mode violation, hostia.
¿Qué pasa?
Pues, mira, está diciendo que he intentado y hay tres cosas que tiene start.
Entonces, no sé cuál quieres que yo cliquear.
¿Cuál quieres?
Porque yo no estoy seguro.
Entonces, el test se rompe.
Vale, entonces, lo podemos poner un breakpoint aquí, cliqueando ahí.
Y podemos right click y debug test.
Entonces, lanzamos el test y debug mode.
Esto, lanzamos al browser aquí y lo vemos.
Key en línea 13 se para y el text equal star se mantiene.
Get started, el get up star.
Y si continúes abajo, encontramos otra abajo en el footer.
Entonces, playwright no sabe cuál tú quieres elegir.
Entonces, tenemos que poner los selectors bien.
Puedo poner text equals docs y lo ves.
Mira, docs hay uno de dos.
Puedes poner playwright, hay uno de doce.
Eso es un selector terrible.
No pones esto porque esto se va a romper y va a decir, wow, ¿qué quieres?
Siempre deberías elegir los selectors bien.
Vamos a volver a poner get started.
Aquí el test funciona y podemos continuar con el día.
Vale, locators.
Hemos hablado de locators aquí en los test.
¿Qué es un locator?
Es una manera de encontrar un elemento en la página en cualquier momento.
Auto waiting, automáticamente.
Y retryability.
Sin que tienes que hacer nada, es automático.
Entonces, cuando escribes tu locator, se pones page.locator.
Y aquí pones tu selector.
Puedes poner text selectors, CSS selectors, ID, lo que quieres.
Hay muchos.
Y hay mucha documentación sobre cuáles selectors puedes usar.
Bueno, aquí, hablando de selectors, también podemos elegir un selector.
Si no lo tenemos claro o seguro, qué selector podemos elegir.
So, aquí le pongo el botón pick selector.
Y puedo hacer un hover de la página.
Y mira, H1 has text installation.
Or span has text getting started.
Span has text installation.
Or area label, homepage.
Esto parece bien.
Voy a hacer un clic.
Cuando hago un clic, me está poniendo en esta caja aquí que pone pick selector.
Entonces, desde ahí, yo puedo aceptarlo, copiarlo y usarlo en el test.
O puedo continuar mirando otro selector.
Aquí, on a side, text equals writing test.
Esto parece bastante interesante.
Me gusta esto.
Voy a hacer clic ahí.
Esto es el selector que estoy buscando.
Entonces, desde aquí, clic en enter o copiarlo.
Y puedo ponerlo directamente en mi test, clic en enter o paste.
Y entonces, ya, pues, he elegido un selector.
Y voy, puedo lanzar este test con este selector.
Siempre deberías usar web first assertions.
Entonces, expect a locator to be checked, to be disabled, to be editable, to be empty, hidden, visible, to contain text, to have class, to have count, to have CSS.
Hay un montón.
So, deberías siempre usar los web first assertions.
Bueno, ay, ese es mi amigo.
Se llama Coach Jen.
Y Coach Jen lo que hace es generar tu test grabando tus acciones.
Voy a enseñarte.
Vale, aquí tenemos el test, ¿vale?
Y voy a generar un nuevo test.
Entonces, puede clicar en el sidebar del test y clic en record new.
Record new se lanza un browser, ¿vale?
Está vacío, no hay nada, ¿OK?
¿Y qué pasa en VS Code?
Se ha abierto un nuevo archivo que se llama test1spec.
Importa test from playwright y tengo el test, ¿vale?
Entonces, voy a testear el me.conf website.
Vamos a ver.
Entonces, aquí estoy en la página y voy a ver.
Mira, await page go to me.conf.
Se ha escrito para mí.
Voy a clicar en el title, a ver si el title está ahí.
Y perfectamente me ha escrito que el texto está ahí, ¿vale?
¿Qué más?
El speakers.
Vamos a clicar en speakers.
Y, ah, mira, ahí estoy, ahí estoy, ¿vale?
Y voy a clicar en mi nombre, mi imagen, asegura que hay un alt tag, muy importante, accesibilidad,
perfecto, image alticos, 7, mira, he hecho esto súper rápido, sin hacer nada, mi amigo
Kochen es fantástico, ¿eh?
¿Qué más podemos hacer?
Puede clicar en el Twitter link, en el GitHub link si quería, o ¿qué más?
Yo creo que voy a ver si la agenda funciona, porque muy importante la agenda de esta conferencia.
Lo clique ahí y mira, ahí está el crack del Miguel Ángel.
La palabra agenda y Miguel Ángel está ahí.
Y el hora, que esta conferencia ha empezado a las 5, aseguramos que esto está bien.
Y aquí está mi test.
Todo escrito para mí y solo hecho es cliquear y asegurar que todo funcionara.
Una vez cliqueando, el test está ahí, puedo cancelar esto y puedo lanzar el test, asegurar que funciona.
Y, claro, vamos a ver, mira.
Tú, tú, tú, tú, tú, tú, tú, y súper rápido, test funciona y puedo ir a tomar más cervezas ya.
Vale, perfecto.
Este es el Kochen.
Now, muy importante, el Kochen, tú la ves, si ha hecho clics y todo eso, yo voy a enseñarte que hay que trabajar un poquito más en el test.
No solo generar esto y ya está, ¿vale?
No, después de esto, bebeme las cervezas y ya está.
Hay un poquito más de trabajo y voy a enseñarte el porqué en un minuto más.
Primero, voy a enseñarte el show reports.
Tú puedes lanzar un report, NPX Playwright show report, que lo vamos a escribir aquí en el terminal.
Esto lo tenemos que hacer en el terminal.
Es la primera cosa que hemos, tuve que abrir el terminal.
Y aquí tenemos el report.
El report es un HTML report y que me enseña todo, todo lo que hemos hecho.
Es todo el código, bueno, que yo he escrito, ¿no?
Que el Kochen ha escrito.
Y podemos cliquear en todo y a ver todo lo que está ahí.
Perfecto.
Muy bien.
También podemos ver los trace files.
Normalmente los traces se lanzan en CI.
Pero podemos lanzarlo en local, por si quieres ver, porque quería enseñarte.
Entonces, utilizamos dash dash trace on y lanzamos el test con el terminal.
Tenemos que hacerlo con el terminal para que esto funcione.
Entonces, le pongo NPX Playwright test dash dash trace on porque quiero que los traces son on.
Normalmente solo es cuando el test falla que lance eso.
Pero yo quiero ver, quiero enseñarte.
Entonces, estoy poniendo el trace.
Bueno, 6 test pass.
Eso es porque ha lanzado los test de ejemplo más el test one en todos los browsers.
Vamos a ver.
Mira, el example spec en Chromium, en Firefox y en WebKit.
Y el test one, que es lo que hemos generado.
Y también está en Chromium, Firefox y WebKit.
Y aquí está el test que hemos escrito.
Pero aquí tengo el trace.
Puede clicar aquí y mira qué es esto.
Qué interesante esto.
Mira, aquí es un timeline donde todas las acciones me están enseñando todo lo que ha pasado en el test en cada momento, con cada acción.
Expect, click, hashtag, agenda, etcétera, etcétera.
Y puede ver qué ha pasado, qué cambios he hecho en la página.
Y todo eso es impresionante.
Pero también puedo ir uno por uno de las acciones.
Y puede ver exactamente qué ha pasado con esta acción.
Mira, qué ha pasado before, el after, qué era la acción, qué ha cambiado.
Y lo ves, hay cosas moviendo en el medio.
Porque es un DOM snapshot.
No es una imagen, es un DOM snapshot.
Por eso está como live.
Pues aquí puede ver todas las acciones.
Ha clicado en mi nombre, Debbie.
Esto está perfecto.
Selector text equals Debbie.
Muy bien.
Strict equals true.
Console, no hay errors.
Muy bien, Miguel Ángel, no hay errores.
El source code, el network.
Y también, en el otro lado, podemos ver también el metadata.
Se puede mover que está lanzado en Chromium.
Y el tiempo, la duración, es mobile false, etcétera, etcétera.
So, es una manera súper, súper, súper guay en ver qué está pasando en tu test.
Y cuando tienes un fallo, eso es súper, súper chulo.
Bueno, ¿qué más podemos hacer?
Pues, lanzar los tests on continuous integration.
Y esto siempre es el, oh, por eso cuesta mucho, es muy difícil.
Pero no, no es difícil.
Es súper fácil gracias a los GitHub Actions que hemos instalado cuando hemos lanzado Playwright.
Entonces, aquí, esto está en la carpeta, en el GitHub Workflows carpeta.
No tenemos que hacer nada.
Está ahí.
Y dice, básicamente, on push, on pull request, se va a lanzar el test.
Nada más.
Es todo.
Entonces, he creado un GitHub Repo.
He subido esto.
Puedes verlo en devs-obrine middle conf test.
Y aquí es mi repo.
Lo he subido.
Y me voy a Actions.
Y mi test.
Y está en Rocko.
Hostia.
¿Qué ha pasado aquí?
Vale.
Los test no han ido bien.
He ido bien en mi máquina.
Y no he ido bien en continuous integration.
¿Qué pasa aquí?
Pues, mira.
Puede click aquí en el test y puede ver todo el log de qué ha pasado.
Y puedo intentar mirar y leer el log y a ver si encuentra una manera.
Hay tres retries.
Por eso hay tanto.
So, solo, mira.
Me voy al primer retry.
Y en el browser, ¿qué ha pasado?
Mira el log.
Se dice, locator click error, strict mode violation.
Hemos visto un strict mode violation antes.
So, no encuentra.
Encuentra dos elementos de mi doc.
Con.
Empieza el amido con.
Es que Miguel Ángel ha cambiado el texto justo cuando yo he lanzado el test en producción.
Y él no ha cambiado los test.
Esto es lo que ha pasado.
Vale.
También tenemos el playwright report.
Podemos bajar el playwright report.
Y lo que podemos hacer es, podemos ponerlo en nuestra VS Code.
Yo estoy poniendo donde está el playwright.
So, lo pongo esto aquí.
Y lo puedo lanzarlo.
Necesito utilizar playwright para lanzarlo.
No vale solo abrirlo porque no va a funcionar.
So, tenemos que abrir dentro playwright usando playwright.
So, MPX playwright show report.
Y se llama playwright report.
Eso es como lo he llamado cuando lo he bajado.
Lo lanzamos esto y lo vemos.
Mira, está en rojo el test.
Vale.
Entonces, podemos ver un poquito qué ha pasado.
Vale.
Mira, el primer run hay un error ahí.
Hostia, ¿qué ha pasado aquí?
En el retry hay el error aquí.
Y en el otro retry, ¿dónde está el otro error?
En el primer retry siempre es donde está el trace.
So, vamos a mirar el trace.
Vale.
Aquí tenemos un trace muy pequeño porque se ha roto el test.
Y lo miro, ¿vale?
Esto es, se ha quedado aquí.
El locator.clicktext equals midi.conf.
Aquí es el fallo.
El error strict mode violation text equals midi.conf.
Dos elementos.
¿Qué ha pasado?
Pues, el primero es el H1 class.
Vale, perfecto.
Eso es lo que quería.
Pero hay otro, otro.
Porque cuando yo he escrito el test, era falta 20 minutos para empezar.
Y ahora es, empieza la midi.conf con el mismo, el mismo.
Y playwright está diciendo, no sé cuál, debería cliquear.
Entonces, test roto.
Damn.
Pero es muy fácil verlo.
Y entonces, ¿cómo así yo puedo arreglarlo fácilmente?
Entonces, aquí, en vez de poner text equals midi.conf,
yo debería arreglar esto usando un selector mucho mejor.
H1 has text.
Y entonces, pongo esto, midi.conf, dentro del H1 has text.
Entonces, ¿cómo así?
Solo va a mirar si es un H1.
Y Miguel Ángel solo va a hacer un H1 en la página porque él
escribe el código siempre bien.
Entonces, bam.
Test funciona y puede subir esto al GitHub.
También hay que arreglar un poquito más porque algunos de estos
también van a tener más fallos.
Entonces, es mejor siempre usar los web first assertions.
Entonces, lo que genera lo cogen, está bien.
Para empezar, está bien.
Pero luego deberías ir ahí y empezar a poner expect locator to have
class or to be visible y arreglar los test un poquito.
Pero una vez que haces esto, lo subes ahí y ya te puedes ver
añadiendo el web first assertions.
Los test han pasado.
Todo funcionó.
Y yo estoy feliz y puede beber la cerveza San Miguel.
Entonces, Playwright testing.
Tienes el VS Code extension, tienes Code Gen.
Puedes lanzar y live debug.
Hay locators, frame locators, iFrames también.
Puedes ver reports.
Puedes ver los trace files.
O si hay fallos, puedes fácilmente encontrarlo y arreglarlo.
Auto wait, automático.
Tests en paralelo.
Y cores, manage cookies.
Y mucho, mucho, mucho más.
Incluyendo component testing que está en preview.
Pero básicamente, ¿estás listo para Playwright?
Muchas gracias.
Bueno, Debbie.
Oye, qué pena, qué pena que no te puedo enviar la cerveza.
Te juro que te la daba así.
Es para los tomas.
Porque te la has ganado, ¿eh?
Sí, sí.
Y San Miguel tiene muy buen cerveza sin gluten.
Que yo la tomo sin gluten y está muy buena.
Ah, tiene un montón de cerveza.
Yo estaba alucinando.
Porque ahora como me han enviado unas cuantas.
Mira, ojalá si te pasas por Barcelona te doy unas cuantas.
Que te las ha ganado.
Yo voy a venir, ¿eh?
Sí, bueno, pues avísame.
¿Será que cuando has venido y me has avisado no te he atendido?
No, no.
Fue fantásticamente, ¿eh?
Pues repetimos, repetimos.
Oye, Debbie.
O sea, yo ya estaba enamorado de Playwright.
Pero he alucinado con tu amigo.
El Code Gen.
Este.
Sí, ¿eh?
Sí, sí.
Tu amigo este.
Genial, ¿eh?
Y hay un montón de comentarios positivos aquí.
Todo el mundo estaba diciendo que no solo tienes un español increíble.
Sino que además tienes un español muy bonito.
Gracias al acento.
Porque tienes un acento en español muy bonito.
Así que, nada, perfecto.
Que hablas muy bien.
Mira, hablas muy bien.
Qué bien hablas español.
Bueno, ya ves.
Qué bien.
O sea, que nada, increíble.
Lo has hecho increíble.
Mira, había gente que no conocía Playwright y que lo están descubriendo ahora.
Así que, nada, felicidades.
Si alguien tiene alguna pregunta, que la deje, que voy a estar atento y la pongo por aquí.
Mira, dice...
Es que esto va muy rápido.
Perdona, ¿eh?
Es que va muy rápido.
No sabía que Playwright tenía time travel.
Excelente.
Yo tampoco lo sabía.
Increíble.
Trace View es impresionante.
Sí, es una pasada.
Brutal.
No, no, no.
O sea, es que he alucinado porque a veces sabemos o pensamos que sabemos utilizar algo,
pero no sabemos que si las extensiones, herramientas que tiene por ahí...
Oye, muchas gracias por utilizar la middleconf de ejemplo, ¿eh?
Sí, ¿eh?
Sí, sí.
Me ha hecho mucha ilusión.
Mira, dicen por aquí, si admite test regresivos.
¿Qué es regresivos?
Ya, la verdad es que en este caso no he entendido muy bien el concepto de regresivos.
¿Test regresivos?
Quizás regression, que es de...
Entonces, sí.
Sí.
Nadie utiliza Selenium.
Hombre, yo creo que con herramientas como Playground, en este caso, yo diría que ya no hacen falta, ¿eh?
Con todo mi cariño, ¿eh?
¿Permite Playground grabar vídeos como Cypress?
Claro, tú puedes grabar un vídeo y puedes grabar un snapshot, pero ¿para qué?
Cuando tienes el Trace Viewer vas a ver el vídeo, pero hay gente que le prefiere vídeo a lo que tú quieres.
Pero vídeos pesan mucho también y el Trace Viewer menos.
Dicen por aquí...
Ay, no, esto no era.
Se ve que se ha movido.
Pero alguien...
Es que hay muchos.
Es que sí hay muchos, hay muchos.
Es espectacular.
¿Dónde podemos aprender más de Playwright?
Pues básicamente Playwright.dev, donde está la documentación y esto es escrito todo en Get Started Guide mucho más fácil.
Y voy a hacer vídeos, eso sí, en inglés.
Bueno, pero así practica la gente.
Y tú también estás haciendo cosas, ¿no?
De vez en cuando en español.
Yo hice aquí en directo, para poder comprar una Xbox, hicimos un scrapper con Playwright y la gente no sabía que era Playwright y tal y alucinaron.
Y la verdad que yo estoy... Me encanta Playwright, me encanta.
Aquí tenéis la página que decía Debbie, justamente.
Pues mira, ya aprovechando que tenemos a Debbie por aquí, vamos a hacer una cosita.
Y es que os he prometido antes que íbamos a regalar unos libros.
Y van a ser unos cuantos.
Sí, lo que pasa es que se ha caído la plataforma de los libros justo donde los íbamos a regalar.
Bueno, pues amigos y amigas, aquí tenéis 250 libros gratis de Aprendiendo Git.