POM in Cypress - Setup & Usage

This page shows how Page Object Model looks in real Cypress code.

Where Page Objects Live

Keep all page objects in one place:

Important Notes

• Page objects use .js

• Test (spec) files use .cy.js

• Page objects should never contain it() or describe()

  
  

This separation makes the project easier to understand and maintain.

Creating a Page Object File

Each page object is a JavaScript class.

Basic rules to follow:

• Class name starts with a capital letter

• File name matches the class name

• One page object = one responsibility

  
  

Navigation Page Object Example

The navigation menu exists on every page, so it makes sense to keep it as a shared page object.

What’s Important Here

• Methods describe user actions

• Cypress commands stay inside the page object

• No assertions inside this object (only actions)

  
  

Exporting the Page Object

Instead of exporting the class, export an instance:

This allows you to use the page object directly in tests, without creating a new instance every time.

Using Page Objects in Test Files

In a Cypress test file:

Why do this ?

• Tests read like a story

• No selectors inside tests

• Easy to understand even months later

• VS Code shows available methods automatically

  
  

Method Naming

Keep method names:

• Short

• Clear

• Action-based

Examples:

• formLayoutsPage()

• datePickerPage()

• toastrPage()

• tooltipPage()

  
  

The goal is readability, not perfect grammar :).