Esperar por los elementos
Clase 10 de 15 • Curso de Automatización de Pruebas con Puppeteer
Contenido del curso
Vannya Esnif Fuentes Mora
student•
hace 4 años
Luis Jhordy Mamani Arias
student•
hace 3 años
Clase 10 de 15 • Curso de Automatización de Pruebas con Puppeteer
Contenido del curso
Vannya Esnif Fuentes Mora
Luis Jhordy Mamani Arias
Eduardo Rafael Romero Bernal
Geovanni Atavales Quiroga
Ronald Riera Sanchez
Irving Juárez
Ronald Riera Sanchez
Irving Juárez
Carlos Rodríguez
Jorge Blanco
Irving Juárez
Luis Ernesto Yepes Fernandez
Alejandro Quintero Mejía
Jair Israel Avilés Eusebio
Geovanni Atavales Quiroga
Juan Carlos Mora Parra
Hardware Andres Rodriguez Pisa
Jose Eduardo Miranda Valderrama
Laura Ivonne Moreno
Hernaldo Alvarez
Javier Fuentes Mora
Javier Fuentes Mora
Karen Barrera
Karen Barrera
Fredy Daniel Flores Lemus
Javier Fuentes Mora
Javier Fuentes Mora
Andres Mauricio Sanchez Barrios
Javier Fuentes Mora
Julianny Caicedo
David Camilo Salas Muñoz
David Camilo Salas Muñoz
Osmel Jose Vera Isasis
Nanet Mor
Mario Alexander Vargas Celis
Por si no saben como correrlo con Jest, solo falta agregar el .test , o sea el archivo quedaría: tiposDeEspera.test.js
Eso mismo me paso ya decía por que no funciona jajaja
Aquí les comparto este video interesante sobre cómo exportar desde google chrome un script de puppeteer: https://youtu.be/K8NMqOEkxKM
Esto es maravilloso
Interesante realmente, pero hice una prueba y te crea muchas funciones y comandos innecesarios para un test, ya que graba hasta los movimientos del Mouse.
El metodo await page.waitForTimeout(3000) esta ahorita deprecado, la manera de hacerlo ahora es la siguiente:
await new Promise(r => setTimeout(r, 3000))
La r es un valor generico que en este case representa resolve, pero en este caso no sale ningun error si no lo "llenan" con alguna function
Si esta depreciado pero igual sigue funcionando jejeje...!
El problema con que este depreciado es que puede que ya no funcione en futuras versiones de Puppeteer
Que ansiedad me da que el profe no use ;
Js en las nuevas versiones no lo exige
Lo puedes agregar en la configuracion de prettier, para que se agreguen solos. Asi ya tampoco te preocuparias por usarlos
https://demoqa.com/modal-dialogs
Web usada por el profe
Si quieres que no corran los demás test, agrega una x al describe de estos archivos:
xdescribe('...' , ( ) => {...})
FYI,
El metodo waitForTimeout ha sido marcado como obsoleto a partir de la version .
En su lugar se recomienda ejecutar un setTimeout
Fuente: https://github.com/puppeteer/puppeteer/pull/8793/files
Si quieren evitar que se ejecuten las pruebas anteriores cada vez que guardan el archivo, pueden agregar ".skip" luego del describe de las pruebas que no quieren que se ejecuten.
Gran aporte para mi compañero!!!
Ya no esta disponible await page.waitForXpath() verdad ? Es mi parecer o es una desventaja de puppeteer para manejar los elementos fácilmente solo se puede con CSS, como se puede trabajar con Xpath ?
A partir de este año, 2024, aparentemente hubo una actualización y page.waitForXPath ya no es una función válida.
La documentación (https://pptr.dev/guides/page-interactions) provee los siguientes ejemplos de nuevo uso:
const element = await page.waitForSelector('::-p-xpath(h2)') const node = await page.waitForSelector('xpath/h2');
Para hacer la prueba con Xpath no me reconoce la funcion waitForXPath :c esta obsoleta o tengo que descargar alguna libreria o desactivas algo?
Duda de VS Code, cada que guardo cambios se ejecutan los test, alguien sabe que se debe de hacer para desactivar ese feature?? en lo personal se me hace molesto
Hola si, en la configuración de vs code , abre tu settings.json y pon esta opción "jest.autoRun": "false" y eso evitara que se corran cada vez que los guardas
en las ultimas versiones al a parecer lo cambiaron y ahora es asi
"jest.autoRun": { "onSave":false }
Para evitar que cada vez que guardes cambios estos automáticamente se ejecuten puedes hacer lo siguiente:
{   "jest.runMode": "on-demand" }
El codigo es
{ "jest.runMode": "on-demand" }
sin  , no se por que aparecio cuando envie el comentario
Tengo una pregunta, espero poder explicarla bien. 😅 Cuando navegamos a una pagina y esperamos que la pagina termine de cargar con:
{ waitUntil: 'networkidle2' }
Aun así ¿es necesario esperar por ciertos elementos? o mejor dicho, la pagina termina de cargar y puede que aun hayan elmentos pendientes de renderizarse o hay algun otro caso de uso?. Ya que pensaba que al terminar de cargar la pagina, por ende tambien ya todos sus elementos estaban cargados o no es así? D: (si no me doy a explicar bien, avisenme y veo como reformulo la pregunta. XD
Hola, si se entiende tu pregunta primeramente Ñ networkidle0: considera que la navegación ha finalizado cuando no hay más de 0 conexiones de red durante al menos 500 ms. networkidle2: considera que la navegación ha finalizado cuando no hay más de 2 conexiones de red durante al menos 500 ms.
Todo va a depender de tu caso muchas veces los elementos están ya presentes en al pagina pero aun hay conexiones que no han terminado entonces tu prueba podría durar más de lo normal, hay veces que muchas páginas hacen muchas peticiones por detrás pero si estas seguro que tiene pocas llamadas a APIS o es una SPA lo más conveniente entonces sería usar networkidle0 , pero por costumbre casi siempre lo pongo más vale un paso de seguridad extra :D
espera a que las peticiones de red hayan terminado excepto dos , no se si tenga sentido. jaja espera hasta que haya al menos dos pendientes
en que momento creo el archivo jmeter.log y como fue su configuracion? de que me perdi?
Probablemente fue un archivo que se creo solo o que tenia ahi antes
Esperar por los elementos (video 10)
Tipos de Espera
1- Para Navegación, aquí se puede recibir un tipo de objeto, donde se pueda pasar una propiedad.
{ waiUntil : ' CADENAS ' }
Se puede pasar diferentes cadenas como:
no pude con el xpath, lo intente pero nunca corre, alguien que me ayude?
Para los que no les funciona con await page.waitForTimeout deben remplazarlo por: await new Promise(resolve => setTimeout(resolve, 5000));
BUENAS NOCHES, SI ALGUIEN AVANZO EN ESTE MODULO PODRIA COMPARTIR LA SOLUCON AL CODIGO "WAITFORXPATH" DEBIDO A QUE ESTE FUE REEMPLAZO ESTE AÑO 2024 EN SU LENGUAJE DE PROGRAMACION DE PUPPETEER YO LO INTENTE PERO NO ME SALIO BIEN LO INTENTE DE MUCHAS FORMAS:
La documentación () provee los siguientes ejemplos de nuevo uso:
const element = await page.waitForSelector('::-p-xpath(h2)') const node = await page.waitForSelector('xpath/h2');
Con esta línea me funcionó
//Espera por un xpath const element = await page.waitForSelector('::-p-xpath(aquí el Xpath)');
const puppeteer = require("puppeteer") describe("Tipos de espera",()=>{ it("Mostrar todos los diferentes tipos de espera", async()=>{ const browser = await puppeteer.launch({ headless:false, defaultViewport: null, }); const page = await browser.newPage(); await page.goto("https://platzi.com", {waitUntil: "networkidle2"}) //Espera explicita await new Promise((resolve) => setTimeout(resolve, 3000)); //Espera por un css selector //await page.waitForSelector("body > main > header > div > figure > svg") //Espera por un xpath //await page.waitForXPath("/html/body/main/header/div/figure/svg/g/path[1]"); await page.goto("https://demoqa.com/modal-dialogs", {waitUntil:"networkidle2"}); //await page.waitForSelector("#showSmallModal",{visible: true}); // con hidden es para cuando se oculte const button = await page.waitForSelector("#showSmallModal",{visible: true}); // Usar XPath para seleccionar el botón y asegurarse de que es visible //const button = await page.waitForXPath('//*[@id="showSmallModal"]',{visible: true}); await button.click() await browser.close(); }, 350000); }) ```const puppeteer = require("puppeteer") describe("Tipos de espera",()=>{ it("Mostrar todos los diferentes tipos de espera", async()=>{ const browser = await puppeteer.launch({ headless:false, defaultViewport: null, }); const page = await browser.newPage(); await page.goto("https://platzi.com", {waitUntil: "networkidle2"}) //Espera explicita await new Promise((resolve) => setTimeout(resolve, 3000)); //Espera por un css selector //await page.waitForSelector("body > main > header > div > figure > svg") //Espera por un xpath //await page.waitForXPath("/html/body/main/header/div/figure/svg/g/path\[1]"); await page.goto("https://demoqa.com/modal-dialogs", {waitUntil:"networkidle2"}); //await page.waitForSelector("#showSmallModal",{visible: true}); // con hidden es para cuando se oculte const button = await page.waitForSelector("#showSmallModal",{visible: true}); // Usar XPath para seleccionar el botón y asegurarse de que es visible //const button = await page.waitForXPath('//\*\[@id="showSmallModal"]',{visible: true}); await button.click()   await browser.close(); }, 350000);})