Creando una Prueba con Gherkin

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

Comentarios

Luis Ernesto Yepes Fernandez

student•

En esta pagina pueden encontrar configuraciones para los helpers

https://codecept.io/helpers/Puppeteer/#puppeteer

Hernan Camilo Jimenez Garcia

student•

Tuve que añadir tiempo de espera para validar que se encontrara el elemento H2 al hacer login. Simplemente en la función de waitForElement se envía un segundo parametro en segundos:

    validateLogin(){

        I.waitForElement(this.loginPageText, 4)
        I.waitForElement(this.navBar,4)

    }

Roberto Carlos González Castro

student•

Gracias por el aporter Hernan, justamente tenia el mismo inconveniente.

Maximiliano Montes Flores

student•

Creo que en vez de 'right' debería ser 'main' cierto?

Mijail Aliosha Moreno Pérez

student•

Es correcto

CRISTIAN DAVID ARENAS GOMEZ

student•

**En en metodo validateLogin() lo puedes colocar de la siguiente manera por que como lo deja el profe no s epor que pero no me funciono **

<validateLogin() {
   I.waitForElement('.//h2[contains(text(),"Hi,")]', 5);
   I.waitForElement(this.navBar, 5);
}>

**Y el constructor lo podrías dejar de la siguiente manera: **

<constructor(){
      this.navBar = "//header/div[1]";
      this.inputEmail = "input[placeholder='Email']";
      this.inputPassword = "input[placeholder='Password']";
      this.inputButton = "(//button[1][@type='submit'])[1]";
      this.loginPageText = "//h2[contains(text(),'Hi,')]";
   }>

Luis Miguel Urbina Rodriguez

student•

Alguien que comparta el repositorio.

Eudes Pavajeau

student•

A día de hoy en enero 2024, me está apareciendo un error con el npm run test, uso windows 11 con version node 18 y me aprece este error

Error: Could not find Chrome (ver. 121.0.6167.85). This can occur if either

1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or

2. your cache path is incorrectly configured (which is: C:\Users\loleu\.cache\puppeteer).

For (2), check out our guide on configuring puppeteer at

TypeError: Cannot read properties of undefined (reading 'mainFrame')

Intente resolverlo de muchas maneras pero nada que pude, intenté cambiar la versión de node, correr unos comando que me instalaran chrome de puppeteer y aún asi nada

Irving Juárez

student•

Mi manager no sabe ingles, por lo que el BDD no se le hace nada sencillo, que procede en esos casos?

Javier Fuentes Mora

teacher•

Que aprenda ingles con Platzi :) aunque tambien hay gherkin en Español es n poco raro pero se puede hacer, solo para las palabras reservadas , where given etc si necesitaran ser en ingles para que las reconozca el codigo

MANUEL ALEJANDRO CUELLAR GUARIN

student•

Tengo el siguiente error no me deja compilar he validado todo el código más de mil veces como esta en el curso, pero nada Could not include object Step Definition from ./step_definitions/steps.js from module 'C:\Users\mcuellar\OneDrive - Bell Technologies S.A\Escritorio\PuppeteerBDD\step_definitions\steps.js' Could not include object loginPage from module 'C:\Users\mcuellar\OneDrive - Bell Technologies S.A\Escritorio\PuppeteerBDD\pages\loginPage.js' 'super' keyword unexpected here C:\Users\mcuellar\OneDrive - Bell Technologies S.A\Escritorio\PuppeteerBDD\pages\loginPage.js:6 super() ^^^^^

SyntaxError: 'super' keyword unexpected here at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1033:15) at Module._compile (node:internal/modules/cjs/loader:1069:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18)

Javier Fuentes Mora

teacher•

probablemente es algo relacionado con tu sintaxis , puedes darme un repo para ver? , si tardo en contestar puedes encontrarme en twitter

Leonardo Herran

student•

Me aparece el siguiente error en consola a la hora de ejecutar npm run test:

loginPage.visit is not a function

Help me !!

Javier Fuentes Mora

teacher•

tienes una captura de como lo estas corriendo ?

William Peralta

student•

Porque se tiene que poner el loginPage en el "include" del config y no lo importamos direactamente con un import o un require?

Javier Fuentes Mora

teacher•

No te entiendo bien puedes poner una captura de pantalla ?

Luis Ernesto Yepes Fernandez

student•

Mi prueba falla al segundo de esperar por el dashboard. Como podría agregar un timeout ?

Javier Fuentes Mora

teacher•

podrías compartir tu código? para verlo

David steven Abril Pulecio

student•

Archivo:

const { I, loginPage } = inject()

Given('Im on the login page', () => {    
    loginPage.visit();
  });

When('I fill out the form with my email and password', () => {    
    loginPage.login('user@phptravels.com','demouser');
  });

Then('I should see the dashboard page', () => {    
    loginPage.validateLogin()
  });
