Creando la Base Page

Clase 14 de 24 • Curso Avanzado de Automatización de Pruebas con Puppeteer

Irving Juárez

student•

En el último método, la función de waitForTimeout ya no es valida y ahora se recomiendo hacerlo de la siguiente manera

await page.waitForTimeout(time) ❌
await new Promise(r => setTimeout(r, time)) ✔

Angel Hernandez

student•

buen aporte, gracias!

Luis Ernesto Yepes Fernandez

student•

export default class BasePage {

    async getTitle() {
        return await page.title()
    }

    async getUrl() {
        return await page.url()
    }

    async getText(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.textContent)
        }
        catch (error) {
            throw new Error(`Error al obtener el texto del selector: ${selector}`)
        }
    }

    async getAttribute(selector, attribute) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.getAttribute(attribute))
        }
        catch (error) {
            throw new Error(`Error al obtener el atributo del selector: ${selector}`)
        }
    }

    async getValue(selector, value) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.getValue(value))
        }
        catch (error) {
            throw new Error(`Error al obtener el valor del selector: ${selector}`)
        }
    }

    async getCount(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.$$eval(selector, (elemento) => elemento.length)
        }
        catch (error) {
            throw new Error(`Error al obtener el numero de elementos del selector: ${selector}`)
        }
    }

    async click(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.click(selector)
        }
        catch (error) {
            throw new Error(`Error al dar click al selector: ${selector}`)
        }
    }

    async type(selector, text, opts={}) {
        try {
            await page.waitForSelector(selector)
            return await page.type(selector, text, opts)
        }
        catch (error) {
            throw new Error(`Error al dar escribir en el selector: ${selector}`)
        }
    }

    async doubleClick(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.click(selector, { clickCount: 2 })
        }
        catch (error) {
            throw new Error(`Error al dar doble click al selector: ${selector}`)
        }
    }

    async wait(time) {
        
        return await page.waitForTimeout(time)
        
    }

}

Santiago Velandia Gallo

student•

Click derecho

async rightClick(selector){
        try {
            await page.waitForSelector(selector)
            await page.click(selector, { button: 'right'})
        } catch (error) {
            throw new Error(`Error al dar click en el selector ${selector}`)
        }
    }

David steven Abril Pulecio

student•

