Pathwise

Manuals / Cypress / Chapter 8

C · Structure · intermediate · Week 5–6 · Chapter 8 of 12

Page Object Model in Cypress

POM in Cypress uses plain classes or modules — not inheritance magic. Encapsulate selectors and intent methods; keep specs as user stories.

Path progress
60%

Step 1 of 4

LoginPage class

Methods: visit(), login(user, pass), assertError(msg). Selectors private to the class.

LoginPage classDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →LoginPage classdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

class LoginPage {
  visit() { cy.visit("/"); }
  login(user, pass) {
    cy.get("[data-test=username]").type(user);
    cy.get("[data-test=password]").type(pass);
    cy.get("[data-test=login-button]").click();
  }
  assertError(msg) { cy.get("[data-test=error]").should("contain", msg); }
}
export default LoginPage;

Do this now

Create cypress/e2e/pages/LoginPage.js. Refactor login specs to use it.

Was this step clear?
Chapter learning outcomes
  • Page classes
  • Composition over deep hierarchies
  • cypress/e2e/pages/ layout

Clear these before you leave

Side quest

Checkout flow POM

CheckoutPage: fillShipping(), fillPayment(), assertConfirmation(). End-to-end purchase spec.