Cypress With Page Object Model (POM) Framework

Back to Blog
Feature image for Cypress POM framework blog

Cypress With Page Object Model (POM) Framework

Cypress is a test automation framework which is used to test web applications and API’s. It is based on JavaScript and provides features like video and screenshots after the test run.

Page object model (POM) is a design pattern where classes are represented as pages. POM reduces code duplication and makes code more reusable.

Installation of Cypress with POM

  • Install node.js on the machine.
  • Create an empty folder.
  • Open the directory and hit the command npm init -y and this will create a package.json file in the project directory.
  • To install cypress hit command npm and install cypress –save-dev and this will add node_modules & package.json files.
  • Update package.json file below

Start Cypress POM image





  • Hit command npm run cypress:open, this will open a window like this

Cypress E2E Testing image

  • Select E2E testing and it will open a window like this select browser of your choice

Image of Browser Selection

  • After selecting the browser, it will open Chrome browser like this

Image of Cypress First Spec

Now cypress is installed and ready to use.

Creating POM Framework

  • Create a config.json file and add data like this

image of POM framework creation  
 first step







  • Create a folder as ‘pages’ and add the file ‘LoginPage.js’ and code like this

image for create page & login page

  • Create a new file as ‘’ under the e2e folder and code like this

Image of login code

To run the test hit the command, npx cypress run –browser chrome –headed

The folder structure will look like this

NPX cypress image

Integration with Mochawesome Report

Cypress bundled with mocha.

To install mochawesome report, run the command below

npm install mochawesome –save-dev

Add the following to cypressconfig.js :

image of mochawesome

This will create a folder ‘result’ after execution and generate an HTML report that will show inside the ‘result’ folder like the screenshot below

image of Result

Integration with CircleCI 

  • Push code to git repo
  • Login into circleci
  • Create folder ‘circleci’ under the project directory and create file config.yml

Add the below code to the config.yml file

image of Config.yml

An error that you might face

Orb cypress-io/cypress@3 not loaded. To use Orb, the organization admin must opt-in to using third-party orbs in Organization Security settings.

To resolve this error, go to orbs settings on circle ci

Settings -> Security -> Allow uncertified orbs

The pipeline will kick off and the run will look like this

Image of Error in POM Framework

Good to Read:-

Share this post

Back to Blog