Installing and Setting Up Cypress Locally

Cypress is a modern, open-source end-to-end testing framework that makes it easy to write, run, and debug tests for web applications. Unlike traditional testing tools, Cypress runs directly in the browser, offering a developer-friendly interface with real-time reloading, debugging, and time-travel capabilities. If you're just starting out, this guide will walk you through installing and setting up Cypress locally for your first test project.

Why Use Cypress?

Cypress is widely appreciated for:

Real-time interactive testing

Automatic waiting and retries

Easy debugging with readable error messages

Rich developer tools and dashboard integration

Whether you're testing a simple static site or a complex React, Angular, or Vue app, Cypress can simplify your testing process.

Prerequisites

Before installing Cypress, ensure the following are set up on your machine:

Node.js and npm: Cypress requires Node.js (version 14 or later) and npm. You can download it from https://nodejs.org.

Code Editor: Use any code editor like Visual Studio Code.

A Web Application: Either use an existing app or create a sample project to test.

Step 1: Initialize a New Project

If you don’t already have a project folder, create one:

bash

mkdir cypress-demo

cd cypress-demo

npm init -y

This command initializes a new Node.js project and creates a package.json file, which will be used to manage dependencies like Cypress.

Step 2: Install Cypress

Now install Cypress using npm:

bash

npm install cypress --save-dev

This installs Cypress as a development dependency and adds it to your project’s node_modules folder.

Step 3: Open Cypress for the First Time

Once installation is complete, you can open Cypress with:

bash

npx cypress open

This launches the Cypress Test Runner for the first time and automatically creates the following structure:

bash

/cypress

  /fixtures

  /integration

  /plugins

  /support

cypress.json (config file for Cypress v9 or below)

In newer Cypress versions (v10+), the folder structure may differ slightly, with a focus on e2e and component testing.

Step 4: Run Example Tests

Cypress comes with example tests located in the cypress/e2e (or integration) folder. You can run them by clicking on any test file inside the Cypress Test Runner window. Cypress will open a browser window and begin executing the selected test, showing step-by-step actions, results, and any failures in a user-friendly interface.

Step 5: Writing Your First Test

Create a new test file inside cypress/e2e (for Cypress 10+) or integration (for older versions):

javascript

Copy

Edit

// cypress/e2e/sample_test.js

describe('My First Test', () => {

  it('Visits the example page', () => {

    cy.visit('https://example.cypress.io');

    cy.contains('type').click();

    cy.url().should('include', '/commands/actions');

    cy.get('.action-email').type('test@example.com').should('have.value', 'test@example.com');

  });

});

This test visits a sample page, clicks on a link, checks the URL, and types into an input field — all with simple and readable commands.

Step 6: Customize Configuration

Cypress allows configuration through cypress.config.js (in v10+) or cypress.json (in v9 and below). You can set values like base URL, viewport size, timeouts, etc.

Example:

javascript

// cypress.config.js

module.exports = {

  e2e: {

    baseUrl: 'http://localhost:3000',

  },

};

This sets a base URL for all your tests, so you can use cy.visit('/') instead of typing the full URL each time.

Conclusion

Installing and setting up Cypress locally is straightforward and beginner-friendly. With just a few commands, you can start writing powerful end-to-end tests for your web application. Cypress’s intuitive design, interactive interface, and real-time reloading make it an excellent choice for modern testing workflows. Once you're comfortable with the basics, explore advanced features like custom commands, fixtures, and parallel test execution to further optimize your testing process.

Learn Cypress Training
Read More: Introduction to Cypress: What and Why

Visit IHUB Talent Training Institute in Hyderabad
Get Direction