Creando helpers de utilidad

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

jorge luis jaime sánchez

student•

Ejemplo de la función Click usando slector y xpath

click: async (page, selector, isCssSelector=true, opts={}) => {
        try {
            if(isCssSelector){
                await page.waitForSelector(selector)
                await page.click(selector, opts)
            }else{
                await page.waitForXPath(selector)
                const element = await page.$x(selector)
                await element[0].click(opts) 
            }      
        } catch (error) {
            throw new Error(`Error al dar click en el selector: ${selector}`)
        }
}

Juan Pablo Jaramillo

student•

Les comparto dos funciones más

// función clic Derecho
    clickDerecho: async function(page,selector){
        try{
            await page.waitForSelector(selector)
            await page.click(selector,{button: 'right', delay:500}) // da clic derecho en el selector
        } catch(e){
            throw new Error(`Error al dar clic derecho en el selector: ${selector}`)
        }
    },
   // función cargar texto con XPath
    getTextXPath: async function(page,XPath){
        try{
            const textXPath = await page.waitForXPath(XPath)
            return await page.evaluate((name) => name.textContent, textXPath) // Entrega el texto del elemento
        } catch(e){
            throw new Error(`Error al obtener el texto en el XPathr: ${XPath}`)
        }
    }

Moises Abel Avila Garcia

student•

nos enseña mucho

Jesus Cuadro

student•

Aqui un helper que hice para los input tipo select

select: async function (page, selector, opts) {
        try {
            await page.waitForSelector(selector)
            return await page.select(selector, opts)
        } catch (error) {
            throw new Error(
                `Error al seleccionar la opcion con el selector ${selector}`
            )
        }
    },

Jose Eduardo Miranda Valderrama

student•

Debido al nuevo cambio que hubo en Puppeteer, ahora page.waitForXPath(StringSelectorXpath) no es válido, en su lugar se debe usar page.waitForSelector('xpath/'+StringSelectorXpath) por lo que se facilita un poco más la solución del desafío

Xavier Alberto Castillo varon

student••

const puppeteer = require('puppeteer');

const {click, doubleClick, getText, getCount, type} = require('../utils/helpers.js')

