# 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 as a script file and run:

## 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 开发体验最好（time-travel 可视化），但跨源（cross-origin）有限制、并行需付费。Playwright 更强的跨浏览器 + 跨源支持 + 原生并行。

**Q: 能测多个浏览器吗？**
A: 能。Chromium、Firefox、Edge、WebKit (Safari) 都支持。但 Chrome 调试体验最好。

**Q: 怎么和后端集成？**
A: `cy.task()` 调用 Node.js 函数（写入/清理数据库），`cy.intercept()` mock HTTP。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/4fa5c7a2-3580-11f1-9bc6-00163e2b0d79
Author: Script Depot