Page Object Model in Cypress Tutorial with Example

Designing an effective test automation framework is an integral part of automation testing. It is important that your test automation framework has no code duplication, great readability, and is easy to maintain. There are many design patterns that you can use to achieve these goals, but in our experience, we have always found Page Object Model to be the best and would recommend you follow the same. As Cypress has been gaining a lot of popularity over the years, we will be looking at how you can implement Page Object Model in Cypress. To help you understand easily, we have even used a Cypress Page Object Model example. So let’s get started.

In a Page Object Model, the page objects are always separated from the automation test scripts. Since Cypress has the ability to enable Page Object Model, the page files in POM are separated into different page objects and the test cases are written in test scripts.

How to Implement the Page Object Model in Cypress?

Being an experienced automation testing company, we have implemented Page Object Model in Cypress for various projects. Based on that experience, we have created a Cypress Page Object Model example that will make it easy for you to understand.

• Create a Pages Folder
• Add Methods & Locators
• Create a Step Definition Folder
• Import & Execute

Let’s assume that we have to automate the login process in a sample page and that we have two pages (Home Page & Login Page) to focus on.

Create a Pages Folder

The project structure is an aspect we’ll need to know for implementing Page Object Model in Cypress. So we have created a separate folder called pages under the Cypress folder to store both the Home and Login pages.

In the example above, we can see both the CodoidPortalHomePage.js and CodoidPortalLoginPage.js. Under the ‘pages’ folder we created.

Add Methods & Locators

Now that we have created separate pages, we have added all the required methods related to Codoid’s home page to CodoidPortalhomePage.js and the ones related to Codoid’s login page to CodoidPortalLoginPage.js.

To increase the reusability, we have added the locators as variables in both instances.

Home Page

export class CodoidPortalHomePage{
 
    txtBox_Search = ':nth-child(2) > .oxd-input-group > :nth-child(2) > .oxd-input'
    codoidLogo = ':nth-child(3) > .oxd-input-group > :nth-child(2) > .oxd-input'
    btnSearchIcon = '.oxd-button'
 
    enterSearchKeyword(Username){
        cy.get(this.txtBox_Search).type(Username)
    }
 
    verifyCodoidLogo(Password){
        cy.contains(this.codoidLogo)
    }
 
    clickSearchIcon(){
        cy.get(this.btnSearchIcon).click()
    }
}

Login Page

export class CodoidPortalLoginPage{
    txtBox_UserName = ':nth-child(2) > .oxd-input-group > :nth-child(2) > .oxd-input'
    txtBox_Passwords = ':nth-child(3) > .oxd-input-group > :nth-child(2) > .oxd-input'
    btnLogin = '.oxd-button'
    txtDashBoardInHomePage = '.oxd-topbar-header-breadcrumb > .oxd-text'
    txtInvalidcredentials = 'Invalid credentials'
    subTabAdmin = 'Admin'
    txtSystemUserInAdminTab = 'System Users'
    enterUserName(Username){
        cy.get(this.txtBox_UserName).type(Username)
    }
    enterPassword(Password){
        cy.get(this.txtBox_Passwords).type(Password)
    }
    clickLoginBtn(){
        cy.get(this.btnLogin).click()
    }
    verifyHomePage(){
        cy.get(this.txtDashBoardInHomePage)  
     }
     verifyAdminSection(){
        cy.contains(this.subTabAdmin).click()
     }
     verifySystemUser(){
        cy.contains(this.txtSystemUserInAdminTab)
     }
}

Create a Step Definition Folder

The next step in implementing Page Object Model in Cypress would be to create a ‘Step Definition folder. We have created it under the ‘e2e’ folder, which stores all the test cases. We have then created a test spec file by the name ‘testFile.js’ under the ‘step definitions’ folder.

Note: If you are using a Cypress version that is below 10, you’ll have to create a ‘step definitions’ folder under ‘integration’ and not under e2e.

Import & Execute

The final step in implementing the Page Object Model in Cypress would be to import the pages we have created to access its methods and execute them. So we will be creating instances of the CodoidPortalHomePage.js and CodoidPortalLoginPage.js classes and call the respective methods as shown in the code snippet below.

import {
    Given,
    When,
    Then,
  } from "@badeball/cypress-cucumber-preprocessor";

import { HomePage } from "../../pages/CodoidPortalHomePage";
import { LoginPage } from "../../pages/CodoidPortalLoginPage";

const homeage = new CodoidPortalHomePage()
const loginPage = new CodoidPortalLoginPage()


Given('User is at the login page', () => {
    cy.visit('https://opensource-demo.orangehrmlive.com/')
})

When('User enters username as {string} and password as {string}', (username, password) => {
    loginPage.enterUserName('Admin')
    loginPage.enterPassword('admin123')
})

When('User clicks on login button', () => {
    loginPage.clickLoginBtn()
})

Then('User is able to successfully login to the Website', () => {
    homeage.verifyHomePage()
})

Now that we have implemented Page object model in Cypress, it’s time to execute the test file in Cypress. So you can open Cypress by running the following command in the terminal.

npx cypress open

Once you have opened Cypress, all you have to do is run the testfile.spec.js file.

Best Practices for Page Object Model in Cypress

Assertions should not be included in page objects

When building end-to-end test scripts, aim to include only one main assertion or a set of assertions per script. Additionally, you should not place assertions in any of the functions provided by your page objects.

Identify the page object class by using a clear name

It’s important to make sure the name you choose makes it 100% clear what’s inside the page object. If there is a scenario where you are unable to pinpoint what the page object does, then it is a sign that the page object does too much. So make sure to keep your page objects focused on particular functions.

Methods in the page class should interact with the HTML pages or components

Make sure your page class has only the methods that an end user can use to interact with the web application.

Use Locators as variables

There are high chances for the “Xpath” of an element changes in the future. So if you use a locator as a variable, you can just change the Xpath of the single file, and it will be applied to all the other files that call the same “Xpath”.

Separate the Verification Steps

Ensure to separate the UI operations and flow from the verification steps to make your code clean and easy to understand.

Conclusion:

So in addition to using a Cypress Page Object Model example, we have also listed the best practices that you can use to implement the same in your project. Implementing Page Object Model in Cypress will make it very easy when you have to scale your project and make maintaining it seamless as well. Being a leading automation testing service provider, we will be publishing such insightful blogs regularly. So make sure you subscribe to our newsletter to never miss out.