In all the applications that we develop, there is an important factor that needs to be considered by developers when they write code.
It is proper structuring of the code that makes it more readable, reusable, scalable, maintainable and user friendly.
It is applicable whether it is a developer who writes code to implement the functionality or a QA who writes automation code to perform regression testing.
Considering this, there is an important design pattern that is followed by QA automation engineers to make sure that the automation code is good in terms of quality.
We call that design pattern the Page Object Model(POM).
What is Page Object Model?
As the name suggests it is a model that is used to represent the elements of a web page as an object.
To explain in detail, consider an application that has a login page.
The login page contains 2 text boxes, one for entering username and other for entering password. It also contains a login button to login to the application.
In this login page, we have elements defined for username, password and login button. To identify these elements, we define “xpath”.
The Page Object Model mainly focuses on defining the “xpath” of all the elements in the page and putting it in a single file.
The elements defined in this file can be accessed in other files by creating an object of this file and calling the corresponding “xpath” of that element.
Advantages of Page Object Model
- First advantage of this model is that it enables us to reuse the “xpath” in multiple files and makes it easy for QA automation engineers to write scripts.
- Second advantage is that editing “xpath” values becomes easy. When there is a change in the “xpath” of any of the elements then the tester needs to change the “xpath” in that single file only and it will be applicable to all the other files that call this “xpath”.
- The third advantage is that this model makes the code more readable and user friendly. If any new QA looks at the code for the first time it will be easy for him to understand the code.
- The fourth advantage is that implementing this model makes it easier to make the code maintainable.
About Using Cypress
This Page Object Model can be implemented in many automation tools such as Selenium, Cypress, Appium, etc.
In this blog we mainly focus on implementing this model in Cypress.
Cypress is an automation tool that runs tests on a browser. It is mainly used for front end test automation.
Is this tool a game changer in the test automation domain? To know more about that you can check it here.
Implementing Page Object Model in Cypress
To start with this implementation let’s consider the example of a login page.
We define a spec file named “login.spec.ts” in cypress to write scripts for login to an application.
The code that doesn’t implement POM looks like this.
In the above file we directly call the “xpath” of username, password and login button.
Writing code in this manner looks easy in the initial phase but becomes a headache for the automation engineer as time passes and the application becomes large.
To overcome this problem, we create a file for defining xpaths of all the elements of the web page.
In our example we create a file named “login.page.ts” to define the xpaths of all the elements in the login page as shown in the image below.
In the above image we can see that we added xpaths of all the elements of the login page username, password and login button in this file.
The next step is to import this file in a spec file and then call these xpaths wherever needed.
After implementing this our “login.spec.ts” file looks like this.
In the above image you can see that we imported the login page in our spec file and used it as an object to call the elements defined in the “login.page.ts” file.
For example, in the above image line number 16, we called the username using “$page.login.username” which will invoke the corresponding xpath of the username we defined in the “login.page.ts”.
Same applies for password and login button in line number 17 and 18.
Writing code in this manner will make the code more readable and understandable.
It also makes editing xpath very easy because we just need to edit the xpath value of the element in the corresponding “page.ts”
In this way we can call the elements of the login page in other spec files wherever needed. This makes the code more reusable, readable, maintainable and user friendly.
Need Help with Your Web/Mobile App Testing Requirements?
Are you looking for a good tech partner to handle your web or mobile app testing project?
If you are, then you can count on Perfomatix as we possess the skills, expertise and tools (Selenium, Appium and Cypress) required to test your web/mobile application.
You can get in touch with our testing experts, and we will schedule a meeting to move things forward.
