Esperar por los elementos
Contenido del curso
Esperar por los elementos
Contenido del curso
Vannya Esnif Fuentes Mora
Por si no saben como correrlo con Jest, solo falta agregar el .test , o sea el archivo quedaría: tiposDeEspera.test.js
Luis Jhordy Mamani Arias
Eso mismo me paso ya decía por que no funciona jajaja
Eduardo Rafael Romero Bernal
Aquí les comparto este video interesante sobre cómo exportar desde google chrome un script de puppeteer: https://youtu.be/K8NMqOEkxKM
Geovanni Atavales Quiroga
Esto es maravilloso
Ronald Riera Sanchez
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.
Irving Juárez
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
Ronald Riera Sanchez
Si esta depreciado pero igual sigue funcionando jejeje...!
Irving Juárez
El problema con que este depreciado es que puede que ya no funcione en futuras versiones de Puppeteer
Carlos Rodríguez
Que ansiedad me da que el profe no use ;
Jorge Blanco
Js en las nuevas versiones no lo exige
Irving Juárez
Lo puedes agregar en la configuracion de prettier, para que se agreguen solos. Asi ya tampoco te preocuparias por usarlos
Luis Ernesto Yepes Fernandez
https://demoqa.com/modal-dialogs
Web usada por el profe
Alejandro Quintero Mejía
Si quieres que no corran los demás test, agrega una x al describe de estos archivos:
xdescribe('...' , ( ) => {...})
Jair Israel Avilés Eusebio
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
Geovanni Atavales Quiroga
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.
Juan Carlos Mora Parra
Gran aporte para mi compañero!!!
Hardware Andres Rodriguez Pisa
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 ?
Jose Eduardo Miranda Valderrama
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');
Laura Ivonne Moreno
Para hacer la prueba con Xpath no me reconoce la funcion waitForXPath :c esta obsoleta o tengo que descargar alguna libreria o desactivas algo?
Hernaldo Alvarez
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
Javier Fuentes Mora
ProfesorHola 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
Javier Fuentes Mora
Profesoren las ultimas versiones al a parecer lo cambiaron y ahora es asi
"jest.autoRun": { "onSave":false }
Karen Barrera
Para evitar que cada vez que guardes cambios estos automáticamente se ejecuten puedes hacer lo siguiente:
{   "jest.runMode": "on-demand" }
Karen Barrera
El codigo es
{ "jest.runMode": "on-demand" }
sin  , no se por que aparecio cuando envie el comentario
Fredy Daniel Flores Lemus
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
Javier Fuentes Mora
ProfesorHola, 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
Javier Fuentes Mora
Profesorespera a que las peticiones de red hayan terminado excepto dos , no se si tenga sentido. jaja espera hasta que haya al menos dos pendientes
Andres Mauricio Sanchez Barrios
en que momento creo el archivo jmeter.log y como fue su configuracion? de que me perdi?
Javier Fuentes Mora
ProfesorProbablemente fue un archivo que se creo solo o que tenia ahi antes
Julianny Caicedo
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:
David Camilo Salas Muñoz
no pude con el xpath, lo intente pero nunca corre, alguien que me ayude?
David Camilo Salas Muñoz
Para los que no les funciona con await page.waitForTimeout deben remplazarlo por: await new Promise(resolve => setTimeout(resolve, 5000));
Osmel Jose Vera Isasis
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');
Nanet Mor
Con esta línea me funcionó
//Espera por un xpath const element = await page.waitForSelector('::-p-xpath(aquí el Xpath)');
Mario Alexander Vargas Celis
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);})
