Cypress is a next-generation front-end testing tool built for the modern web. Unlike Selenium, which operates outside the browser and communicates through the WebDriver protocol, Cypress runs directly inside the browser alongside the application code.

Cypress executes its tests within the same run-loop as your application. It runs a Node.js server in the background, while the tests execute inside the browser. The Node server and browser communicate using WebSockets.

Cypress commands (like cy.get, cy.click) are the building blocks of tests. They don't execute immediately; instead, they are enqueued to be run sequentially later. Behind the scenes, Cypress commands are essentially asynchronous promises.

// Commands are queued, not executed sequentially right away
cy.get('.btn').click()
// Even though it looks synchronous, Cypress orchestrates the execution

Cypress has built-in 'Auto-Waiting'. It automatically waits for elements to exist in the DOM, become visible, become actionable (not disabled, not covered), and finish animating before it executes a command like clicking or typing.

Fixtures are external files (usually JSON) that store static mock data. They are used to stub network responses, provide test data for form inputs, or mock application state, keeping your test files clean and data-driven.

// 1. Store user.json in the cypress/fixtures folder
// 2. Use it in your test:
cy.fixture('user.json').then((userData) => {
  cy.get('#username').type(userData.username);
});

// Or use it in an intercept:
cy.intercept('GET', '/api/users', { fixture: 'user.json' });

The Cypress configuration file (cypress.config.js or ts in v10+, previously cypress.json) stores global project settings. It defines parameters like baseUrl, default command timeouts, viewport dimensions, environment variables, and folder structures.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    defaultCommandTimeout: 5000,
    viewportWidth: 1280,
    viewportHeight: 720,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
})

You use the `should` assertion with the Chail-jQuery matcher `be.disabled`.

// Asserting the button is disabled
cy.get('#submit-btn').should('be.disabled');

// Asserting the button is NOT disabled
cy.get('#submit-btn').should('not.be.disabled');

Cypress handles API calls using `cy.request()` to make direct HTTP requests, and `cy.intercept()` to spy on or stub network traffic initiated by the browser application.

`cy.intercept()` is used to spy on, stub, or modify network requests and responses made by the browser. It allows you to simulate backend behavior without needing a real server.

// Intercept a GET request and return mock data from a fixture
cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');

cy.visit('/dashboard');

// Wait for the specific intercepted call to finish before asserting UI
cy.wait('@getUsers');
cy.get('.user-list').should('have.length', 5);

`cy.get()` selects elements based on CSS selectors (like ID, class, or data attributes). `cy.contains()` selects elements based on the text content visible inside them.

// Using cy.get with a CSS selector
cy.get('.btn-primary').click();

// Using cy.contains to find a button by its text content
cy.contains('Submit Order').click();

// Combining them to find text within a specific element
cy.get('.modal').contains('Confirm').click();