Page Object Model

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

Manuel Arce Oyarzo

student•

Acá les dejo el repositorio de esta clase.

Luis Ernesto Yepes Fernandez

student•

this.navBar = "//div[@class='menu-wrapper']"
        this.inputEmail = "input[placeholder='Email']"
        this.inputPassword = "input[placeholder='Password']"
        this.submitButton = '(//button[1][@type="submit"])[1]'
        this.loginPageText = "//h2[contains(text(), 'Hi,')]"

Ariel Gonzales

student•

como podria configurar el proyecto para que javascript o el editor VSC reconozca automaticamente las funciones del objeto page??, porque note que no te da sugerencias una vez agregamos los hooks o usamos variables, y esto sucede con otras variables

Javier Fuentes Mora

teacher•

Podrias usar typescript o usar un IDE como webstorm que te da eso aunque sea js

Santiago Velandia Gallo

student•

Me sale esto y se abren un montón de navegadores al ejecutar la prueba, alguien sabe por que sucede ? en mi otra carpeta donde tengo lo del curso anterior no sucede D:

(node:27316) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit (Use node --trace-warnings ... to show where the warning was created) (node:27316) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit (node:27316) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit (node:27316) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGHUP listeners added to [process]. Use emitter.setMaxListeners() to increase limit

Santiago Velandia Gallo

student•

después de muchas batallas lo solucioné desinstalando la extensión de jest y volviendo a instalar :'v

Luis Alberto Ramirez

student•

¿Que extensiones desinstalaste? tengo el mismo problema y aún desinstalando sigo sin poder resolver el problema

Alberto Alejandro Foinquinos Benitez

student•

Como se habran dado cuenta pusieron un captcha en la pagina de https://phptravels.org/login

No encontre la manera de pasarlo automaticamente pero para que no pierdan tiempo en eso, les sugiero que hagan un wait del tiempo que creen les va a tomar resolverlo, y luego durante la prueba, lo resuelven en vivo y la dejen seguir

Julianny Caicedo

student•

BasePage.Test.js

import BasePage from "./BasePage";

describe('Pruebas de BasePage', () => {

let basePage

beforeAll(async () => {

basePage = new BasePage()

})

it('Debde de abrir Google y obtener el titulo', async () => {

await page.goto('https://www.google.com')

const title = await basePage.getTitle()

console.log('El titulo es:', title)

expect(title).toBeDefined()

})

it('Debe obtener la URL correcta', async () => {

const url = await basePage.getUrl()

console.log('La URL es:', url)

expect(url).toContain('google')

})

Julianny Caicedo

student•

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

}

Julianny Caicedo

student•

import LoginPage from "./pages/LoginPage"

describe("Iniciar Sesion en la pagina", () => {

jest.setTimeout(30000)

let loginPage

beforeAll(async () => {

loginPage = new LoginPage()

await loginPage.visit()

})

test("Debera estar en la pagina de login", async () => {

const url = await loginPage.getUrl()

expect(url).toContain("login")

})

test("Debera llenar los campos y hacer login", async () => {

await loginPage.login('user@phptravels.com', 'demouser')

}, 20000)

test("Validar que este en el dashboard", async () => {

await loginPage.ValidateLogin()

}, 20000)

})

Julianny Caicedo

student•

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

}

carlos andres posada chica

student•

Tengo este problema y este es mi codigo, alguna sugerencia: import LoginPage from "../pages/LoginPage";

let loginpage

