Implementing Page Object Model with Cypress

In this blog, let us see and get an overview on how to implement Page Object Model with Cypress.

What is a Page Object Model?

Page Object Model is a design pattern where the page objects are separated from the automation test cases scripts. There is an additional layer called the Page Object layer. The code added in this page object file will be made reusable for writing test cases. In Page Object Model, we split the page files into different page objects and the test cases are written inside the test script

Page Object Model structure

Advantages of implementing Page Object Model

• Easy maintenance
• Code Reusability
• Readability and reliability of scripts
• Test cases separated from objects i.e. objects are called across project

Implementing Page Object Model in Cypress

Step-1: Download Cypress and its dependencies

Prerequisites for installing cypress are node.js and npm(node package manager)

Steps for installation:

1. npm -i init // This will create a package. json file
2. npm install cypress –save-dev // This will fetch the latest version of cypress that can be downloaded
3. node_modules/.bin/cypress open // This will open cypress runner

Step-2: Create a folder Page Object inside the integration folder

Inside the page-object folder create a page-object file for the test modules

Page Object Model framework structure

Step-3: Create ui-page.ts inside the page-object folder

In this ui-page.ts file we have created UIPage class. Inside the class enterDetails() method is created which will add details in the text box.

Page Object File

Now, export the class at the bottom so that we can use it across as shown in line 17 of Page object file image.

Step-4: Declare a method cssType(locator, text) inside index.d.ts file which is inside the support folder

Create an interface named Chainable and declare method cssType along with the return type so that it can be defined inside commands.ts file

index.d.ts file

Step-5: Create common method cssType(locator, text) inside the commands.ts file of support folder

Create method cssType(locator, text inside the commands.ts folder) as shown in the image below to store common resuable methods irrespective of the application which can be reused across page objects

commands.ts file

Step-5: Access Page Object inside the spec file

Create a ui.cy.ts file inside the e2e folder and import the uiPage object as shown in line

As we are using mocha, to create a test suite using describe() and add beforeEach method inside it as shown in image below.

test spec file

Create a test case using it() block created in the image above and call the method enterDetails() using the object uiPage as shown in line 13 of the image.

Step-6: Execute the test case

Run the command by opening the cypress runner as ‘npx cypress run’ and open the test runner.

opening cypress test runner via cmd

Open the test file to execute and view the execution in cypress runner

cypress execution

The above image in green shows the test case has passed.

So this is an overview on how the Page Object Model can be implemented in Cypress.