Installing Cypress: Step-by-Step Guide

Cypress is a popular testing tool for modern web applications.
It helps you write and run end-to-end tests in the browser.

Let’s walk through the full installation process.

---

✅ Prerequisites

Before installing Cypress, you need:

1. Node.js and npm installed

   • You can download from https://nodejs.org

   • To check if it’s installed, run:

     node -v
     npm -v
     

2. A project folder (use your app or create a new one)

---

📁 Step 1: Create a Project (if needed)

If you don’t have a project yet:

mkdir my-cypress-project
cd my-cypress-project
npm init -y

This creates a new Node.js project.

---

📦 Step 2: Install Cypress

Use npm to install Cypress:

npm install cypress --save-dev

This installs Cypress as a dev dependency.

---

🔍 Step 3: Open Cypress for the First Time

To open the Cypress Test Runner:

npx cypress open

• This will open the Cypress UI.

• It will also create a cypress/ folder with example tests.

---

🧪 Step 4: Run Your First Test

1. In the Cypress window, click E2E Testing.

2. Choose a browser (like Chrome).

3. Click Start E2E Testing.

4. Select any test from the list and run it.

You’ll see the test run in real time in the browser!

---

📝 Step 5: Write Your Own Test

Create a file:
cypress/e2e/sampleTest.cy.js

Add a simple test:

describe('My First Test', () => {
  it('Visits Google', () => {
    cy.visit('https://www.google.com');
    cy.title().should('include', 'Google');
  });
});

Save and run this test from the Cypress runner.

---

🧼 Optional: Ignore Example Tests

You can delete the sample tests from:

cypress/e2e/1-getting-started/

Keep your own clean structure.

---

🛠 Bonus: Run Cypress in Headless Mode

To run tests without opening the Cypress UI:

npx cypress run

It runs in the terminal and outputs test results.

---

📌 Folder Structure Overview

cypress/
  └── e2e/            → Your test files
  └── support/        → Custom commands, hooks
cypress.config.js     → Cypress settings

---

✅ You’re Done!

Now Cypress is installed and ready to test your app. 🎉

---

💡 Tip:

• You can also install Cypress globally, but it's best to keep it project-specific.

• Use cypress.config.js to customize test settings, base URL, timeouts, etc.

---

🔗 Useful Links

• Official Cypress Docs

• Node.js Download

• Cypress GitHub

Learn Cypress Course in Hyderabad

Read More 

UI/UX Design Course

Block Chain Course

Flutter Training Course

AWS Data Engineering course