If you are thinking about how to implement page object model in Cypress and don’t know how to implement it in Cypress.io.Find 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,
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
Below snippet is the basic syntax to create and store page objects
class classname{
}
export default classnameLet’s create an object for an element in the application
To utilize the object created, we need to import the class to out testcases. Sample code is given below
import classname from ../support/filename.jsNext, 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
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.
Conclusion
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.
