Cypress

Overview

Cypress is an end-to-end testing framework for web applications that runs tests directly in the browser for fast, reliable feedback. It provides element selection, network interception, component testing, and CI integration with parallelization and video recording.

Instructions

• When selecting elements, use data-testid or data-cy attributes with cy.get("[data-testid='submit']") instead of CSS classes or IDs for resilient selectors.
• When testing interactions, use cy.get().type(), .click(), .select(), and .check() for user actions, and chain .should() assertions for expected outcomes.
• When handling API calls, use cy.intercept() to stub external APIs with fixtures or spy on requests, and cy.wait("@alias") after actions that trigger calls instead of cy.wait(ms).
• When writing custom commands, use Cypress.Commands.add() for reusable patterns like login, database seeding, and common workflows, with TypeScript declarations for IntelliSense.
• When testing components, use cy.mount() with framework-specific mounting libraries (@cypress/react, @cypress/vue) to test components in isolation.
• When configuring CI, use cypress run --record --key for Cypress Cloud integration with --parallel to split tests across machines, and --browser to specify the browser.
• When setting up the project, configure cypress.config.ts with baseUrl, viewport dimensions, timeouts, and environment variables.

Examples

Example 1: Write E2E tests for a checkout flow