Cypress

Pronunciation: SY-pruss

Updated October 3, 20262 min read

In short

Cypress is a JavaScript framework that runs end-to-end and component tests for web apps inside the browser, with automatic waiting and an interactive runner.

What is Cypress?

Cypress was released in 2017 and quickly became popular with front-end developers. Unlike tools that control the browser from outside, Cypress runs the test code in the same browser as the application, which gives it direct access to the page, network requests and the app's own objects, and makes tests fast and easy to debug.

Commands such as cy.get(".cart").should("contain", "2 items") retry automatically until they pass or time out, so tests rarely need manual waits. The interactive runner shows the app beside a log of commands, and hovering over a step shows a snapshot of the page at that moment. cy.intercept can stub or watch network requests, and component testing mounts React, Vue, Angular or Svelte components in isolation.

Tests are written in JavaScript or TypeScript and run in Chrome-based browsers, Firefox and WebKit, locally or in CI. Cypress Cloud, a paid service, adds parallel runs, recordings and flaky-test analytics on top of the free, open-source test runner.

A common misconception is that Cypress can test anything a user can do. Running inside the browser brings limits: it doesn't control multiple browser tabs, and testing across several sites in one test needs special commands. Teams that need multiple tabs, several browser contexts or languages other than JavaScript often choose Playwright instead.

Key takeaways

Cypress is a JavaScript framework for end-to-end and component tests.
It runs tests inside the browser alongside the app.
Commands retry automatically, so manual waits are rarely needed.
The interactive runner shows snapshots for every step.
It doesn't handle multiple tabs; Playwright is a common alternative.

Example

An end-to-end test with a stubbed API (Cypress)javascript

describe("cart", () => {
  it("shows items added from the product page", () => {
    cy.intercept("GET", "/api/products/42", { fixture: "product.json" });   // stub the API

    cy.visit("/products/42");
    cy.contains("button", "Add to cart").click();
    cy.contains("button", "Add to cart").click();

    cy.get("[data-test=cart-count]").should("have.text", "2");   // retries until true
    cy.get("[data-test=cart-link]").click();
    cy.url().should("include", "/cart");
  });
});

Readers ask

Cypress or Playwright?

Both are modern and wait automatically. Cypress offers a very friendly interactive runner and runs inside the browser. Playwright supports multiple tabs and contexts, more languages and parallel runs without a paid service. Many new projects pick Playwright, while Cypress remains popular with front-end teams.

Is Cypress free?

Yes. The Cypress test runner is open source and free. Cypress Cloud, which adds recording, parallelization and analytics, is a paid service with a free tier.

What is Cypress component testing?

Mounting a single front-end component, such as a React or Vue component, in a real browser and testing it in isolation, without running the whole application.

Often compared

Cypress vs PlaywrightCypress runs end-to-end tests inside the browser with an interactive runner, while Microsoft's Playwright drives browsers from outside, in several languages.