What Is Mocha and Chai in Cypress?

How to Use Cypress in a Web Project: Step-by-Step Guide

Testing is an essential part of modern web development. But traditional testing tools can be slow, flaky, and frustrating.

Enter Cypress — a fast, reliable, and developer-friendly tool for end-to-end (E2E) testing of web apps.

In this blog, you’ll learn what Cypress is, why it's popular, and how to set it up and use it in a real project — step by step.

---

🧰 What is Cypress?

Cypress is a JavaScript-based testing framework used for:

• End-to-end testing

• Integration testing

• UI testing

It runs directly in the browser, giving you powerful control and visibility over your tests.

---

🚀 Why Use Cypress?

✅ Real-time test execution
✅ Fast, reliable, and flake-resistant
✅ Excellent debugging tools
✅ Developer-friendly with auto-reload
✅ In-built waiting and retry-ability
✅ Great documentation

---

🛠️ Step 1: Set Up Your Project

👉 Prerequisite

Make sure you have Node.js and npm installed.

node -v
npm -v

---

📦 Step 2: Install Cypress

In your web project directory:

npm install cypress --save-dev

📁 This adds Cypress as a dev dependency.

---

🏗️ Step 3: Open Cypress

Once installed, run:

npx cypress open

This will:

• Launch the Cypress Test Runner

• Create a default /cypress folder structure

---

🗂️ Cypress Folder Structure

/cypress
  └── /e2e          → test specs
  └── /fixtures     → test data (JSON)
  └── /support      → reusable functions
/cypress.config.js  → config file

---

✍️ Step 4: Write Your First Test

Create a test file:
📄 /cypress/e2e/homepage.cy.js

describe('Homepage Test', () => {
  it('should load the homepage and check title', () => {
    cy.visit('http://localhost:3000');
    cy.title().should('include', 'My App');
  });
});

---

🔍 What’s Happening?

• describe() – groups test cases

• it() – defines a single test

• cy.visit() – opens the page

• cy.title() – gets the page title

• should() – asserts expectations

---

🎮 Step 5: Run the Test

You can run tests:

• In the Cypress Test Runner UI:
  npx cypress open

• Or in the terminal (headless mode):
  npx cypress run

---

🧪 Common Cypress Commands

Command	Purpose
cy.visit(url)	Open a web page
cy.get(selector)	Grab an element
cy.contains(text)	Find element by text
cy.click()	Click a button or link
cy.type('text')	Type into an input field
cy.should()	Assert expectations
cy.wait(ms)	Wait for a time period

---

📝 Example: Login Test

describe('Login', () => {
  it('logs in with valid credentials', () => {
    cy.visit('/login');
    cy.get('#username').type('admin');
    cy.get('#password').type('admin123');
    cy.get('form').submit();
    cy.url().should('include', '/dashboard');
  });
});

---

⚙️ Step 6: Customize Cypress Configuration

Edit cypress.config.js to set base URL:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
  },
});

Now, you can simplify tests like this:

cy.visit('/');

---

🧩 Step 7: Use Fixtures for Test Data

Fixtures let you store test data (like user info) in JSON files.

📁 Create cypress/fixtures/user.json

{
  "username": "testuser",
  "password": "123456"
}

Then use it in a test:

cy.fixture('user').then((user) => {
  cy.get('#username').type(user.username);
  cy.get('#password').type(user.password);
});

---

♻️ Step 8: Add Reusable Functions

You can store custom commands in cypress/support/commands.js

Cypress.Commands.add('login', (user, pass) => {
  cy.get('#username').type(user);
  cy.get('#password').type(pass);
  cy.get('form').submit();
});

Then call it in tests:

cy.login('admin', 'admin123');

---

🧪 Debugging with Cypress

• Hover over commands in Test Runner

• Use cy.log() to print custom messages

• Use debugger; or browser’s dev tools

---

🧪 Assertions in Cypress

Cypress uses Chai syntax for assertions.

Examples:

cy.get('h1').should('have.text', 'Welcome');
cy.get('.error').should('not.exist');
cy.url().should('include', '/dashboard');

---

🧑‍🔬 Advanced Testing Tips

• Use beforeEach() to reuse setup code

• Test edge cases (blank form, wrong inputs)

• Group tests with .only or .skip

it.only('runs only this test', () => {});
it.skip('skip this test', () => {});

---

🌍 Cypress Best Practices

✅ Use data-* selectors for stable tests
✅ Keep tests independent
✅ Avoid hard-coded waits — rely on automatic retries
✅ Clean test data after tests run
✅ Use fixtures for realistic data

---

📦 CI/CD Integration

Cypress works with CI/CD tools like:

• GitHub Actions

• GitLab CI

• CircleCI

• Jenkins

Example GitHub Actions YAML:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npx cypress run

---

🚀 Final Thoughts

Cypress makes front-end testing:

• Easy to write

• Fast to run

• Fun to debug

Whether you’re testing a React app, login page, or form submission — Cypress offers an end-to-end experience that keeps developers productive and confident.

Learn Cypress Course in Hyderabad

Read More

What Is Mocha and Chai in Cypress? 

Understanding Cypress Commands – A Beginner’s Guide

Folder Structure in a Cypress Project

How to Test Forms Using Cypress