Cypress E2E Automation (cypress-demo)

This repository contains End-to-End (E2E) automated tests written with Cypress.

Prerequisites

• Node.js (LTS recommended)
• npm (comes with Node.js)

Verify:

node -v
npm -v

1) Setup after pulling the repo

1. Pull the latest code:

git pull

2. Install dependencies (run in the project root where package.json is):

npm install

3. (Recommended) Confirm Cypress is installed:

npx cypress verify

B) Create a new spec file before recording

Create a new test file under cypress/e2e/ (Cypress will show it in the UI).

Naming convention:

• e2e_<feature>_<scenario>.cy.js

Example:

• cypress/e2e/e2e_login_happy.cy.js

Starter template:

describe("Feature: Login", () => {
  it("logs in successfully", () => {
    cy.visit(Cypress.env("BASE_URL"));
  });
});

C) Confirm Record (Studio) is enabled

This repo enables Cypress Studio (Record) in cypress.config.js:

experimentalStudio: true;

If you do not see Studio in the UI, check your Cypress version and upgrade if needed.

3) Run Cypress UI to record/create test cases

Use Cypress UI runner:

npx cypress open

In the Cypress window:

1. Select E2E Testing
2. Choose a browser
3. Click your spec file in cypress/e2e/
4. Use Studio / Record to record steps (if available)
5. Save the recorded steps into the spec

After recording, it’s recommended to:

• Replace hard-coded values with Cypress.env(...)
• Add assertions like should('be.visible') to stabilize the flow
• Avoid fragile selectors like nth-child(...) when possible

4) Run tests headless + view report

Run all specs:

npx cypress run

Run a single spec:

npx cypress run --spec "cypress/e2e/e2e_mainflow_testcase.cy.js"

Report output (Reports folder)

This project is configured to generate a Mochawesome HTML report.

After npx cypress run, open:

• cypress/reports/html/index.html

Windows quick open:

start cypress\reports\html\index.html

Where to add reusable helpers

• Custom Cypress commands: cypress/support/commands.js
• Global setup/hooks: cypress/support/e2e.js

Existing specs

• cypress/e2e/e2e_mainflow_testcase.cy.js
• cypress/e2e/e2e_adminCancelFlow_testcase.cy.js