Page Object Model: Cypress

What is Page Object Model?

The Page Object Model (POM) is a widely used design pattern in automation testing, particularly for web applications. It promotes efficient and maintainable test code by separating the page elements and the logic for interacting with them from the actual test cases.

How to Implement in Cypress?

Instead of the detailed explanation, you’d prefer a brief and practical guide to implementing the Page Object Model, right? Here’s what I can do

Step 1- Install Pre-requisites

1. Node Js

Make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download and install them from the official Node.js website.

2. Visual Studio Code

Make sure you have visual studio code installed on your system. You can download and install them from the official website.

Step 2- Install Cypress

First, you need to create a folder at any location in your device. Open the created folder in vs code, open terminal and run the following commands to initialize a new cypress project:

npm init -y
npm install cypress –save-dev

Step 3- Initialize Cypress

Set up Cypress by running the following command:

npx cypress open

A cypress tab will appear follow the steps as shown in images below:

figure: 3.1

figure: 3.2

figure: 3.3

figure: 3.4

figure: 3.5

figure: 3.6

figure: 3.7

After following all above steps you will find few files or folders inside e2e folder please delete all of them because in next step we have to implement our own tests.

Step 4- Implementation

1-create a folder named PageObjects inside cypress folder after that create a login_page.js file in that folder and paste the following code:

This JavaScript code defines a Cypress test class named Login for handling login functionality. It includes data variables representing HTML elements, such as username input and login button, along with methods for setting username/password, clicking the login button, and verifying successful login by checking the URL. The class is designed to be exported and used in Cypress test scripts, providing a modular approach for testing login actions in web applications

2-create a login.json file inside the fixture folder and paste the following test data in it:

An open source website named OrangeHRM is used in this tutorial. In login.json file the user_name and password contains the credentials for login test case.

3-create the cypress test file named login.cy.js inside the e2e folder and paste following code in it:

This Cypress test script focuses on the login functionality of a web application using the Login class from the “login_page” module. The script begins by visiting the login page of the specified URL. It then utilizes Cypress fixtures to load data from a “login.json” file located in the fixtures folder. The test case involves creating an instance of the Login class, setting the username and password using the data from the JSON file, clicking the login button, and finally verifying the successful login by checking the URL. This approach promotes test data separation and reusability, as the login details are stored in an external JSON file, enhancing maintainability and flexibility in test scenarios.

Step 5- Configure Mochawesome Reporter

Now let’s make a little pretty reporter for cypress using mochawesome reporter feature using the below steps:

— Open the terminal & run the command below to install mochawesome reporter:

npm i --save-dev cypress-mochawesome-reporter

—To update the cypress.config.js file, please remove the existing code and replace it with the following snippet. Save the changes after pasting the code:

this code is same as creating the project except the line number 4 and 8 for mocha reporter configuration.

— Now open the e2e.js file inside the support folder and add the following line in it:

import 'cypress-mochawesome-reporter/register'

To verify the implementation, ensure that your directory structure adheres to the following:

Step -6 Run & Finish

To execute the tests, run the following command in your terminal:

npx cypress run

You can expect the following output in the terminal after running the Cypress command:

you’ll notice the creation of a “reports” folder. Inside this folder, you will find an “index.html” file. To view the test reports, simply double-click on the “index.html” file. This action will open the report directly in your web browser

Conclusion:

Selecting the appropriate design pattern for automation testing is crucial, and the Page Object Model (POM) stands out for its effectiveness in maintaining test suites. Cypress offers a notable advantage with its built-in support for data through fixtures, enabling seamless implementation of data-driven testing. When it comes to reporting, Mochawesome is a recommended choice for Cypress, as it provides detailed HTML reports.

Code for this project is accessible on Git.

Recommendation

For those new to automation testing, I recommend starting with Cypress and adopting the Page Object Model. This approach is easy to learn and leverage, and the unique strength of Cypress lies in its ability to run directly within the browser, enhancing the testing experience. With Cypress and the Page Object Model, testers can efficiently manage their test suites while benefiting from the simplicity and power of these tools.

In last, I would like to say!
Thank you for your valuable time. Please send me notes on this article if you have any questions regarding the topic.

For better communication, let’s connect via LinkedIn.