Don’t know how to implement page object model in Cypress.

If you are thinking about how to implement page object model in Cypress and don’t know how to implement it in here, You are in the right place,

In this post, we will cover step by step to implement the POM model.

What is Page Object Model?

Before proceeding, let’s understand what exactly is Page object model is.

In short in POM, In the POM model, we tend to keep the page elements of an application or website in a separate file. We will then call the objects in our test cases to perform an action on them to achieve a flow in the test case.

Read more about of POM model.

How it is achieved in cypress

Same as in other testing frameworks, Cypress also supports POM, where we can store objects for each specific component separately and call the object to be used in test cases.

Steps to achieve page object model

Before implementation of POM, cypress will look something like this,

implement page object model

Let’s transform the above test case into a POM model test case.

Firstly we need to go to the Support folder in cypress.

Let’s create a file for the module called (Module1). We can name it anything, for example, the purpose we will create it as Module_PO.js

implement page object model

Below snippet is the basic syntax to create and store page objects

class classname{
export default classname

Let’s create an object for an element in the application

implement page object model

To utilize the object created, we need to import the class to out testcases. Sample code is given below

import classname from ../support/filename.js

Next, we need to create an object for the class to call the page elements. Sample code given below

new pageobject1 = new Module1_PO()
Implementation of Page Model
implement page object model

The above test case performs the same way as a normal script, except that we optimized the test case to follow the POM model, so that element can be reused in other test cases as well by calling the object.

It reduces the risk of changing the element properties in all test cases if there is a change in properties.

As there is a single source, we can update here, so that same is reflected in all the test cases where it is utilized, thereby reducing maintenance effort.


Establish a Page object model in your cypress test case. Make the test suite more optimized and re usuable. We hope the content is informative and helpful.

Leave a Reply