Cypress is a modern end-to-end testing framework designed specifically for web applications. It is fast, reliable, and offers a great developer experience, especially when compared to older tools like Selenium or Protractor.

Why Use Cypress?

FeatureDescription
Fast executionRuns in the same run-loop as your app (no Selenium)
Automatic waitsNo need to add wait()—Cypress handles timing
Time-travel debuggingSnapshots every step for debugging
Built-in test runnerInteractive UI runner and CLI support
Great documentationEasy to learn and adopt

1. Install Cypress

npm init -y npm install cypress --save-dev

2. Folder Structure (After Initialization)

npx cypress open

Creates:

cypress/ ├── e2e/ │ └── sample.cy.js ├── fixtures/ ├── support/ cypress.config.js

3. Example Test (cypress/e2e/login.cy.js)

describe('Login Test', () => { it('logs in with valid credentials', () => { cy.visit('https://example.com/login'); cy.get('#username').type('testuser'); cy.get('#password').type('testpass'); cy.get('#login').click(); cy.get('#logout').should('be.visible'); }); });

4. Run Tests

  • Interactive Mode (GUI):

     
    npx cypress open

  • Headless (CLI):

     
    npx cypress run

5. Cypress Features You’ll Love

  • Network mocking with cy.intercept()

  • Custom commands in support/commands.js

  • Data-driven tests using fixtures/

  • Visual UI for debugging tests

  • Cross-browser testing support (Chrome, Firefox, Edge)

Example Custom Command

// support/commands.js Cypress.Commands.add('login', (username, password) => { cy.get('#username').type(username); cy.get('#password').type(password); cy.get('#login').click(); });

Then in your test:

cy.login('testuser', 'testpass');