Cypress

Cypress is a modern end-to-end (E2E) testing framework for web applications. It’s mainly used to test how your app behaves in a real browser (Chrome, Edge, Firefox, etc.), simulating actual user interactions such as clicking buttons, filling forms, navigating pages, and making assertions about what should appear on the screen.

Unlike older tools like Selenium, Cypress runs directly inside the browser, giving it faster execution, real-time reloading, and easier debugging.

✨ Key Features

• Runs directly in the browser (fast & reliable).
• Automatically waits for elements to load (no need for manual sleeps).
• Provides time travel (you can see snapshots of test steps).
• Great developer experience with a GUI runner.

✅ Example: Testing a Login Page

Suppose you have a login page at http://localhost:3000/login.

Cypress Test (login.cy.js)

describe('Login Page', () => {
  it('should log in successfully with correct credentials', () => {
    // Visit login page
    cy.visit('http://localhost:3000/login');

    // Fill in the form
    cy.get('input[name="email"]').type('user@example.com');
    cy.get('input[name="password"]').type('password123');

    // Submit the form
    cy.get('button[type="submit"]').click();

    // Assert that user is redirected to dashboard
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, user!');
  });

  it('should show error on invalid credentials', () => {
    cy.visit('http://localhost:3000/login');

    cy.get('input[name="email"]').type('wrong@example.com');
    cy.get('input[name="password"]').type('wrongpass');
    cy.get('button[type="submit"]').click();

    cy.contains('Invalid email or password');
  });
});

describe('Login Page', () => {
  it('should log in successfully with correct credentials', () => {
    // Visit login page
    cy.visit('http://localhost:3000/login');

    // Fill in the form
    cy.get('input[name="email"]').type('user@example.com');
    cy.get('input[name="password"]').type('password123');

    // Submit the form
    cy.get('button[type="submit"]').click();

    // Assert that user is redirected to dashboard
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, user!');
  });

  it('should show error on invalid credentials', () => {
    cy.visit('http://localhost:3000/login');

    cy.get('input[name="email"]').type('wrong@example.com');
    cy.get('input[name="password"]').type('wrongpass');
    cy.get('button[type="submit"]').click();

    cy.contains('Invalid email or password');
  });
});

🏃 Running Cypress

1. Install Cypress: npm install cypress --save-dev
2. Open Cypress test runner: npx cypress open
3. Select your test (login.cy.js) and watch it run in a real browser.