Page object model is a pattern of separating page objects from automation test scripts.

This model splits each test in two files, one is page object and the other one is test case for the web page of a web application.

​

Steps to Implement Page Object Pattern :

• Open VS code(or any other editor).

• Navigate to the project folder(CypressAutomation), where you have done setup for Cypress.

• Under cypress/e2e, create a new folder as 'PageObjectPattern' .

• In folder PageObjectPattern, create two new folders as 'pages' and 'pages' and 'objects' .

​

• For folder pages :

  • Under the folder pages, create a new class file as 'LoginPage.cy.js' .

  • In this class, write functions for each web element operation and export this class.​

​

​​

• For folder objects :
  

  • Now under the folder objects, create a new cypress file as 'LoginTest.cy.js' .

  • In LoginTest, import the class 'LoginPage.cy'.

  • Create object for the class file 'LoginPage' and call all the functions.

• ​Run npx cypress open command, goto the LoginTest.cy.js file and click on it to run.

• The output would look like this :

​

​

​