Cypress is a JavaScript-based end-to-end testing framework built specifically for modern web applications. Unlike traditional testing tools that run outside the browser, Cypress executes in the same run-loop as your application, enabling automatic waiting, real-time reloading, and time-travel debugging. The Cypress platform now extends beyond the open-source App into Cypress Cloud — offering Test Replay, Flake Detection, Smart Orchestration, Cypress Accessibility, UI Coverage, and AI-powered features including Studio AI, cy.prompt(), and Cloud MCP for AI coding assistants. The framework supports E2E testing, component testing for React, Vue, Angular, and Svelte, and API testing, making it a comprehensive solution for validating modern web applications at every layer.
What This Cheat Sheet Covers
This topic spans 24 focused tables and 188 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Navigation and Query Commands
Every Cypress test starts by loading a page and then reaching into the DOM to grab the elements you care about. These are the building blocks — cy.visit() to navigate, cy.get() and cy.contains() to locate, and a family of traversal helpers (.find(), .parent(), .siblings(), .eq()) that let you walk from one element to its neighbours. What sets them apart from plain jQuery is built-in retry: a query keeps re-running until the element appears or the timeout hits, so timing flakiness rarely bites you.
| Command | Example | Description |
|---|---|---|
cy.visit('/login') | • Loads the specified URL in the test browser • accepts relative or absolute paths and waits for page load events. | |
cy.get('[data-cy="submit-btn"]') | • Queries DOM elements using CSS or jQuery selectors • automatically retries until elements appear or timeout. | |
cy.contains('button', 'Submit') | • Finds element of specific type containing text • more precise when both element type and text are provided. | |
cy.get('.form').find('input') | • Searches for descendant elements within previously queried parent • similar to jQuery's .find(). | |
cy.get('form').within(() => { cy.get('input').type('text')}) | • Scopes all subsequent commands within a parent element • useful for form contexts or component isolation. | |
cy.get('li').eq(2) | • Selects element at specific index from matched set • zero-based indexing. | |
cy.get('li').first() | Returns the first element from a matched set. | |
cy.get('li').last() | Returns the last element from a matched set. |