cypress

name	cypress
description	Cypress end-to-end and component testing patterns for web apps: reliable selectors, stable waits, network stubbing, auth handling, CI parallelization, and flake reduction
user-invocable	false
disable-model-invocation	true
version	1.0.0
category	toolchain
author	Claude MPM Team
license	MIT
progressive_disclosure	{"entry_point":{"summary":"Write reliable Cypress E2E and component tests with stable selectors, deterministic waits, and network control","when_to_use":"When building browser E2E suites, debugging flaky UI tests, validating critical user flows, or adding component tests to a modern frontend","quick_start":"1. Install Cypress 2. Add data-testid selectors 3. Use cy.intercept for network control 4. Avoid fixed sleeps 5. Run in CI with artifacts"},"token_estimate":{"entry":130,"full":5200}}
context_limit	900
tags	["javascript","testing","cypress","e2e","component-testing","ci","flake-reduction"]
requires_tools	[]

Cypress (E2E + Component Testing)

Overview

Cypress runs browser automation with first-class network control, time-travel debugging, and a strong local dev workflow. Use it for critical path E2E tests and for component tests when browser-level rendering matters.

Quick Start

Install and open

npm i -D cypress
npx cypress open

Minimal spec

// cypress/e2e/health.cy.ts
describe("health", () => {
  it("loads", () => {
    cy.visit("/");
    cy.contains("Hello").should("be.visible");
  });
});

Core Patterns

1) Stable selectors

Prefer data-testid (or data-cy) attributes for selectors. Avoid brittle CSS chains and text-only selectors for critical interactions.

<button data-testid="save-user">Save</button>

cy.get('[data-testid="save-user"]').click();

2) Deterministic waiting (avoid fixed sleeps)

Wait on app-visible conditions or network aliases rather than cy.wait(1000).

cy.intercept("GET", "/api/users/*").as("getUser");
cy.visit("/users/1");
cy.wait("@getUser");
cy.get().();