What is the Page Object Model in Cypress?

What is the Page Object Model :

Page Object Model (POM) is an object design pattern that is popularly used in test automation for a better testing experience. In this technique, a Page class is created for each web page of the application. This Page class contains web elements and methods for action to be performed on these web elements. These web elements and methods are accessed by test cases, which are written in a separate Test class file.

Benefits of Using the Page Object Pattern in Cypress:

• The Cypress Page Objects Model improves readability. It can make tests more readable and easier to understand by segregating the page logic from the test logic, making it easier for new team members to understand the test suite.

• It helps improve code efficiency. Because Cypress Page Object Model offers a higher level of abstraction, they can save time when tests are being written by developers.

• It is an elegant way to keep your test cases maintainable if some of your element selectors change in the future. You will only have to fix the selectors in that specific page object file without updating the selectors in every test file in which the element is used.

• POM can make code more maintainable and reduce duplication.All page elements are stored in that class for the related page. This makes it easy to access and update page elements as needed, especially when there are changes in the front end (or UI) of the website.Page Object Model also makes it easy to reuse code, which can save time and money when testing web applications.

Implementing the Page Object Model in Cypress :

Step 1 : Create a ‘pageobjects’ folder under the ‘cypress’ folder of the project, which will store the page classes.

Step 2 : Create a page class ‘signup.js’ under the ‘pageobjects’ folder. In ‘signup.js’, we will store the web elements and write methods to perform SignUp functionality.

Step 3 : In signup.js, create a ‘SignUpPage’ class that we will export to the test spec file using ‘export’. Inside the class, create an object named ‘elements’. ‘elements’ object contains a set of key and value pairs for locating web elements on the SignUp page.

Step 4 : Create a ‘automation testing’ folder under the ‘e2e’ folder, which will store all test cases. Now, create a test spec file ‘signup.cy.js’ under the ‘automation testing’ folder.

Step 5 : Import signup.js class to access its methods. Then create an instance of the signup.js class and call the respective methods.

Finally, we have written a test case using the page object model.

Step 6: Run the command npx cypress open to open cypress. After opening run the file signup.cy.js

Reference : https://www.qed42.com/insights/coe/quality-assurance/page-object-model-cypress