Esperando por funciones

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

Gabriel Cayoja

student•

si quieren solo el codigo de esta clase es el siguiente:

const puppeteer = require('puppeteer')

describe ('waiting for functions',()=>{

    it('show the waiting types', async ()=>{
        const browser = await puppeteer.launch({
            headless: false,
            defaultViewport: null,
            slowMo:300
        })
        const page = await browser.newPage()
        await page.goto('https://demoqa.com/modal-dialogs')

        //esperar por una funcion
        await page.click('#showSmallModal')
        await page.waitForFunction(()=> document.querySelector('#example-modal-sizes-title-sm').innerText ==='Small Modal')

        //Ejemplo para observar por un viewport
        // const observeResize = page.waitForFunction('window.innerWidth < 100')
        // await page.setViewport({width:50, height:50})        
        // await observeResize

        await page.click('#closeSmallModal')
        await page.waitForFunction(()=> !document.querySelector('#example-modal-sizes-title-sm'))

        await browser.close()
        
    },35000)
})

Luis Ernesto Yepes Fernandez

student•

A mi no me funcionaba hacer esto para verificar que ya no estaba la ventana emergente, daba error que no podía leer el innerText

await page.waitForFunction(() => !document.querySelector('#example-modal-sizes-title-sm').innerText === 'Small Modal')

Los que hice fue modificar el selector para corroborar que no estuviera el botón de close y fue más fácil.

await page.waitForFunction(() => !document.querySelector('#closeSmallModal'))

Roberto Carlos González Castro

student•

Hola Luis, la propiedad innerText no es usada en este caso, solamente el nombre del selector y con eso basta para validar que elemento ya no esta presente en el DOM:

await page.waitForFunction(() => !document.querySelector('#example-modal-sizes-title-sm'))

Saludos y espero te sea de utilidad!

Irving Juárez

student•

Oh si no, no te compliques tanto y puedes hacer asi:

await page
  .awaitForElement(
    "#example-modal-sizes-title-sm", 
    { visible: false }
  )

Rodrigo Alvarez

student•

Al final preguntaste si un elemento aparece y desaparece. Cómo puedo hacer para capturar el innerText del elemento antes que desaparezca del DOM, sólo aparece unos segundos y luego se va hasta que vuelva a actualizar la página. La función de waitForSelector y waitForFunction me informa que está pero no me puede devolver el contenido dentro

Javier Fuentes Mora

teacher•

podrías compartir tu código para poderte ayudar?

David Camilo Salas Muñoz

student•

Tambíen no me dio lo del viewport, la anterior clase y esta no funciona con claridad.

Alejandro Reyes

student•

Para validar que el elemento no aparezca, si no les funciona con un solo signo de admiración (!), inténtenlo con dos (!!) para forzarlo.Para validar que el elemento no aparezca, si no les funciona con un solo signo de admiración (!), inténtenlo con dos (!!) para forzarlo.```js await page.waitForFunction(()=> !!document.querySelector('#example-modal-sizes-title-sm'))

Alejandro Reyes

student•

Para validar que el elemento no aparezca, si no les funciona con un solo signo de admiración (!), inténtenlo con dos (!!) para forzarlo.

await page.waitForFunction(()=> !!document.querySelector('#example-modal-sizes-title-sm'))
```await page.waitForFunction(()=> !!document.querySelector('#example-modal-sizes-title-sm'))

const puppeteer = require('puppeteer')

describe ('waiting for functions',()=>{

    it('show the waiting types', async ()=>{
        const browser = await puppeteer.launch({
            headless: false,
            defaultViewport: null,
            slowMo:300
        })
        const page = await browser.newPage()
        await page.goto('https://demoqa.com/modal-dialogs')

        //esperar por una funcion
        await page.click('#showSmallModal')
        await page.waitForFunction(()=> document.querySelector('#example-modal-sizes-title-sm').innerText ==='Small Modal')

        //Ejemplo para observar por un viewport
        // const observeResize = page.waitForFunction('window.innerWidth < 100')
        // await page.setViewport({width:50, height:50})        
        // await observeResize

        await page.click('#closeSmallModal')
        await page.waitForFunction(()=> !document.querySelector('#example-modal-sizes-title-sm'))

        await browser.close()
        
    },35000)
})

Esperando por funciones

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