Cursos Empresas Blog Live Conf Eventos Precios

0:0016:51

Esperar por los elementos

Curso de Automatización de Pruebas con Puppeteer

Clase 10 / 15

Ver clases

Esperar por los elementos

Curso de Automatización de Pruebas con Puppeteer

Clase 10 de 15

Clase 10 / 15

Esperar por los elementos

Curso de Automatización de Pruebas con Puppeteer

Clase 10 / 15

Ver clases

Mario Alexander Vargas Celis

Hace 2 años

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()       &#x20;
        await browser.close();    }, 350000);})

Comentarios (21)21 comentarios

Vannya Esnif Fuentes Mora

Hace 5 años

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

Hace 4 años

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

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

Carlos Rodríguez

Que ansiedad me da que el profe no use ;

Jorge Blanco

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

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

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

Hace 3 años

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

Profesor

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
    }

Karen Barrera

Para evitar que cada vez que guardes cambios estos automáticamente se ejecuten puedes hacer lo siguiente:

Ingresa a settings.json, en este enlace te explica
Ya una vez estés en settings.json coloca


{

&#x20;  "jest.runMode": "on-demand"

}

Y listo, ya no se ejecutarán automáticamente los cambios

El codigo es

{ "jest.runMode": "on-demand" }

sin &#x20, 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

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

Andres Mauricio Sanchez Barrios

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

Julianny Caicedo

Hace un año

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:

domcontentloaded Va a esperar que el documento este cargado.
networkidle0 Va a esperar hasta que no haya mas de cero conexiones, por lo menos 1000 seg.
networkidle2 Va a esperar hasta que la navegación termine y que no haya mas de 2 conexiones (este es mas común de usar)

David Camilo Salas Muñoz

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));

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:

Nanet Mor

Con esta línea me funcionó

//Espera por un xpath const element = await page.waitForSelector('::-p-xpath(aquí el Xpath)');

Esperar por los elementos

Esperar por los elementos

Esperar por los elementos

Progreso del curso

Bienvenida al curso: ¿Qué vamos a aprender?

Introducción a la Automatización WEB

Introducción a Puppeteer

Conociendo Puppeteer

Conclusión del curso

Esperar por los elementos

Esperar por los elementos

Comentarios

Comentarios