Page Object Model

Curso Avanzado de Automatización de Pruebas con Puppeteer

Contenido del curso

Para quién es este curso?

1
¿Para quién es este curso?
04:07 min

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

23
Configurando Jenkins con nuestras pruebas y creando reportes
16:33 min

Conclusion del curso

24
Sigue aprendiendo
02:07 min

Cursos Empresas Blog Live Conf Eventos Precios

0:0023:05

Page Object Model

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 15 de 24

Clase 15 / 24

LoginPage.js

import BasePage from "./BasePage";

export default class LoginPage extends BasePage {

constructor() {

super()

this.navBar = "//nav | //header | //*[contains(@class,'nav')] | //*[contains(@class,'menu')]"

// Selectores del formulario de login - varios alternativos para robustez

this.inputEmail = "input[type='email'], input[name='email'], input[id='email'], input[placeholder*='mail' i], input[placeholder*='Email' i]"

this.inputPassword = "input[type='password'], input[name='password'], input[id='password']"

this.submitButton = "button[type='submit'], input[type='submit']"

this.loginPageText = "//*[contains(text(),'Hi,')] | //*[contains(text(),'Dashboard')] | //*[contains(text(),'Welcome')]"

}

async visit() {

await page.goto("https://www.phptravels.net/login", {

waitUntil: "networkidle2",

timeout: 30000

})

const url = await this.getUrl()

console.log(url)

// Esperar que el formulario este listo

await page.waitForSelector("input[type='email'], input[type='text'], input[name='email']", { timeout: 15000 })

}

async login(email, password) {

// Escribir email

const emailInput = await page.$("input[type='email']") ||

await page.$("input[name='email']") ||

await page.$("input[placeholder*='mail' i]") ||

await page.$("input[type='text']")

if (!emailInput) throw new Error("No se encontro el campo de email")

await emailInput.click({ clickCount: 3 })

await emailInput.type(email)

// Escribir password

await page.waitForSelector("input[type='password']", { timeout: 10000 })

const passInput = await page.$("input[type='password']")

await passInput.click({ clickCount: 3 })

await passInput.type(password)

// Click submit

const submitBtn = await page.$("button[type='submit']") ||

await page.$("input[type='submit']")

if (!submitBtn) throw new Error("No se encontro el boton de submit")

await submitBtn.click()

// Esperar navegacion

await page.waitForNavigation({ waitUntil: "networkidle2", timeout: 20000 })

}

async ValidateLogin() {

// Verificar que cambie la URL (ya no contiene 'login')

const url = await this.getUrl()

console.log("URL despues del login:", url)

if (url.includes("login")) {

throw new Error("El login fallo - sigue en la pagina de login")

}

}

}

BasePage.js

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 {

// Detecta si el selector es XPath (empieza con // o (//)

if (selector.startsWith("//") || selector.startsWith("(//")) {

const elements = await page.$$("xpath/" + selector)

if (elements.length > 0) {

await elements[0].click()

} else {

throw new Error(No se encontro el elemento XPath: ${selector})

}

} else {

await page.waitForSelector(selector)

await page.click(selector)

}

} catch (e) {

throw new Error(Error al dar click al selector ${selector}: ${e.message})

}

}

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

}

}