Skip to content

Cypress

End-to-end testing with a live, interactive test runner in the browser.

TestingJavaScript

What it is

Cypress is a next-generation front-end testing tool built for the modern web. It allows developers to write end-to-end, integration, and unit tests for web applications with fast, reliable, and easy-to-debug tests.

Cypress allows you to write tests in JavaScript using a simple, readable syntax. It provides automatic waiting for commands, real-time reloads, time-travel debugging, and screenshots or video recording of test runs.

Licence
MIT
Watch for
Runs inside the browser, which is why cross-origin and tab handling are limited

When to use it

The question documentation cannot answer for you — because it cannot recommend something else.

Reach for it when

  • You value the interactive runner — watching tests execute and stepping through them is genuinely excellent
  • Testing a single-origin application where its constraints do not bite

Look elsewhere when

  • You need multiple tabs, multiple origins or true cross-browser coverage — Playwright handles these better
  • Test suite runtime matters at scale

Installation

npm install cypress --save-dev

Getting started

The smallest useful thing you can do with it, and what each part means.

Visiting a page and checking content
describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
  })
})
Opens a webpage, clicks on a link containing the text 'type', and asserts that the URL includes '/commands/actions'.
Typing into an input field
describe('Input Test', () => {
  it('Types into an input', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email').type('hello@example.com').should('have.value', 'hello@example.com')
  })
})
Finds an input element, types a value, and asserts that the input contains the expected value.

Advanced usage

Where the library earns its place over a simpler alternative.

Intercepting network requests
cy.intercept('GET', '/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/users')
cy.wait('@getUsers')
Mocks a GET request to '/users' with a fixture and waits for the request to complete.
Custom commands
Cypress.Commands.add('login', (email, password) => {
  cy.get('#email').type(email)
  cy.get('#password').type(password)
  cy.get('button[type=submit]').click()
})

// usage in a test
cy.login('user@example.com', 'password123')
Defines a reusable custom command for logging in.
Handling file uploads
cy.get('input[type=file]').attachFile('example.json')
Uses the Cypress file upload plugin to attach a file to an input element.
Assertions with chai
cy.get('.todo-list li').should('have.length', 3).and('contain', 'Buy milk')
Performs multiple assertions on selected elements using Cypress + Chai syntax.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Timed out retrying
Ensure the element exists before interacting. Use `cy.get()` with `{ timeout: <ms> }` if needed.
Element is detached from DOM
Ensure the element is stable before asserting or interacting. Cypress automatically retries, but sometimes waiting for network or animations helps.
Failed to load resource
Check network availability, server response, or use `cy.intercept()` to mock the request.

Best practices

  • Use `.as()` and `cy.wait()` to manage network requests reliably.
  • Leverage custom commands for reusable actions to simplify tests.
  • Keep tests isolated and independent for consistent results.
  • Use fixtures for consistent test data.
  • Run Cypress in CI environments using headless mode for automated pipelines.

Alternatives

Comparable options, and the reason you would pick one over the other.

Background

Why it exists, and what it was reacting to.

Cypress was created to improve the developer experience for testing web applications. Unlike traditional Selenium-based tools, Cypress runs in the same run-loop as the application, providing faster execution, automatic waiting, and real-time reloads. It is particularly popular for testing React, Vue, Angular, and other modern frontend frameworks.