SDET Unicorns

Page Object Model in Cypress

Table of Content

In this tutorial, we will cover how to setup Page Object Model in Cypress. We will also cover why Cypress team suggests not to use Page Object Model.

What is Page Object Model (POM)

POM is a popular design pattern that helps in reducing code duplication and improves test maintenance. You do that by storing page related elements in a separate file which gets called by your tests.


Why NOT to use POM per Cypress?

In an article published by Cypress team back in 2019, they pointed out that instead of using POM you should rather use App Actions.

What are App Actions?
Instead of interacting through the UI, App Actions lets you dispatch actions directly through the application internal logic by using the window.Cypress object. This way you end up saving a lot more time by setting your app in a certain state rather than getting to that state via UI.

For ex: Use App actions to set your app in a logged in state if you need a user that needs to do something after it’s logged in. Traditionally, you would use UI to first login and then execute your test.


My Opinion

I personally feel you can use both, use Page objects to store page related details and also access Application code to speed up your tests as well (if that is an option for you).
 
Cypress works best if you have access to your code base and you are testing application in the pre-PROD mode (dev/qa/stage). For example, in my test app, it’s a WordPress application and I don’t have access to the application code so I cant use App actions but I can still go ahead and use POM.


How to setup POM in Cypress?

Setting up POM in Cypress is pretty straightforward, you just need to setup a class that contains your web elements and page methods. Let’s take a look at an example –

0*omuwD6cM50pSWjVI
Page Class in Cypress

In the screenshot above, I have created a HomePage class with getter functions that are calling the web elements using Cy.get(). And, it also has a page method that is going to the base url of the website.

Calling Page class in the tests
Now, to access the Page related elements and methods, you can simply import it your test file and call the relevant method.

HomePage.visitPage()
HomePage.getStartedBtn.click()


Conclusion

Setting up POM is a common design pattern in the test automation industry, so as long as you implement it correctly I personally don’t see any harm in NOT using POM. At the same time, I agree with Cypress team regarding App Actions as that can significantly improve your tests speed as well as stability.


Check out the video below to learn more about how to setup POM in Cypress –

Thanks for reading!

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

7 Principles of Software Testing

7 Principles of Software Testing with Examples

Software testing plays a crucial role in the software development life cycle as it helps ensure the quality, reliability, and performance of the final product. Software testing is not just about finding defects; it also provides valuable insights into the overall quality of the software. By conducting effective software testing, it shows how well the application behaves in different scenarios and whether it meets user expectations.

Read More »
Differences Between CI/CD and DevOps

Key Differences Between CI/CD and DevOps

Software development is far from a simple journey that involves merely executing code and launching applications. It often presents challenges, as it’s rare to get everything right from the start. Each time you implement new or frequent code changes, you inadvertently introduce potential issues that can be time-consuming to resolve. This complexity necessitates a structured approach to ensure smooth production.

Read More »