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

 

 

 

 

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

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

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

Now cypress is installed and ready to use.

Creating POM Framework

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

 

 

 

 

 

 

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

• Create a new file as ‘login.spec.cy.js’ under the e2e folder and code like this

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

The folder structure will look like this

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 :

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

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

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

Good to Read:-

• API automation Testing Using Cypress
• Tutorial on Cypress Test Automation Tool
• Cypress Automation Framework to Automate Application
• Cypress Data Driven Testing with Excel File