Cypress

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

User request: "Add Cypress tests for our e-commerce checkout process"

Actions:

1. Set up test with cy.visit("/products") and select a product
2. Intercept the cart API with cy.intercept("POST", "/api/cart") and alias it
3. Fill in shipping form using cy.get("[data-testid='email']").type(...)
4. Assert order confirmation with cy.url().should("include", "/confirmation")

Output: A reliable E2E test covering the full checkout flow with stubbed API responses.

Example 2: Set up component testing for React

User request: "Configure Cypress component testing for our React project"

Actions:

1. Install @cypress/react and configure component testing in cypress.config.ts
2. Create stories for key components using cy.mount(<Component />)
3. Test interactions with cy.get().click() and assert DOM changes
4. Add to CI pipeline alongside E2E tests

Output: Isolated component tests running in a real browser with full Cypress API.

Guidelines

• Use data-testid attributes for test selectors; never rely on CSS classes, text content, or DOM structure.
• Keep tests independent: each test should set up its own state (login, seed data).
• Use cy.intercept() to stub external APIs; do not let tests depend on third-party service availability.
• Add cy.wait("@alias") after actions that trigger API calls; do not use cy.wait(ms) for timing.
• Write tests from the user's perspective: "fill in the form, click submit, see confirmation."
• Use fixtures for large API response data; inline small responses in cy.intercept().
• Run Cypress in CI with --record for test replay, screenshots, and video on failure.