//to select an option within an html element type: select
 async selectType (page, selector, opts) {
    try {
        await page.waitForSelector(selector)
        return await page.select(selector, opts)
    } catch (error) {
        throw new error(`Error when trying to select an option within the selector: ${selector}`)
    }
}
```//to select an option within an html element type: select async selectType (page, selector, opts) {    try {        await page.waitForSelector(selector)        return await page.select(selector, opts)    } catch (error) {        throw new error(`Error when trying to select an option within the selector: ${selector}`)    }}

Agustin Cammarota Muti

student•

La config sola como la vimos en los videos, me trae problemas, dejo unos cambios que me funcionarios:

En el fichero jest-puppeteer.config.js:

const port = process.env.TEST_SERVER_PORT
  ? Number(process.env.TEST_SERVER_PORT)
  : 4444;

process.env.TEST_SERVER_PORT = port.toString();

module.exports = {
  launch: {
    headless: false,
    slowMo: 100,
    launchTimeout: 4000,
    usedPortAction: "kill",
    port,
  },
  browserContext: 'default'
}

En el package.json: "test": "jest --runInBand --forceExit --detectOpenHandles",

<code>

Julianny Caicedo

student•

Creando la Base Page

CODIGO ACTUALIZADO

export default class BasePage {

async getTitle() {

return await page.title()

}

async getUrl() {

return await page.url()

}

async getText(selector) {

try {

await page.waitForSelector(selector)

return await page.$eval(selector, (el) => el.textContent)

} catch (e) {

throw new Error(Error al obtener el texto del selector ${selector})

}

async getAttribute(selector, attribute) {

try {

await page.waitForSelector(selector)

return await page.$eval(selector, (el, attribute) => el.getAttribute(attribute), attribute)

} catch (e) {

throw new Error(Error al obtener el atributo del selector ${selector})

}

async getValue(selector) {

try {

await page.waitForSelector(selector)

return await page.$eval(selector, (el) => el.value)

} catch (e) {

throw new Error(Error al obtener el valor del selector ${selector})

}

async getCount(selector) {

try {

await page.waitForSelector(selector)

return await page.$$eval(selector, (els) => els.length)

} catch (e) {

throw new Error(Error al obtener el numero de elementos del selector ${selector})

}

async click(selector) {

try {

await page.waitForSelector(selector)

await page.click(selector)

} catch (e) {

throw new Error(Error al dar click al selector ${selector})

}

async type(selector, text, opts = {}) {

try {

await page.waitForSelector(selector)

await page.type(selector, text, opts)

} catch (e) {

throw new Error(Error al escribir en el selector ${selector})

}

async doubleClick(selector) {

try {

await page.waitForSelector(selector)

await page.click(selector, { clickCount: 2 })

} catch (e) {

throw new Error(Error al dar doble click en el selector ${selector})

}

async wait(time) {

return new Promise(r => setTimeout(r, time))

}

export default class BasePage {

    async getTitle() {
        return await page.title()
    }

    async getUrl() {
        return await page.url()
    }

    async getText(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.textContent)
        }
        catch (error) {
            throw new Error(`Error al obtener el texto del selector: ${selector}`)
        }
    }

    async getAttribute(selector, attribute) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.getAttribute(attribute))
        }
        catch (error) {
            throw new Error(`Error al obtener el atributo del selector: ${selector}`)
        }
    }

    async getValue(selector, value) {
        try {
            await page.waitForSelector(selector)
            return await page.$eval(selector, (elemento) => elemento.getValue(value))
        }
        catch (error) {
            throw new Error(`Error al obtener el valor del selector: ${selector}`)
        }
    }

    async getCount(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.$$eval(selector, (elemento) => elemento.length)
        }
        catch (error) {
            throw new Error(`Error al obtener el numero de elementos del selector: ${selector}`)
        }
    }

    async click(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.click(selector)
        }
        catch (error) {
            throw new Error(`Error al dar click al selector: ${selector}`)
        }
    }

    async type(selector, text, opts={}) {
        try {
            await page.waitForSelector(selector)
            return await page.type(selector, text, opts)
        }
        catch (error) {
            throw new Error(`Error al dar escribir en el selector: ${selector}`)
        }
    }

    async doubleClick(selector) {
        try {
            await page.waitForSelector(selector)
            return await page.click(selector, { clickCount: 2 })
        }
        catch (error) {
            throw new Error(`Error al dar doble click al selector: ${selector}`)
        }
    }

    async wait(time) {
        
        return await page.waitForTimeout(time)
        
    }

}

async rightClick(selector){
        try {
            await page.waitForSelector(selector)
            await page.click(selector, { button: 'right'})
        } catch (error) {
            throw new Error(`Error al dar click en el selector ${selector}`)
        }
    }

//to select an option within an html element type: select
 async selectType (page, selector, opts) {
    try {
        await page.waitForSelector(selector)
        return await page.select(selector, opts)
    } catch (error) {
        throw new error(`Error when trying to select an option within the selector: ${selector}`)
    }
}
```//to select an option within an html element type: select async selectType (page, selector, opts) {    try {        await page.waitForSelector(selector)        return await page.select(selector, opts)    } catch (error) {        throw new error(`Error when trying to select an option within the selector: ${selector}`)    }}

const port = process.env.TEST_SERVER_PORT
  ? Number(process.env.TEST_SERVER_PORT)
  : 4444;

process.env.TEST_SERVER_PORT = port.toString();

module.exports = {
  launch: {
    headless: false,
    slowMo: 100,
    launchTimeout: 4000,
    usedPortAction: "kill",
    port,
  },
  browserContext: 'default'
}

Creando la Base Page

Para quién es este curso?

¿Para quién es este curso?

Conceptos Avanzados

Emulación de dispositivos

Modo incógnito del navegador

Creando helpers de utilidad

Capturas de pantalla

Visual Testing

Generando PDFs

Geolocalización

Probando accesibilidad

Puppeteer con Firefox

Medir performance: page load

Medir performance: first contentful paint

Creando nuestro propio framework

Inicializando nuestro framework

Creando la Base Page

Page Object Model

Hacer un E2E

Agregar reporte

BDD

BDD y Gherkin

Configurando codeceptjs con Gherkin y BDD

Creando una Prueba con Gherkin

Creando un Scenario Outline

Generando reporte y agregando imágenes al reporte

CI/CD

Configurando Jenkins con nuestras pruebas y creando reportes

Conclusion del curso

Sigue aprendiendo