No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Cypress Avanzado

Curso de Cypress Avanzado

Javier Fuentes Mora

Javier Fuentes Mora

Patrones de diseño: Page Object Model

10/29
Recursos

Aportes 3

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La URL de prueba que usa el profesor en esta clase es

http://zero.webappsecurity.com/login.html

El constructor de la clase es el siguiente:

export class LoginPage {
    constructor() {
        this.userInput = "#user_login";
        this.passwordInput = "#user_password";
        this.loginButton = "#login_form > div.form-actions > input";
        this.tabs = {
            account_summary_tab: "#account_summary_tab",
            account_activity_tab: "#account_activity_tab",
            transfer_founds_tab: "#transfer_funds_tab",
        };
        this.error = ".alert.alert-error";
    }
}

Dejo de aporte mi solucion, agregue algunas cosas a fin de parametrizar el test y tener datos reutilizables.

//login.cy.js
import LoginWebPage from '../pages/LoginPage'; //import del POM
const loginData = require('../fixtures/loginData'); //data guardada
let loginWebPage, data;

describe('Test de Login', () => {
  beforeEach(() => {
    loginWebPage = new LoginWebPage();
    loginWebPage.visit();
    loginWebPage.isLoadPage();
  });
  it('Do wrong login', () => {
    data = loginData.wrong;
    loginWebPage.doLogin(data.username, data.password);
    loginWebPage.isErrorDisplayed();
  });
  it('Do correct login', () => {
    data = loginData.correct;
    loginWebPage.doLogin(data.username, data.password);
    loginWebPage.validateSuccessfulLogin();
  });
});

Aparte, tengo un archivo con datos que podria reutilizar y cambiar en un solo lugar si estos fueran modificados.

//loginData.js
module.exports = {
  correct: {
    username: 'username',
    password: 'password',
  },
  wrong: {
    username: 'lalala',
    password: 'lalala',
  },
};

Por ultimo, un ejemplo de como deje el POM, agregue la URL para no cambiarla en varios lugares si lo necesitara.

export default class LoginWebPage {
  constructor() {
    this.URL = 'https://zero.webappsecurity.com/login.html';
    this.userInput = '#user_login';
    this.passwordInput = '#user_password';
    this.loginButton = '#login_form > div.form-actions > input';
    this.tabs = {
      account_summary_tab: '#account_summary_tab',
      account_activity_tab: '#account_activity_tab',
      transfer_founds_tab: '#transfer_funds_tab',
    };
    this.error = '.alert.alert-error';
  }

  visit() {
    cy.visit(this.URL);
  }

  isLoadPage() {
    cy.get(this.loginButton).should('be.visible');
    cy.get(this.passwordInput).should('be.visible');
    cy.get(this.userInput).should('be.visible');
  }

  validateSuccessfulLogin() {
    cy.get(this.tabs.account_activity_tab).should('be.visible');
    cy.get(this.tabs.account_summary_tab).should('be.visible');
    cy.get(this.tabs.transfer_founds_tab).should('be.visible');
  }

  doLogin(username, password) {
    cy.get(this.userInput).type(username);
    cy.get(this.passwordInput).type(password);
    cy.get(this.loginButton).click();
  }

  isErrorDisplayed() {
    cy.get(this.error).should('be.visible');
  }
}

todo es mejor con POO!