No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Interactuando con los elementos

9/15
Recursos

Aportes 14

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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)


})


As铆 resolv铆 el reto para elegir una opci贸n de la lista:
await page.select(鈥#id-select-element鈥, 鈥榲alue鈥)

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鈥, 鈥榲alue鈥) --> 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));> 

En este repositorio est谩n todas las practicas realizadas del Curso:
https://github.com/javavmro11/TestingQACourse.git

El reto est谩 solucionado en el archivo interactuandoForm.test.js

馃槉

Soluci贸n

 await page.select('#preferred-interface', "Both")
 		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)

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

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

Soluci贸n al reto: await page.select(鈥榮elect鈥, 鈥楤oth鈥);

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

Despu茅s de colocar el comando para el comentario la soluci贸n fue la siguiente.
await page.click(鈥#windows鈥)
await page.select(鈥#preferred-interface鈥,鈥楯avaScript API鈥)
await page.click(鈥#submit-button鈥)

Para seleccionar la primera opci贸n del Dropdown use:

await page.select('#preferred-interface', '#preferred-interface > option:nth-child(1)')