Interactuando con los elementos

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

Manuel Ledezma

student•

Mi código del reto

const puppeteer = require('puppeteer')

describe('llenar un formulario',() => {

    it('test llenado de formulario', async() => {
        const browser = await puppeteer.launch({
            headless: false, 
            defaultViewport: null       
        })

        const page = await browser.newPage()
        await page.goto("https://devexpress.github.io/testcafe/example/")


    //llenado de formulario
    await page.type('#developer-name','Manuel',{delay:100})
    await page.click('#remote-testing')
    await page.click('#traffic-markup-analysis')
    await page.click('#tried-test-cafe')
    await page.click('#slider > span')
    await page.type('#comments', 'hola esto es un comentario')
    await page.click('#windows')
    await page.select('#preferred-interface','JavaScript API')
    await page.click('#submit-button')
    await page.waitForTimeout(2000)


},350000)


})

santi Bedoya

student•

Hola como estas ? soy nuevo en esto una pregunta es que en el código ya no deja poner el waitfortimeout; que pusiste tu?

Gissell Angelica Quintero Hernandez

student•

Este te puede funcionar new Promise(r => setTimeout(r, 2000));

Jose Alzugaray

student•

Así resolví el reto para elegir una opción de la lista: await page.select('#id-select-element', 'value')

Mónica Evelyn Quevedo Devia

student•

Asi quedo el mio

<const puppeteer = require('puppeteer')

describe('Interactuando con elemntos', () => {

    it('Debe abrir', async () => {
        const browser = await puppeteer.launch({
            headless: false,
            //  slowMo: 0,
            // devtools:false,
            defaultViewport: null//expanda al tam de la ventana
            // defaultViewport: {
            //     width:2100,
            //     height:1080
            // }

        })

        const page = await browser.newPage()
        await page.goto('https://demo.guru99.com/test/simple_context_menu.html')

        //Con esta instruccion le damos aceptar a los alerts que nos salgan en la pagina
        page.on('dialog', async (dialog) => {
            await dialog.accept()

        })

        //click derecho
        // await page.click('#authentication > span', { button: 'right', delay:500})
        // await page.waitForTimeout(3000)

        //Doble click

        await page.click('#authentication > button', { clickCount: 2, delay: 500 })


        await page.goto('https://devexpress.github.io/testcafe/example/')
        await page.type('#developer-name', 'Monica Evelyn', { delay: 100 })
        await page.click('#windows')

        await page.click('#remote-testing')
        //await page.select(’#id-select-element’, ‘value’) --> PARA SELECCIONAR DE UNA LISTA DESPLEGABLE
        await page.select('#preferred-interface', 'JavaScript API')

        await page.click('#tried-test-cafe')

        await page.type('#comments', 'Test para formulario realizado en Puppeteer como prueba e2e', { delay: 100 })
        await page.click('#submit-button')


        await new Promise(r => setTimeout(r, 3000));

        await browser.close()


    }, 350000)
})
//
//await page.waitForTimeout(3000) reemplace con await new Promise(r => setTimeout(r, 3000));>

Jesus Cuadro

student•

Asi me quedo el ejercicio:

