Esperar por los elementos

Clase 10 de 15 • Curso de Automatización de Pruebas con Puppeteer

Clase anteriorSiguiente clase

Vannya Esnif Fuentes Mora

student•

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

student•

Eso mismo me paso ya decía por que no funciona jajaja

Eduardo Rafael Romero Bernal

student•

Aquí les comparto este video interesante sobre cómo exportar desde google chrome un script de puppeteer: https://youtu.be/K8NMqOEkxKM

Geovanni Atavales Quiroga

student•

Esto es maravilloso

Ronald Riera Sanchez

student•

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

student•

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

student•

Si esta depreciado pero igual sigue funcionando jejeje...!

Irving Juárez

student•

El problema con que este depreciado es que puede que ya no funcione en futuras versiones de Puppeteer

Carlos Rodríguez

student•

Que ansiedad me da que el profe no use ;

Jorge Blanco

student•

Js en las nuevas versiones no lo exige

Irving Juárez

student•

Lo puedes agregar en la configuracion de prettier, para que se agreguen solos. Asi ya tampoco te preocuparias por usarlos

Luis Ernesto Yepes Fernandez

student•

https://demoqa.com/modal-dialogs

Web usada por el profe

Alejandro Quintero Mejía

student•

Si quieres que no corran los demás test, agrega una x al describe de estos archivos:

xdescribe('...' , ( )  => {...})

Jair Israel Avilés Eusebio

student•

FYI,

El metodo waitForTimeout ha sido marcado como obsoleto a partir de la version 16.1.1.

En su lugar se recomienda ejecutar un setTimeout

Fuente: https://github.com/puppeteer/puppeteer/pull/8793/files

Geovanni Atavales Quiroga

student•

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

student•

Gran aporte para mi compañero!!!

Hardware Andres Rodriguez Pisa

student•

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

student•

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

student•

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

student•

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

teacher•

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

Javier Fuentes Mora

teacher•

en las ultimas versiones al a parecer lo cambiaron y ahora es asi

    "jest.autoRun": {
        "onSave":false
    }

Karen Barrera

student•

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 https://www.alphr.com/vs-code-how-to-open-settings-json/
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

Karen Barrera

student•

El codigo es

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

sin &#x20, no se por que aparecio cuando envie el comentario

Fredy Daniel Flores Lemus

student•

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

teacher•

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

Javier Fuentes Mora

teacher•

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

student•

en que momento creo el archivo jmeter.log y como fue su configuracion? de que me perdi?

Javier Fuentes Mora

teacher•

Probablemente fue un archivo que se creo solo o que tenia ahi antes

Julianny Caicedo

student•

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

student•

no pude con el xpath, lo intente pero nunca corre, alguien que me ayude?

David Camilo Salas Muñoz

student•

Para los que no les funciona con await page.waitForTimeout deben remplazarlo por: await new Promise(resolve => setTimeout(resolve, 5000));

Osmel Jose Vera Isasis

student•

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

Nanet Mor

student•

Con esta línea me funcionó

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

Mario Alexander Vargas Celis

student•

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

Esperar por los elementos

Bienvenida al curso: ¿Qué vamos a aprender?

Automatización de pruebas con Puppeteer

Introducción a la Automatización WEB

¿Qué es el DOM?

Atributos y selectores

Introducción a Puppeteer

¿Qué es Puppeteer?

Configuración de nuestro ambiente

Conociendo Puppeteer

Abriendo y cerrando el navegador

Opciones de lanzamiento

Navegación con Puppeteer

Interactuando con los elementos

Esperar por los elementos

Esperando por funciones

Extrayendo información

Timeouts

Hooks

Conclusión del curso

Próximos pasos