Testing

Cypress

A tool for E2E and component tests that runs inside the browser with an interactive runner.

What it is

Cypress was created in 2015 and quickly grew popular thanks to a friendly interface. Tests run inside the browser in the same loop as the app, so they have direct access to the DOM, network and events.

The interactive runner shows each command step, snapshots before and after actions and lets you time travel back. Commands are chainable and have automatic retries and waits.

E2E and component tests are supported for React, Vue and Angular. The core runner is free and open source, while the paid Cypress Cloud adds recording, parallelization and analytics. Limitations: historically weaker multi-tab support and WebKit compared with Playwright.

Use it when

  • The team values interactive test authoring and visual debugging.
  • E2E and component tests for a React, Vue or Angular frontend.
  • The project is already on Cypress.

Avoid it when

  • You need multi-tab tests or Safari / WebKit: Playwright fits better.
  • Unit tests of individual functions.

Key concepts

Command chaining
cy.get().click().should() runs as a queue with automatic retries.
Retry-ability
should assertions retry until they pass or time out.
cy.intercept
Intercepting and stubbing network requests.
Time travel
Viewing DOM snapshots at every step in the runner.
Component testing
Mounting an individual component in a real browser.

Example

An E2E login test with a stubbed network request.

Interview questions

  1. 1. How does Cypress differ from Selenium?

    Cypress runs inside the browser with auto-waiting and a friendly runner, so tests are more stable and faster to write. Selenium drives the browser from outside via WebDriver and supports more languages and browsers.

  2. 2. Why avoid cy.wait(1000)?

    A fixed pause makes tests slow and flaky. Wait for a specific condition instead: should, or an alias cy.wait('@alias').

  3. 3. How do you stabilize the backend dependency?

    Stub requests with cy.intercept and canned responses. Then the test does not depend on the real server state.

  4. 4. Which selectors should you choose?

    Dedicated attributes like data-test, not classes or DOM structure. They do not break when styles change.

Interview questions from the bank

Comparisons with this technology

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).