describe('extraccion de informacion de una pagina', () => {

let browser

let page

beforeAll(async () => {

browser = await puppeteer.launch({

headless: false,

defaultViewport: null,

args: ['--start-maximized']

})

page = await browser.newPage()

page.setDefaultNavigationTimeout(0)

await page.goto('https://www.wikipedia.org/', { waitUntil: 'networkidle0' });

}, 35000);

afterAll(async () => {

await browser.close();

})

test('extraccion del titulo de la pgina ', async() => {

const titulo = await getText(page, '#www-wikipedia-org > main > div.central-textlogo > h1 > span')

console.log(titulo);

}, 40000)

it('Hacer click en el boton de español', async () => {

const botonEspañol = await click(page, '#js-link-box-es > strong')

console.log('Se hizo click en el boton de español');

await page.waitForTimeout(1000);

await page.goBack();

}, 40000);

test('Contar los enlaces en la pagina de wikipedia en español', async () => {

const cantidadEnlaces = await getCount(page, '#www-wikipedia-org > main > nav.central-featured')

console.log(`La cantidad de enlaces en la pagina es: ${cantidadEnlaces}`);

}, 40000);

it('Escribir en el campo de busqueda', async() => {

const escribirCaompoBusqueda = await type(page, '#searchInput', 'Itali')

console.log('Se escribio en el campo de busqueda');

await page.waitForTimeout(2000);

})

Oscar Uriel Zuñiga Mejia

student•

#home-public > div > div-Header-v2.Header-v2-content.is-dark-header > div.Nav-header > div.Actions2 > a ?

Encuentran algo raro en este selector?

Hernan Camilo Jimenez Garcia

student•

Profe, tengo el siguiente código en un test:

    it('Extraer la informacion de un elemento', async () =>{
        
        await page.waitForSelector('#home-public > div > div.BaseLayout > header > nav > div.Actionsv2 > a')
        const nombreButton = await getText(page, '#home-public > div > div.BaseLayout > header > nav > div.Actionsv2 > a', (button) => button.textContent)
        console.log('nombreButton', nombreButton)
       
    }, 30000)

En el curso pasado me ejecutó sin problemas, pero ahora tengo este error siempre:

[{ "resource": "/c:/Users/camil/OneDrive/Documents/Platzi/Puppeteer/Projecto_Ejemplo/test/extrayendoInfoHelper.test.js", "owner": "Jest (Projecto_Ejemplo)", "severity": 8, "message": "Extrayendo Informacion > Extraer el título de la página y la URL\n-----\nError: thrown: "Exceeded timeout of 5000 ms for a hook.\nUse jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."", "source": "Jest", "startLineNumber": 38, "startColumn": 1, "endLineNumber": 38, "endColumn": 15 }]

Javier Fuentes Mora

teacher•

Hola, es como si no estuviera reconociendo los el timeout que le pusiste puedes compartirme tu repositorio para tratar de replicarlo ?si ves que me tardo en contestar puedes buscarme en twitter ya que no checo esto diario , @javier_mora94

Hernan Camilo Jimenez Garcia

student•

Esta mañana actualicé el VS Code y mágicamente desapareció el error. Seguiré con el curso y estaré atento a ver si encuentro algo similar en el futuro. Gracias

Jose Eduardo Miranda Valderrama

student•

click: async (page, selector,xpath = false) => {
		try {
            if (xpath) {
                selector = "xpath/" + selector
            }
			await page.waitForSelector(selector)
			await page.click(selector)
		} catch (error) {
			console.error(error)
			throw new Error(`Could not click on selector ${selector}`)
		}
	}
```click: async (page, selector,xpath = false) => {        try {            if (xpath) {                selector = "xpath/" + selector            }            await page.waitForSelector(selector)            await page.click(selector)        } catch (error) {            console.error(error)            throw new Error(`Could not click on selector ${selector}`)        }    }

Moises Abel Avila Garcia

student•

me encanta esete curso

click: async (page, selector, isCssSelector=true, opts={}) => {
        try {
            if(isCssSelector){
                await page.waitForSelector(selector)
                await page.click(selector, opts)
            }else{
                await page.waitForXPath(selector)
                const element = await page.$x(selector)
                await element[0].click(opts) 
            }      
        } catch (error) {
            throw new Error(`Error al dar click en el selector: ${selector}`)
        }
}

// función clic Derecho
    clickDerecho: async function(page,selector){
        try{
            await page.waitForSelector(selector)
            await page.click(selector,{button: 'right', delay:500}) // da clic derecho en el selector
        } catch(e){
            throw new Error(`Error al dar clic derecho en el selector: ${selector}`)
        }
    },
   // función cargar texto con XPath
    getTextXPath: async function(page,XPath){
        try{
            const textXPath = await page.waitForXPath(XPath)
            return await page.evaluate((name) => name.textContent, textXPath) // Entrega el texto del elemento
        } catch(e){
            throw new Error(`Error al obtener el texto en el XPathr: ${XPath}`)
        }
    }
 

select: async function (page, selector, opts) {
        try {
            await page.waitForSelector(selector)
            return await page.select(selector, opts)
        } catch (error) {
            throw new Error(
                `Error al seleccionar la opcion con el selector ${selector}`
            )
        }
    },

    it('Extraer la informacion de un elemento', async () =>{
        
        await page.waitForSelector('#home-public > div > div.BaseLayout > header > nav > div.Actionsv2 > a')
        const nombreButton = await getText(page, '#home-public > div > div.BaseLayout > header > nav > div.Actionsv2 > a', (button) => button.textContent)
        console.log('nombreButton', nombreButton)
       
    }, 30000) 

click: async (page, selector,xpath = false) => {
		try {
            if (xpath) {
                selector = "xpath/" + selector
            }
			await page.waitForSelector(selector)
			await page.click(selector)
		} catch (error) {
			console.error(error)
			throw new Error(`Could not click on selector ${selector}`)
		}
	}
```click: async (page, selector,xpath = false) => {        try {            if (xpath) {                selector = "xpath/" + selector            }            await page.waitForSelector(selector)            await page.click(selector)        } catch (error) {            console.error(error)            throw new Error(`Could not click on selector ${selector}`)        }    }

Creando helpers de utilidad

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