Cypress Web Automation Setup Guide

Prerequisites

• Node.js: Ensure you have Node.js installed. Download Node.js here.
• Code Editor: Use an editor like Visual Studio Code (VSCode) for writing and managing your code.

---

Local Environment Setup

1. Install Node.js

Download and install Node.js from the Node.js Official Site.

Verify the installation by running the following commands:

node -v
npm -v

2. Initialize a New Project

Create a new directory for your project and initialize a Node.js project:

mkdir cypress-automation
cd cypress-automation
npm init -y

3. Install Cypress

Install Cypress as a development dependency:

npm install cypress --save-dev

4. Open Cypress for the First Time

Run the following command to open Cypress and complete the initial setup:

npx cypress open

---

Project Setup

Folder Structure

Your project should follow this folder structure:

cypress-automation/
├── cypress/
│   ├── constants/
│   ├── e2e/test.js
│   ├── fixtures/
│   └── support/
│   └── reports/
├── node_modules/
├── cypress.json
├── package.json
└── package-lock.json

Configure Cypress

Open cypress.json and add the following configuration to set up the Mochawesome reporter:

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    "reportDir": "cypress/reports",
    "overwrite": false,
    "html": false,
    "json": true
  }
}

Install Cypress Mochawesome Reporter

Install the Mochawesome reporter to generate test reports:

npm install cypress-mochawesome-reporter --save-dev

Update Scripts in package.json

Add the following test scripts in your package.json:

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

---

Running Tests

1. Open Cypress Test Runner

To run tests using the Cypress Test Runner UI, use:

npm run cypress:open

2. Run Tests in Headless Mode

To run tests in headless mode, use:

npm run cypress:run

---

CI/CD Setup Example (GitHub Actions)

Below is an example of setting up Cypress tests and generating reports using GitHub Actions:

name: Cypress Tests and Report

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  cypress-tests:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: |
          npm install
          npm install cypress --save-dev

      - name: Install Cypress binary
        run: npx cypress install

      - name: Run Cypress tests and generate report
        run: npm run cypress:run

      - name: Upload Artifacts
        if: always()
        uses: actions/upload-artifact@v2
        with:
          name: Cypress-Artifacts
          path: |
            cypress/reports/**

This setup ensures Cypress tests run automatically on each push or pull request to the main branch. The test reports are also generated and uploaded as artifacts.