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
shouldassertions 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
Interview questions
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. Why avoid cy.wait(1000)?
A fixed pause makes tests slow and flaky. Wait for a specific condition instead:
should, or an aliascy.wait('@alias').3. How do you stabilize the backend dependency?
Stub requests with
cy.interceptand canned responses. Then the test does not depend on the real server state.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
- What are flaky tests, why do they occur, and how do you fight them?MiddleTesting
- How does Playwright differ from Cypress, and which should you pick for a new project?MiddleTesting
- How do you write stable selectors in e2e tests?MiddleTesting
- Can accessibility checks be automated, and what are the limits?MiddleTesting
Comparisons with this technology
Related technologies
- PlaywrightA framework for end-to-end tests and browser automation: Chromium, Firefox and WebKit from one API.
- JestA testing framework for JavaScript and TypeScript: runner, assertions, mocks and coverage in one package.
- ReactA library for building interfaces from components: UI as a function of state.
- AngularA full TypeScript framework for large web apps: routing, forms, DI and tooling out of the box.
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).