Cypress Page Object Model (POM) Implementation Guide

Test automation has become an integral part of the software development life cycle, and the market is growing at an exponential pace. Everyday we are getting new tools and techniques for test automation, Cypress is one of the most advanced tools for performing test automation. We have different types of framework designs patterns and models for implementing cypress automation POM (Page Object model) is one of them, it is one of the most widely used test automation design patterns. In the page object model we use object and class for representation of locators and functions available on the web application for each web page.

In POM we can bifurcate an web application into multiple pages and for each page we can create a particular class which will depict the functionalities available on the web page.

We keep all the locators associated with the page in these classes, which helps us in identifying objects on the web page while performing automation of an application.

Advantages of POM (Page Object Model)

There are multiple advantages of POM, it makes the test framework easy to use and reduces redundancy.

Reusability of code: POM is one of the most efficient ways to increase code reusability. As while performing automation when the user will be defining a page class for a particular web page, it will contain all the functions and locators associated with that page. So, the user needs to define all this information at once and it can be used on multiple occasions where ever application needs to access that page for a particular flow, all the code which is written for that page can be reused. As we have multiple classes for multiple pages, possibilities of having duplicate locators get reduced. And we can use these locators and methods across test scenarios.

Maintainability of code: Using POM it is easy to manage and maintain already written code. As users will be having all the classes associated to particular pages at one place, it becomes easy to see which all pages got covered as a part of POM and users can easily use these pages while performing automation. By creating POM we are separating pages as layers of methods and locators for each page, so it makes it easy for the test flow code in the test layers and all the methods and objects stay in the POM layer.

Changes accommodation: As web applications are bound to get updated during every release there will be changes on multiple pages, using the page object model we can easily handle those changes in our automation. With POM if the element locator got changed for any of the web elements we just need to update it at a single pom file and it will be updated for all the scenarios which we are running. Similarly if there comes a change related to some functionality, we just need to update the implementation of the method inside the page object model and it can be handled.

Prerequisite for POM

For implementing POM in the test framework a user needs to have a good understanding of test automation, locating web elements on the web application UI, knowledge on writing functions and methods and understanding of OOPS concept is very important. System wise for implementing through Cypress testing we need to have cypress (it should be up and running ) and web application (stable and deployed on test environment).

Implementation of POM based test framework:

We will be learning this implementation in steps, in an easily understandable way.

Step 1: Firstly you need to create a folder naming it as pageobjects, under the cypress folder, where you will be keeping all your page classes.
Step 2: We will be creating a java script file naming it as login-page.js under the pageobject folder, in this file we will be keeping the locator of all the web elements of the login page and methods to perform login functionality.

Step 3: Inside login-page.js we need to create a loginUser class, which we will be exporting to the test scenarios which we will be writing in gherkins, inside this class we will be creating objects named as elements. Inside this object will be storing the element locators of all the web elements of the login page in the form of key and value pair.

`class loginUser{
  elements = {
      usernameInput : () => cy.get('input[name="userName"]'),      
      passwordInput : () => cy.get('input[name="password"]'),    
      loginBtn : () => cy.get('input[name="submit"]'),
      forgotPassword : () => cy.get('input[name="forgot"]'),
      successTxt : () => cy.get('h4'),
      errorTxt : () => cy.get('span')
  }
}
export default loginPage;`

Post creating this we will be writing mentors for multiple operations which we will be doing using the login page, such as logging into the application using username and password.

So we will be creating a method for basic actions which we need to perform on the login page.

Example: click on submit button, entering username, entering password and clicking on forgot password.

class loginUser{
  elements = {
      usernameInput : () => cy.get('input[name="userName"]'),      
      passwordInput : () => cy.get('input[name="password"]'),    
      loginBtn : () => cy.get('input[name="submit"]'),
      forgotPassword : () => cy.get('input[name="forgot"]'),
      successTxt : () => cy.get('h4'),
      errorTxt : () => cy.get('span')
  }
//method for entering username
  enterUsername(username)
  {
      this.elements.usernameInput().clear();
      this.elements.usernameInput().type(username);
  }
//method for entering password
  enterPassword(password)
  {
      this.elements.passwordInput().clear();
      this.elements.passwordInput().type(password);
  }
 //method for clicking on submit button
  clickSubmit() {
      this.elements.loginBtn().click();
  }
//method for clicking on forgot password
  clickForgot() {
    this.elements.forgotPassword().click();
  }
}

Step 4: As we are following cucumber methodology, so now we will be creating a feature file where we will be writing test steps for a particular test scenario in given, when,and , then. And for each step we will be creating a separate step definition file.

Here for the login feature the step login into the application is defined under common.steps.js file.

Step 5: Inside common.steps.js we are importing the login page pom file which we created earlier to get access to all the element locators and methods which we created, and now we can simply call them and go ahead with our login functionality.

import loginPage from '../../pageobjects/loginPage'
describe('POM world test', () => {
 beforeEach(function() {
   // executes prior each test within it block
   cy.visit('https://firestick.com');
})
 it('Verify Login successful', () => {
   const loginObj = new loginPage();
   loginObj.enterUsername('test123')
   loginObj.enterPassword('tester@12345')
   loginObj.clickSubmit();
   loginObj.elements.successTxt().should('have.text','Login Successfully');
 })
 it('Verify Login unsuccessful for wrong username/password', () => {
   const loginObj = new loginPage();
   loginObj.enterUsername('test1234')
   loginObj.enterPassword('tester@123')
   loginObj.clickSubmit();
   loginObj.elements.errorTxt().should('contain','Enter your userName and password correct');
 })
})

Step 6: Now you can simply run the feature file for login using cypress commands and it will execute the test case using Page object model and we can execute it in both modes headed and headless.

Conclusion
POM(Page Object Model) makes test automation implementation using cypress extremely simple and easy to understand, its layered architecture helps users to understand the flow of data very easily. And we can achieve a good amount of code redundancy using this, if an element locator gets changes, it’s fairly easy to accommodate these changes in automation by just changing one locator at a single location. So the usage of POM design pattern is very well recommended.

Source: This blog was originally published at testgrid.io