```const { I, loginPage } = inject()
Given('Im on the login page', () => {        loginPage.visit();  });
When('I fill out the form with my email and password', () => {        loginPage.login('user@phptravels.com','demouser');  });
Then('I should see the dashboard page', () => {        loginPage.validateLogin()  });





Archivo:

```js
const { I } = inject()

class LoginPage {

    constructor() {
        this.inputEmail = "#email"
        this.inputPassword = "#password"
        this.submitButtonLogin = "#submitBTN"
        this.logInPageTest = "#fadein > main > div > div > div > div.pt-3 > div > div > div > div.w-100.text-center.mt-3 > span";
        this.navBar = "#navbarSupportedContent"
    }

    visit() {
        I.amOnPage("/login")      
        I.waitForElement(this.navBar)
        I.seeInCurrentUrl('login')
    }

    login(username, password) {
        I.waitForElement(this.inputEmail)
        I.fillField(this.inputEmail, username)
        I.fillField(this.inputPassword, password)
        I.click(this.submitButtonLogin)
    }

    validateLogin() {
        I.waitForElement(this.logInPageTest, 4)
        I.waitForElement(this.navBar, 4) 
    }

}

module.exports = new LoginPage();
module.exports.LoginPage = LoginPage;
```const { I } = inject()
class LoginPage {
    constructor() {        this.inputEmail = "#email"        this.inputPassword = "#password"        this.submitButtonLogin = "#submitBTN"        this.logInPageTest = "#fadein > main > div > div > div > div.pt-3 > div > div > div > div.w-100.text-center.mt-3 > span";        this.navBar = "#navbarSupportedContent"    }
    visit() {        I.amOnPage("/login")              I.waitForElement(this.navBar)        I.seeInCurrentUrl('login')    }
    login(username, password) {        I.waitForElement(this.inputEmail)        I.fillField(this.inputEmail, username)        I.fillField(this.inputPassword, password)        I.click(this.submitButtonLogin)    }
    validateLogin() {        I.waitForElement(this.logInPageTest, 4)        I.waitForElement(this.navBar, 4)     }
}
module.exports = new LoginPage();module.exports.LoginPage = LoginPage;

<constructor(){
      this.navBar = "//header/div[1]";
      this.inputEmail = "input[placeholder='Email']";
      this.inputPassword = "input[placeholder='Password']";
      this.inputButton = "(//button[1][@type='submit'])[1]";
      this.loginPageText = "//h2[contains(text(),'Hi,')]";
   }> 

const { I, loginPage } = inject()

Given('Im on the login page', () => {    
    loginPage.visit();
  });

When('I fill out the form with my email and password', () => {    
    loginPage.login('user@phptravels.com','demouser');
  });

Then('I should see the dashboard page', () => {    
    loginPage.validateLogin()
  });
```const { I, loginPage } = inject()
Given('Im on the login page', () => {        loginPage.visit();  });
When('I fill out the form with my email and password', () => {        loginPage.login('user@phptravels.com','demouser');  });
Then('I should see the dashboard page', () => {        loginPage.validateLogin()  });





Archivo:

```js
const { I } = inject()

class LoginPage {

    constructor() {
        this.inputEmail = "#email"
        this.inputPassword = "#password"
        this.submitButtonLogin = "#submitBTN"
        this.logInPageTest = "#fadein > main > div > div > div > div.pt-3 > div > div > div > div.w-100.text-center.mt-3 > span";
        this.navBar = "#navbarSupportedContent"
    }

    visit() {
        I.amOnPage("/login")      
        I.waitForElement(this.navBar)
        I.seeInCurrentUrl('login')
    }

    login(username, password) {
        I.waitForElement(this.inputEmail)
        I.fillField(this.inputEmail, username)
        I.fillField(this.inputPassword, password)
        I.click(this.submitButtonLogin)
    }

    validateLogin() {
        I.waitForElement(this.logInPageTest, 4)
        I.waitForElement(this.navBar, 4) 
    }

}

module.exports = new LoginPage();
module.exports.LoginPage = LoginPage;
```const { I } = inject()
class LoginPage {
    constructor() {        this.inputEmail = "#email"        this.inputPassword = "#password"        this.submitButtonLogin = "#submitBTN"        this.logInPageTest = "#fadein > main > div > div > div > div.pt-3 > div > div > div > div.w-100.text-center.mt-3 > span";        this.navBar = "#navbarSupportedContent"    }
    visit() {        I.amOnPage("/login")              I.waitForElement(this.navBar)        I.seeInCurrentUrl('login')    }
    login(username, password) {        I.waitForElement(this.inputEmail)        I.fillField(this.inputEmail, username)        I.fillField(this.inputPassword, password)        I.click(this.submitButtonLogin)    }
    validateLogin() {        I.waitForElement(this.logInPageTest, 4)        I.waitForElement(this.navBar, 4)     }
}
module.exports = new LoginPage();module.exports.LoginPage = LoginPage;

Creando una Prueba con Gherkin

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