Page Objects and App Actions with Cypress : My thoughts
Cypress development team has strongly recommended to use App actions instead of Page object model design pattern in a blog ‘Stop using Page Objects and Start using App Actions’ .
And because of it , most of us get quite confused on whether to use page object design pattern or App actions with Cypress.
I too was in dilemma to use page object design pattern with Cypress in the project after reading the Cypress blog , but I went with it anyhow.
I have been working with the same for a year now and hence through this blog, I want to share my learnings and my experience about working with page object design pattern in Cypress test automation and how I believe that page object design pattern can still be used efficiently with Cypress.
About Page Object Model
This is one of the most popular design pattern in the test automation. In this , each page class represents the page of your test application and page object will contain all the web elements , actions and validations of the page.
Let us see different approaches with which we can implement the page object model design pattern with Cypress.
Approach 1
In this approach , we will create a page class and each page class exports a single page object instance of the class.This single page object instance will further be used in test layer.
Also , we will create a base class which will contain the common actions and the page elements.
Page Layer
Test layer — Page object usage in test file
Note — You can use this approach when you tend to use classes and inheritance in your automation scripts.
Approach 2
In this approach , instead of using page objects , we will create page modules which will contain the web elements and actions as public functions.
These public functions will be further exported so as to use them in test layer.
Page Module with public functions
Test layer
I am using approach 2 in my current project and it is working smoothly without impacting Cypress internal async logic.
You can use any of these two approaches if you are going with the page object model design pattern.
Note — I will strongly recommend not to create the instance of page class directly in test layer because it will lead to intermittent Cypress async issues as you progress on your project.
May be this could be one of the reasons why Cypress doesn’t recommend to use Page object Model design pattern.
As we are now aware about how to use page object model design pattern effectively. Let’s understand little about App actions as well.
About App actions
In App actions , test code interacts with application code directly instead of interacting via UI. This makes the execution faster as test code helps you to set the state of application directly by invoking the application’s internal logic using Cypress window object.
In order to use App actions , you need to keep Cypress test in same repository where your application code resides. This will help Cypress to access your application code and data model objects.
What are my views on App Actions
I have gone through the documentation that Cypress has done for App actions , also, I have tried it by myself and I believe this App actions is more developer oriented rather than tester oriented.
I do not have any problem in that. But , I feel that App actions has some pitfalls/concerns which Cypress blog has not addressed.
for example:
- In App action , app code and cypress test code will be tightly coupled . If any change or refactoring occurs in app code then it will be a nightmare to update the test code.So how this App actions is going to help us in this situation?
- This approach only works if you have the access for app code and I am not sure whether everyone would have that access in their project. For instance , sometimes Testing team is from vendor side and hence doesn’t have the access of app code most of the time. So, in this case how can we apply the App actions approach in Cypress tests?
- QA needs to have optimum frontend technology knowledge (like React)in order to use App actions effectively and hence it can prove out to be quite overwhelming for any QA to have knowledge on various frontend technologies.
Although ,we cannot deny the fact that App Actions is quite fast as compared to page object model approach as here the state of application is set before performing any action while on other hand with page object approach you actually need to interact with UI .
Conclusion
To conclude, If your QA team is not comfortable in dealing with app code as well as test code then I would suggest to go with the page object approach and if you choose to do so, you can follow any of the aforementioned approaches, but if QA team is well equipped with app code and can handle the previously mentioned concerns then you can go with App actions with Cypress.
