# Cypress — Fast, Easy & Reliable Browser Testing

> Cypress is a next-generation front-end testing tool built for the modern web. Runs in the same run-loop as your app for superior debuggability, with time-travel, automatic waiting, real-time reloads, and screenshots on failure.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i -D cypress
npx cypress open   # GUI
npx cypress run    # Headless
```

```ts
// cypress/e2e/login.cy.ts
describe("Login", () => {
  it("logs in with valid credentials", () => {
    cy.visit("/login");
    cy.get("[data-test=email]").type("user@example.com");
    cy.get("[data-test=password]").type("secret123");
    cy.get("[data-test=submit]").click();
    cy.url().should("include", "/dashboard");
    cy.contains("Welcome back").should("be.visible");
  });
});
```

## Intro

Cypress is a fast, easy, and reliable testing tool for anything that runs in a browser. Unlike Selenium, Cypress runs inside the same process as your app, giving it unparalleled debugging capabilities: time-travel, real-time reloads, and video replay.

- **Repo**: https://github.com/cypress-io/cypress
- **Stars**: 49K+
- **Language**: TypeScript
- **License**: MIT

## What Cypress Does

- **E2E tests** — full browser automation
- **Component tests** — mount React/Vue/Angular/Svelte components in isolation
- **Time-travel** — hover test steps to see DOM at that moment
- **Auto wait** — no manual waits, retries assertions automatically
- **Network stubbing** — `cy.intercept()` for mocking APIs
- **Video + screenshots** — auto-capture on failure
- **Real browser** — Chrome, Edge, Electron, Firefox, WebKit
- **CI/CD** — GitHub Actions, CircleCI, Jenkins integrations

## Architecture

Test code runs in the browser alongside the app (not over WebDriver). Cypress app = Electron shell with iframe hosting your site. Commands are chainable and automatically retryable. Dashboard service (paid) aggregates runs across CI.

## Self-Hosting

Open-source CLI is free and self-hostable. Cypress Cloud (recording, analytics, parallelization) is paid.

```bash
# CI example (GitHub Actions)
- uses: cypress-io/github-action@v6
  with:
    build: npm run build
    start: npm start
    wait-on: "http://localhost:3000"
```

## Key Features

- Time-travel debugger
- Automatic waiting/retrying
- Real browser (not headless-only)
- Component testing
- Network stubbing (`cy.intercept`)
- Video recording
- Parallel test execution (Cloud)
- TypeScript-first

## Comparison

| Tool | Approach | Cross-browser | Parallel | Debugging |
|---|---|---|---|---|
| Cypress | In-browser | Chromium + Firefox + WebKit | Cloud (paid) | Excellent |
| Playwright | WebDriver | Chromium + Firefox + WebKit | Built-in | Good |
| Selenium | WebDriver | Everything | Grid | OK |
| WebdriverIO | WebDriver | Everything | Built-in | Good |

## FAQ

**Q: Cypress vs Playwright？**
A: Cypress has the best DX (time-travel visualization), but it has cross-origin restrictions and parallelization is paid. Playwright has stronger cross-browser + cross-origin support and native parallelization.

**Q: Can it test multiple browsers?**
A: Yes. Chromium, Firefox, Edge, and WebKit (Safari) are all supported. Chrome provides the best debugging experience.

**Q: How do I integrate with the backend?**
A: Use `cy.task()` to invoke Node.js functions (seed/clean the database), and `cy.intercept()` to mock HTTP.

## Sources & Credits

- Docs: https://docs.cypress.io
- GitHub: https://github.com/cypress-io/cypress
- License: MIT

---
Source: https://tokrepo.com/en/workflows/cypress-fast-easy-reliable-browser-testing-4fa5c7a2
Author: Script Depot