back
loading skill details...
Cypress end-to-end and component testing patterns for web apps: reliable selectors, stable waits, network stubbing, auth handling, CI parallelization, and…
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('[data-testid="user-email"]').should("not.be.empty");
3) Network control with cy.intercept
Stub responses for deterministic tests and speed. Keep a small set of “real backend” smoke tests separate.
cy.intercept("GET", "/api/users/1", {
statusCode: 200,
body: { id: "1", email: "a@example.com" },
}).as("getUser");
4) Authentication strategies
Prefer cy.session to cache login for speed and stability.
// cypress/support/commands.ts
Cypress.Commands.add("login", () => {
cy.session("user", () => {
cy.request("POST", "/api/auth/login", {
email: "test@example.com",
password: "password",
});
});
});
// e2e spec
beforeEach(() => {
cy.login();
});
Component Testing
Run component tests to validate UI behavior in isolation while keeping browser rendering.
npx cypress open --component
// cypress/component/Button.cy.tsx
import React from "react";
import Button from "../../src/Button";
describe("<Button />", () => {
it("clicks", () => {
cy.mount(<Button onClick={cy.stub().as("onClick")}>Save</Button>);
cy.contains("Save").click();
cy.get("@onClick").should("have.been.calledOnce");
});
});
CI Patterns
Artifacts (videos/screenshots)
Store artifacts for failed runs and keep videos optional to reduce storage.
// cypress.config.ts
import { defineConfig } from "cypress";
export default defineConfig({
video: false,
screenshotOnRunFailure: true,
retries: { runMode: 2, openMode: 0 },
});
Parallelization (Cypress Cloud)
Parallelize long E2E suites via Cypress Cloud when runtime dominates feedback loops.
Anti-Patterns
Use cy.wait(1000) as a synchronization mechanism.
Select elements via deep CSS paths.
Mix heavy network stubbing with “real backend” assertions in the same spec.
Depend on test order; isolate state with cy.session and per-test setup.
Troubleshooting
Symptom: flaky click or element not found
Actions:
Add a data-testid hook for the element.
Assert visibility before interaction (should("be.visible")).
Wait on network alias for the data that renders the element.
Symptom: tests fail only in CI
Actions:
Increase run-mode retries and record screenshots on failure.
Verify viewport and baseUrl config match CI environment.
Eliminate reliance on local-only seed data; create data via API calls.
Resources
Cypress docs: https://docs.cypress.io/
Best practices: https://docs.cypress.io/guides/references/best-practicesdon't have the plugin yet? install it then click "run inline in claude" again.