cypress-framework

Arquitectura avanzada de testing con Cypress aplicando el patrón Page Object Model (POM). Separa los selectores y acciones de cada página en clases reutilizables, manteniendo los tests legibles, mantenibles y desacoplados de la UI.

Esta arquitectura es la evolución del enfoque aplicado en cypress-e2e-suite.

Stack

Por qué Page Object Model

Sin POM	Con POM
Selectores repetidos en cada test	Selectores centralizados en una clase por página
Un cambio de UI rompe muchos tests	Un cambio se corrige en un solo lugar
Tests difíciles de leer	Tests expresan intención, no detalles

Arquitectura

cypress/
├── e2e/
│   ├── login.cy.js
│   ├── inventory.cy.js
│   └── cart.cy.js
├── support/
│   ├── pages/
│   │   ├── BasePage.js        # Clase base (herencia)
│   │   ├── LoginPage.js       # Page Object de login
│   │   └── InventoryPage.js   # Page Object de inventario
│   ├── commands.js            # Comandos de alto nivel (loginAs)
│   └── e2e.js
└── fixtures/users.json

El flujo es: test → comando personalizado → Page Object → selector. Cada capa tiene una sola responsabilidad.

Arquitectura visual

Capas del Page Object Model

flowchart TD
    TEST["Test spec<br/>(login.cy.js, inventory.cy.js)"]
    CMD["Comando personalizado<br/>cy.loginAs()"]
    PO["Page Objects<br/>LoginPage · InventoryPage"]
    BASE["BasePage<br/>(clase base / herencia)"]
    SEL["Selectores del DOM<br/>data-test=..."]
    TEST --> CMD
    CMD --> PO
    PO --> BASE
    PO --> SEL

Loading

Herencia de clases

classDiagram
    class BasePage {
        +visit(path)
        +getTitle()
    }
    class LoginPage {
        +elements
        +fillUsername(value)
        +fillPassword(value)
        +submit()
        +getError()
    }
    class InventoryPage {
        +elements
        +sortBy(value)
        +addProduct(id)
        +getItemCount()
    }
    BasePage <|-- LoginPage
    BasePage <|-- InventoryPage

Loading

Cómo ejecutar

npm install
npm run cy:open   # modo interactivo
npm run cy:run    # consola

Demo

Licencia

MIT © 2026 Wilson Alexander Caal Pacay