describe('Interactuando con elementos', () => {
    it('Debe darle click a el boton', async () => {
        const browser = await puppeteer.launch({
            // headless: 'new' hace que no se habara el navegador y que las pruebas sean
            // más rápidas, el headless: false siempre nos abre el navegador
            headless: false,
            defaultViewport: null, // máximiza el viewport de la página al tamaño de la ventana
        })

        const page = await browser.newPage()

        await page.goto('https://devexpress.github.io/testcafe/example/')

        await page.type('#developer-name', 'Jesus', { delay: 100 })

        await page.click('#remote-testing')

        await page.click('#tried-test-cafe')

        await page.click('#macos')

        await page.select('#preferred-interface', 'Both')

        const selector = '#slider > span'

        await page.evaluate((selector) => {
            const elemento = document.querySelector(selector)
            if (elemento) {
                elemento.style.left = '66.6666%'
            }
        }, selector)

        await page.type(
            '#comments',
            '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
            { delay: 100 }
        )

        await page.click('#submit-button')

        await new Promise((resolve) => setTimeout(resolve, 8000))

        //click derecho

        // await page.click('#authentication > span', {button: 'right', delay: 500})

        //doble click

        // await page.click('#authentication > button', {
        //     clickCount: 2,
        //     delay: 500,
        // })

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

Vasti Gabriela Flores Zelaya

student•

Genial! Gracias por compartir! No encontraba como hacer la parte del slider

Luis Ernesto Yepes Fernandez

student•

Hola! Cuando instalé la extensión de jest nunca me salió el icono de play y cada vez que hago un npm run test corre los dos archivos de pruebas que tenemos. como puedo mejorar eso? gracias

Javier Fuentes Mora

teacher•

Hola , solo tienes que deshabilitarlo , https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest ahi viene la forma en que se deshabilita "jest.autoRun": "off"

Javier Fuentes Mora

teacher•

si, desde el archivo de configuración de la extension de jest puedes deshabilitar el autoRun

ingri sepulveda

student•

😊

MANUEL ALEJANDRO CUELLAR GUARIN

student•

Buenas tengo una pregunta si tengo esos dos archivos de pruebas navegador e interactuando como hago para que se ejecute solo uno?

Javier Fuentes Mora

teacher•

mas adelante , lo vemos pero debes de filtrar desde el comando de jest algo como esto npm test -- -t "<Test Suite> <Test>"

Osmel Jose Vera Isasis

student•

hola comparto mi codigo espero que les sirva..

Luis Ernesto Yepes Fernandez

student•

Solución

 await page.select('#preferred-interface', "Both")

Renato Caceres

student•

 		await page.goto('https://devexpress.github.io/testcafe/example/')

        await page.type('#developer-name', 'Cesar',{delay: 100})

        await page.click('#remote-testing')
        await page.click('#tried-test-cafe')

        await page.select('#preferred-interface','JavaScript API')

        await page.type('#comments','Esta es una prueba')
        await page.click('#submit-button')

        await page.waitForTimeout(3000)

Xavier Alberto Castillo varon

student•

buenas tardes comunidad pregunta ¿como hago para cuando corra el proceso de un solo archivo no se corran todo?, anexo un aimagen

Pehuen Santore

student•

porque el page.waitForTimeout( 3000) me aparece TACHADO?

Luis Palomo

student•

No es que no funcione, sino que el editor de código te recomienda no usarlo ya que en general no es recomendable usar setTimeOuts.

Mónica Evelyn Quevedo Devia

student•

Hola lo puedes reemplazar con esta instruccion, lo que pasa es que el waitDorTimeout ya esta deprecated u obsoleto await new Promise(r => setTimeout(r, 3000));

Pehuen Santore

student•

me sale la opcion de aceptar cache y no me funciona el codigo capaz seria bueno configurar la accion del aceptar de cache?

Javier Fuentes Mora

teacher•

hola puedes expandir a que te refieres?

Alexis Giovana Montes de Oca Juarez

student•

Hola, buena tarde.

Estoy viendo que en le archivo de package.json tiene el siguiente propiedad test

"test": "jest --forceExit --detectOpenHandles"
```para que sirve --detectOpenHandles?

Vasti Gabriela Flores Zelaya

student•

la opción --detectOpenHandles en Jest es una herramienta útil para detectar y solucionar problemas de manijas abiertas que pueden causar fugas de memoria y problemas de cierre.

Capacitacion Interware

student•

Cuando ejecuto la prueba, se ejecutan todos los test anteriores, ¿Cómo puedo evitarlo?

Jose Miguel Lopez

student•

en el packgae agrega lo siguiente debajo del test

"test:single": "jest ELNOMBREDELTEST.test.js"

luego ejecuta asi npm run test:single

Alexis Giovana Montes de Oca Juarez

student•

Hola, buena tarde.

Estoy realizando la practica de la clase pero no mu muestra la alerta7notificación del doble click, pero no me muestra error en entorno de desarrollo.

Me podrían guiar para saber que estoy haciendo mal, por favor.

Les comparto mi código:

const puppeteer = require('puppeteer') describe('Formularios', () => { it('llenar formulario', async () => { const browser = await puppeteer.launch({ headless: false, defaultViewport: null }) const page = await browser.newPage() await page.goto('https://demo.guru99.com/test/simple\_context\_menu.html') //listener - estos escuchan los cambios page.on('dialog', async(dialog)=>{ await dialog.accept() }) //clic derecho en elementos //await page.click('#authentication > span', {button:'right', delay: 500}) //await page.waitForTimeout(3000) //doble click await page.click('#authentication > button',{clickCount: 2,delay:500}) await page.goto('https://devexpress.github.io/testcafe/example/') await page.type('#developer-name', 'Alexis',{delay:100}) await page.click ('#reusing-js-code') await page.click ('#tried-test-cafe') await page.type('#comments', 'Esto es una prueba') await page.click('#submit-button') await page.waitForTimeout(3000) await browser.close() }, 350000)})

Cristian Ponce Gonzalez

student•

Pueden hacer está función utilitaria para tener tiempos de espera

/**
 * Espera la cantidad de tiempo especificada en milisegundos antes de resolver la promesa.
 * @param {number} ms - La cantidad de tiempo en milisegundos para esperar.
 * @returns {Promise<void>} Una promesa que se resuelve después del tiempo de espera.
 */
export function waitFor(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

Juliana Jiménez Echeverri

student•

Solución al reto: await page.select('select', 'Both');

Irving Juárez

student•

El link para el test del right-click and double-click https://demo.guru99.com/test/simple_context_menu.html

ESTIBEN CASTAÑEDA MORALES

student•

Después de colocar el comando para el comentario la solución fue la siguiente. await page.click('#windows') await page.select('#preferred-interface','JavaScript API') await page.click('#submit-button')

const puppeteer = require('puppeteer')

describe('llenar un formulario',() => {

    it('test llenado de formulario', async() => {
        const browser = await puppeteer.launch({
            headless: false, 
            defaultViewport: null       
        })

        const page = await browser.newPage()
        await page.goto("https://devexpress.github.io/testcafe/example/")


    //llenado de formulario
    await page.type('#developer-name','Manuel',{delay:100})
    await page.click('#remote-testing')
    await page.click('#traffic-markup-analysis')
    await page.click('#tried-test-cafe')
    await page.click('#slider > span')
    await page.type('#comments', 'hola esto es un comentario')
    await page.click('#windows')
    await page.select('#preferred-interface','JavaScript API')
    await page.click('#submit-button')
    await page.waitForTimeout(2000)


},350000)


})

<const puppeteer = require('puppeteer')

describe('Interactuando con elemntos', () => {

    it('Debe abrir', async () => {
        const browser = await puppeteer.launch({
            headless: false,
            //  slowMo: 0,
            // devtools:false,
            defaultViewport: null//expanda al tam de la ventana
            // defaultViewport: {
            //     width:2100,
            //     height:1080
            // }

        })

        const page = await browser.newPage()
        await page.goto('https://demo.guru99.com/test/simple_context_menu.html')

        //Con esta instruccion le damos aceptar a los alerts que nos salgan en la pagina
        page.on('dialog', async (dialog) => {
            await dialog.accept()

        })

        //click derecho
        // await page.click('#authentication > span', { button: 'right', delay:500})
        // await page.waitForTimeout(3000)

        //Doble click

        await page.click('#authentication > button', { clickCount: 2, delay: 500 })


        await page.goto('https://devexpress.github.io/testcafe/example/')
        await page.type('#developer-name', 'Monica Evelyn', { delay: 100 })
        await page.click('#windows')

        await page.click('#remote-testing')
        //await page.select(’#id-select-element’, ‘value’) --> PARA SELECCIONAR DE UNA LISTA DESPLEGABLE
        await page.select('#preferred-interface', 'JavaScript API')

        await page.click('#tried-test-cafe')

        await page.type('#comments', 'Test para formulario realizado en Puppeteer como prueba e2e', { delay: 100 })
        await page.click('#submit-button')


        await new Promise(r => setTimeout(r, 3000));

        await browser.close()


    }, 350000)
})
//
//await page.waitForTimeout(3000) reemplace con await new Promise(r => setTimeout(r, 3000));> 

describe('Interactuando con elementos', () => {
    it('Debe darle click a el boton', async () => {
        const browser = await puppeteer.launch({
            // headless: 'new' hace que no se habara el navegador y que las pruebas sean
            // más rápidas, el headless: false siempre nos abre el navegador
            headless: false,
            defaultViewport: null, // máximiza el viewport de la página al tamaño de la ventana
        })

        const page = await browser.newPage()

        await page.goto('https://devexpress.github.io/testcafe/example/')

        await page.type('#developer-name', 'Jesus', { delay: 100 })

        await page.click('#remote-testing')

        await page.click('#tried-test-cafe')

        await page.click('#macos')

        await page.select('#preferred-interface', 'Both')

        const selector = '#slider > span'

        await page.evaluate((selector) => {
            const elemento = document.querySelector(selector)
            if (elemento) {
                elemento.style.left = '66.6666%'
            }
        }, selector)

        await page.type(
            '#comments',
            '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
            { delay: 100 }
        )

        await page.click('#submit-button')

        await new Promise((resolve) => setTimeout(resolve, 8000))

        //click derecho

        // await page.click('#authentication > span', {button: 'right', delay: 500})

        //doble click

        // await page.click('#authentication > button', {
        //     clickCount: 2,
        //     delay: 500,
        // })

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

 		await page.goto('https://devexpress.github.io/testcafe/example/')

        await page.type('#developer-name', 'Cesar',{delay: 100})

        await page.click('#remote-testing')
        await page.click('#tried-test-cafe')

        await page.select('#preferred-interface','JavaScript API')

        await page.type('#comments','Esta es una prueba')
        await page.click('#submit-button')

        await page.waitForTimeout(3000)

/**
 * Espera la cantidad de tiempo especificada en milisegundos antes de resolver la promesa.
 * @param {number} ms - La cantidad de tiempo en milisegundos para esperar.
 * @returns {Promise<void>} Una promesa que se resuelve después del tiempo de espera.
 */
export function waitFor(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

Interactuando con 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