🌲 Cypress — Modern End-to-End Test Automation

Learn Cypress end-to-end testing with JavaScript/TypeScript examples, time-travel debugging, network stubbing, custom commands and interview questions.

Cypress is a modern E2E testing framework that runs test code inside the browser, offering time-travel debugging and automatic retry-ability. With network stubbing, component testing and real-time visual feedback, it is one of QA engineers' favorite tools.

What you can learn on this page

  • 🌲 What is Cypress? Architecture and Philosophy — Think of Cypress like a film set where the director (test code) and the camera (browser) are in the SAME room at the same time — the moment the director says "cut!", they see everything and can rewind and replay it. Selenium is more like a director g
  • ⚙️ Installation — Cypress is installed via npm and can run in both GUI mode (Test Runner) and CLI mode (headless). Installation is a single package install — unlike Java, there's no separate driver download hassle (ChromeDriver, geckodriver); Cypress downloads its own browser b
  • 🖱️ Basic Commands & Selector Strategy — Every command in Cypress starts with cy and returns a Promise-like but "chainable" object. cy.visit() navigates to a page, cy.get() finds an element by CSS selector, and cy.contains() searches by visible text. These commands are WRITTEN as if synchro
  • 🧩 Actions, Forms & Drag & Drop — cy.type(), cy.click(), cy.check(), cy.uncheck(), and cy.select() are the core form actions. All of them are retry-able: they automatically wait until the element is visible, enabled (not disabled), and "actionable" (not covered by another element). I
  • 🕐 Time Travel & Retry-ability — Cypress's most beloved feature is "time travel debugging": a DOM snapshot is stored in the background after every command. Once a test finishes (or fails), you can click any past entry in the Command Log to see exactly how the app looked AT THAT MOME
  • 🌐 Network & cy.intercept() — cy.intercept() (formerly cy.route(), deprecated since v6) is Cypress's API for capturing the network layer. It can be used in three ways: "stub" the real request by replacing it with fake data, "spy" on the request without modifying it, or
  • 🌍 Real World — Imagine testing the checkout flow of an e-commerce site: add a product to the cart, apply a coupon, pay, and see the order confirmation. A real Cypress test suite usually breaks this flow apart with custom commands and the "App Actions" pattern — ins
  • 🔗 Ecosystem — Cypress keeps its core small, but it has a rich official and community plugin ecosystem around it: Cypress Cloud for cloud recording/parallelization, cypress-axe for accessibility, Testing Library for more meaningful selectors, Percy/Applitools for visual regr