Cypress is a comprehensive front-end testing framework designed for the modern web, enabling end-to-end, integration, and component testing. Unlike traditional WebDriver-based solutions, Cypress executes tests directly within the browser, providing a unique interactive experience with real-time command logs, time-travel debugging, and automatic reloads. Its architecture allows for direct manipulation of the browser, network requests, and DOM, leading to more reliable and faster tests. The current stable version is 15.14.0. Cypress maintains a relatively fast release cadence, with minor versions often released every few weeks to introduce new features, bug fixes, and performance improvements, while major versions (e.g., v10, v12) introduce more significant breaking changes and architectural shifts. Key differentiators include its bundled nature (no external WebDriver), interactive test runner, built-in assertion library (Chai), and powerful mocking capabilities for network requests.
npm install cypressVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic end-to-end test verifying page title, interacting with DOM elements, asserting their state, and mocking an API request using `cy.intercept`.
Migrate your `cypress.json` and `plugins/index.js` to the new `cypress.config.js|ts` format. Refer to the official migration guide for detailed steps. Component testing now requires specific adaptors like `@cypress/react` or `@cypress/vue` configured in `cypress.config.ts`.
Upgrade your Node.js version to 16 or higher (Cypress recommends >=20). For cross-origin testing, refactor tests to use `cy.origin()` for navigating and interacting with different domains within a single test.
Replace all instances of `cy.server()` and `cy.route()` with `cy.intercept()`. `cy.intercept()` allows for more granular control over request matching, response modification, and better handling of modern fetch APIs and service workers.
Always chain Cypress commands (`.then()`, `.should()`, `.wait()`). Use `.then()` to wrap non-Cypress specific logic or interact with the results of a previous command. Avoid using `async/await` directly with Cypress commands; instead, use `cy.then(async () => { await somePromise(); })` for promises that don't involve Cypress DOM interactions.Ensure that elements are in an actionable state before interacting with them. Cypress automatically retries for actionability, but if an element remains hidden or disabled, you might need to add explicit assertions like `.should('be.visible')` or `.should('not.be.disabled')` to debug or wait for specific states, or trigger necessary UI actions.For TypeScript, add `"cypress"` to the `types` array in your `tsconfig.json` (e.g., `"types": ["node", "cypress"]`). For JavaScript, ensure your editor/IDE is configured to recognize globals from Cypress or use a JSDoc `/// <reference types="cypress" />` directive in your test files.
Investigate why the command is slow. It could be a slow network request, a complex DOM query, or an element that takes time to appear/become interactive. Increase the timeout for specific commands (e.g., `cy.get('.slow-element', { timeout: 10000 })`) or globally in `cypress.config.ts` (e.g., `defaultCommandTimeout: 10000`).Examine the Cypress test runner output or CI logs for detailed error messages. Look for failing assertions, unhandled exceptions, or configuration errors printed to the console. The exact cause is usually logged immediately before this exit code.
Ensure all Cypress commands start with `cy.` (e.g., `cy.get('.element')` instead of `get('.element')`). If you're using a result from a previous command, chain it correctly using `.then()`.