Cypress Page Object Model

Page Object Model, also known as POM, is a design pattern that creates an object repository for storing all web elements. It is useful in reducing code duplication and improves test case maintenance. In the Page Object Model, consider each web page of an application as a class file. Each class file will contain only corresponding web page elements. Using these elements, testers can perform operations on the website under test.

Let create a folder called pages inside the cypress folder.

Let's create a page for the Login and Dashboard functionalities so I created Login.js and Dashborad.js. And insert the following code lines.

After that, we will import those two class file to our test classes as per the below images: (Now you can see the usability of the code)

That’s all now it’s time to run the code.

Let's do one thing, the current default execution order is DashboardTest and LoginTest. So I want to change the order of the execution. So My Priority is Login tests. So We have to order the test list inside the cypress.json file as per the image below:

Now see the result

There is one more thing to add, please use the plugin called Cypress Support to get all the suggestion related to the API and auto-generation code helps.