My Cypress Test

✨ Web Automation Testing using Cypress, Javascript, and Mochawesome library for HTML Report. ✨

Preparation

What will be used on this project

Item	Source
Editor	VS Code (https://code.visualstudio.com/download)
Package Manager	NPM (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
UI Test Tools	Cypress (https://docs.cypress.io/guides/getting-started/installing-cypress)
Test Reporter	Mochawesome (https://www.npmjs.com/package/mochawesome)
Browser	Latest version of Chrome / Mozilla Firefox / Edge

Pre-Requisite Installation

Install VS Code Editor and NPM.

To check whether you already installed NPM & Node.js

npm --version

node --version

Setting up Project

Clone

👉 Clone this Repository through Terminal or Command Prompt

Open the Project on Editor

Open this Automation Project using VS Code Editor.

Run the Automation Project

Change to Project directory on Terminal or Command Prompt

cd MyCypressTest

Install Cypress

npm install cypress --save-dev

Run Test Execution on Terminal

npx cypress run 

Video of the Test Execution available on MyCypressTest/cypress/videos/

Run Test Execution via Browser

npx cypress open

Generate Test Execution HTML Report

Install Mochawesome Reporter

npm install mocha
npm install mochawesome --save-dev
npm install mochawesome-merge --save-dev

Run Cypress with the Reporter

Note: Please wait until all test execution finished

npx cypress run --reporter mochawesome

Merge the reports into a single one

npx mochawesome-merge cypress/report/mochawesome-report/*.json > cypress/report/output.json

Convert the JSON into HTML Report

npx marge cypress/report/output.json --reportDir ./ --inline

Test Execution HTML Report available on MyCypressTest/output.html