How to implement the Page object model using Cypress?

Let’s discuss, how to implement the page object model using Cypress?

To implement the page object model using Cypress we have to understand POM. Page Object Model is a design pattern where the page objects are separated from the automation test scripts. Page object model has been used. The code will be made reusable. Hence, Cypress is having the feature to enable POM. Therefore, In POM we split the page files into different page objects. The test cases are written in the test scripts.

What are the advantages of the Page object model?

• Firstly, the code will be optimized and will be less readable.
• Secondly, the methods are reusable and easy to maintain as the code grows.
• Finally, the test case has been separated from the objects. In other words, objects are called across the project.

How to Implement the Page Object Pattern in Cypress?

Step 1: Follow the blog to download cypress and its dependencies

Step 2: Create a folder PageObject inside the integration folder

Inside this PageObject, we will create page object files for modules.

Step 3: Create a login.js file inside the folder PageObject

In this login.js file, we have created a login class. After that, create a method navigate(). Hence, this navigate() method will call the website.

Step 4: Create methods for email and password

Firstly, create a method for emailid. After that, the email field will call data from another file. Hence, call the same method by using return this. This represents the login class.

Similarly, create a method for password.

Step 5: Create the last method to submit

How to access the Page Object in the spec file?

Let’s create a spec file in the integration folder named Demo.spec.js

Step 1: To access our methods in login.js, we have to import them in our spec.

Step 2: In addition, we are using Mocha. We will use describe() and it(). describe() represents a test suite and it() represents a test case.

Step 3: To access the methods from the Page object file, we have to create an instance for the login class.

Hence, to create an instance we must declare a variable

Step 4: Let us call our methods here.

Step 5: Finally, we should use assert just to verify our test case. For assertion, we will use the Chai assertion library.

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

Step 7: Run the following command to open cypress. After opening run the file Demo.spec.js

The above image shows that the test case has passed along with the assertion. Hope you all enjoyed it.

Stay tuned for more such blogs 🙂

References

https://www.toolsqa.com/cypress/page-object-pattern-in-cypress/