How To Implement Cypress Page Object Model

Cypress is a popular web test automation framework that is gaining popularity among developers and QAs due to its ease of installation and configuration. This article explains how to use Cypress Page Object Model for better testing results.

What is Page Object Model

The Page Object Model is one of the popular design patterns that is widely used in test automation. In a web application, the term “Page Object Model” refers to the use of objects and classes to recognise all the identifiers and components used for automation associated with that specific page.

In this approach, a Page class is created for each web page of the application. This Page class contains web elements as well as methods for performing certain tasks on these web elements. Test cases, which are written in a separate Test class file, access these web elements and methods.

Cypress Page Object Model Example:

To begin with, the Cypress page object model certain prerequisites should be followed:

1)Node.Js should be installed.

2)Cypress should be configured.

3)Base project should be configured.

Let’s see the project Structure for the Page Object Model in Cypress.

In the above example, a folder named “pageobjects” is created under the “Cypress” folder. That will be used to store the PageObject classes.

HomePage class contains all the locators for the HomeScreen of the application.

class HomePage {
getUserName() {
    return cy.get('#reg_username');
}
getEmail(){
    return cy.get('#reg_email');
}
getPassword(){
    return cy.get('#reg_password');
}
getLoginUserName(){
    return cy.get('#username');
}
getRegisterButton() {
    return cy.get('.woocommerce-Button');
}
}
const homePage = new HomePage()
export default homePage

We have created the object of the HomePage class and exported this object. This object now can be used by other classes by using the import statement.

Create a test class as homepage.js (Cypress > 10) and import the homepage class.

import homepage from '../../pageobjects/homePage';

import homepage from '../../pageobjects/homePage';
import { faker } from '@faker-js/faker';

describe('Automation Test Suite ', function() {
    it('Cypress Test Case', function() {
    // Use of PageObject Class 
    homepage.enterURL(url)
    homePage.getUserName().type(this.data.Username);
    homePage.getEmail().type(this.data.Email);
    homePage.getPassword().type(this.data.NewPassword);
    homePage.getRegisterButton().click();

    //Checking whether the Registration is successful and whether UserName is populated under login section
    homePage.getLoginUserName().should('have.value',this.data.Username);

Page Object Model Benefits

There are certain benefits of using the Page Object Model.

1)Code Reusability is maintained through Page Object classes.

2)Code is more readable and much cleaner.

3)Maintainability improved as in case of locator changes only go through the locator class instead of test classes.

Conclusion: The page Object model is a very popular design approach, Hence most QA engineers prefer this approach while creating test automation frameworks. However, it is not always necessary to follow a single approach. You can visit Cypress’s official documentation blog on why POM is not a good approach for Cypress.

Visit this post to learn more about Cypress Vs Selenium.