describe ('Iniciar sesion en la página', () =>{ jest.setTimeout(10000) beforeAll(async ()=>{ //Insancia de un objecto a partir de la clase LoginPage loginpage = new LoginPage() })

    it('Debe ir a la página',async ()=>{
        await loginpage.visit()
    })

    it('Debe llenar los campos del Login',async ()=>{
        await loginpage.login('carlos.jest@udea.edu.co','a1b2c3d4')
    },10000)

    it('validar que este en el dashboard',async ()=>{
        await loginpage.validatelogin()
    },10000)

})

MANUEL ALEJANDRO CUELLAR GUARIN

student•

A mí me pasa igual

Martín González

student•

Es posible que estas credenciales ya no sean validas? ('user@phptravels.com', 'demouser')

Javier Fuentes Mora

teacher•

siempre puedes checar en su pagina web https://phptravels.com/demo/

Luis Ernesto Yepes Fernandez

student•

No entendí muy bien como hacer tu propio Xpath para cada elemento. Podría alguien explicar mejor? Gracias

Javier Fuentes Mora

teacher•

creo que lo entendiste muy bien después , por tu otro comentario , muy bien hecho :D

David steven Abril Pulecio

student•

Les dejo un repositorio actualizado:

David101111101/Puppeteer-Framework

Mario Alexander Vargas Celis

student•

import LoginPage from "../pages/LoginPage";

let loginPage;

describe("Iniciar sesión en la página", () => {

    beforeAll(async () => {
        loginPage = new LoginPage();
        await loginPage.visit(); 
    }, 10000); 

    it("Debería ir a la página", async () => {
     
    }, 20000);

    it("Debería llenar los campos", async () => {
        await loginPage.login("wajav34577@jahsec.com", "123456789");
    }, 20000);

    /*it("Validar que esté en el dashboard", async () => {
        await loginPage.validateLogin();
    }, 30000);*/

});
```import LoginPage from "../pages/LoginPage";
let loginPage;
describe("Iniciar sesión en la página", () => {
    beforeAll(async () => {        loginPage = new LoginPage();        await loginPage.visit();     }, 10000);&#x20;
    it("Debería ir a la página", async () => {         }, 20000);
    it("Debería llenar los campos", async () => {        await loginPage.login("wajav34577@jahsec.com", "123456789");    }, 20000);
    /\*it("Validar que esté en el dashboard", async () => {        await loginPage.validateLogin();    }, 30000);\*/
});

Hilda Jhoana Chicaiza Suntasig

student•

tengo el siguiente error de sintaxis, alguien me podria ayudar porfavor

y pase de desplegar mas de 10 ventanas de chromium a que no se desplegue ninguna...

Fernanda Vieira Jófili

student•

Si ya no les funciona el link de la página de pruebas, aquí tienen una opción: https://demo.testim.io/

CRISTIAN DAVID ARENAS GOMEZ

student•

https://phptravels.org/login

Irving Juárez

student•

Si a ustedes (como a mí) no les salen los tests, les recomiendo que le pongan la configuracion de slowMo, ya que si va muy rapido, no puede hacer login y se queda en la misma pagina, en lugar de ir al dashboard

this.navBar = "//div[@class='menu-wrapper']"
        this.inputEmail = "input[placeholder='Email']"
        this.inputPassword = "input[placeholder='Password']"
        this.submitButton = '(//button[1][@type="submit"])[1]'
        this.loginPageText = "//h2[contains(text(), 'Hi,')]"

    it('Debe ir a la página',async ()=>{
        await loginpage.visit()
    })

    it('Debe llenar los campos del Login',async ()=>{
        await loginpage.login('carlos.jest@udea.edu.co','a1b2c3d4')
    },10000)

    it('validar que este en el dashboard',async ()=>{
        await loginpage.validatelogin()
    },10000)

import LoginPage from "../pages/LoginPage";

let loginPage;

describe("Iniciar sesión en la página", () => {

    beforeAll(async () => {
        loginPage = new LoginPage();
        await loginPage.visit(); 
    }, 10000); 

    it("Debería ir a la página", async () => {
     
    }, 20000);

    it("Debería llenar los campos", async () => {
        await loginPage.login("wajav34577@jahsec.com", "123456789");
    }, 20000);

    /*it("Validar que esté en el dashboard", async () => {
        await loginPage.validateLogin();
    }, 30000);*/

});
```import LoginPage from "../pages/LoginPage";
let loginPage;
describe("Iniciar sesión en la página", () => {
    beforeAll(async () => {        loginPage = new LoginPage();        await loginPage.visit();     }, 10000);&#x20;
    it("Debería ir a la página", async () => {         }, 20000);
    it("Debería llenar los campos", async () => {        await loginPage.login("wajav34577@jahsec.com", "123456789");    }, 20000);
    /\*it("Validar que esté en el dashboard", async () => {        await loginPage.validateLogin();    }, 30000);\*/
});

Page Object Model

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