Cypress 是面向现代 Web 的端到端测试框架，专注于提升开发者测试体验。安装即用、无需额外配置，支持实时重载、Time Travel 调试和自动截图。GitHub 50.2k Stars，MIT 协议，前端工程师做 UI 测试的首选工具，文末附详细使用教程
🎤 引言
前端写完页面，最头疼的是什么？测！试！
手动点一遍页面还好，如果是复杂的交互逻辑，每次改完都要回归测试，那简直是噩梦。Selenium 之类的老牌框架配置又臭又长，等配好测试环境一天过去了……
Cypress 就是为了解决这个问题而生的。安装简单、API 直观、调试友好，号称"让测试变得有趣"。GitHub 50.2k Stars，MIT 协议，口碑一直不错。
⭐ 核心功能
1. 端到端测试（E2E Testing）
Cypress 最初就是为 E2E 测试设计的。你可以模拟真实用户操作：点击按钮、填写表单、验证页面内容……全流程自动化。
2. 组件测试（Component Testing）
除了整页测试，Cypress 还支持组件级别测试。React/Vue/Angular 组件可以单独抽出来测，不用启动整个应用。
3. API 测试
直接发送 HTTP 请求，验证后端接口。不需要额外工具，一套 Cypress 全搞定。
4. 实时重载（Time Travel）
这是 Cypress 的独门绝技。每次测试执行时，它会自动快照页面状态。测试失败后，你可以"时光倒流"回看每一步操作的结果，调试效率翻倍。
5. 自动截图与录像
测试失败自动截图，还能录下整个测试视频。CI/CD 集成后，出问题了直接看录像定位。
6. 内置 Mock 和 Stub
不用引入额外库，Cypress 自带 Mock 功能，随意伪造接口响应，测试边界情况方便得很。
📥 安装与使用
环境要求
- Node.js 18+
- Chrome、Edge、Firefox（支持三大浏览器）
安装
npm install cypress
# 或
yarn add cypress快速启动
npx cypress open这条命令会自动打开 Cypress 桌面应用，一步步引导你配置测试环境。
第一个测试
// cypress/e2e/spec.cy.js
describe('我的第一个测试', () => {
it('应该能打开首页', () => {
cy.visit('https://example.com')
cy.contains('Example Domain').should('be.visible')
})
it('应该能点击链接', () => {
cy.visit('https://example.com')
cy.get('a').first().click()
cy.url().should('include', 'iana')
})
})运行测试
# 打开 GUI
npx cypress open
# 命令行运行（CI/CD 常用）
npx cypress run🎯 适用场景
谁适合用 Cypress？
| 场景 | 推荐指数 | 说明 |
|---|---|---|
| 前端 E2E 测试 | ⭐⭐⭐⭐⭐ | 专为 Web 测试而生 |
| 组件单元测试 | ⭐⭐⭐⭐ | 组件级测试也很舒服 |
| API 接口测试 | ⭐⭐⭐⭐ | 内置 HTTP 请求支持 |
| CI/CD 集成 | ⭐⭐⭐⭐⭐ | 命令行支持完善 |
| 频繁回归测试 | ⭐⭐⭐⭐⭐ | 自动跑用例，出问题立即发现 |
🔍 对比与替代方案
vs Playwright
| 维度 | Cypress | Playwright |
|---|---|---|
| 浏览器支持 | Chrome/Edge/Firefox | Chrome/Edge/Firefox/Safari |
| 语言支持 | JavaScript/TypeScript | JS/TS/Python/Java/C# |
| 生态插件 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 调试体验 | ⭐⭐⭐⭐⭐（Time Travel 强） | ⭐⭐⭐⭐ |
| 安装配置 | ⭐⭐⭐⭐⭐（简单） | ⭐⭐⭐⭐ |
vs Selenium
Selenium 历史更久，但配置复杂、速度慢、调试困难。Cypress 在开发体验上全面超越。
⚠️ 注意事项
- 仅支持 Web：Cypress 只测浏览器端，后端逻辑测不了
- 同源限制： Cypress 通过 iframe 实现，某些特殊场景可能受限
- 部分浏览器不支持： Safari 基本不支持，移动端浏览器不支持
- 免费 vs 收费： 开源版本够用，Cypress Cloud（收费）提供更好的协作功能
- 学习曲线： 虽然比 Selenium 简单，但还是有自己的 API 体系
✅ 总结
优点：
- 安装配置极其简单，5 分钟跑起来
- Time Travel 调试功能是真的香
- 实时重载，改代码自动重新跑测试
- 内置截图、录像、Mock 功能
- CI/CD 集成友好
- 50.2k Stars，社区活跃
缺点：
- 只支持 Web 端测试
- Safari 完全不支持
- 部分特殊 iframe 场景受限
- 移动端测试爱莫能助
推荐指数：⭐⭐⭐⭐
如果你是前端开发者，需要做 UI 自动化测试，Cypress 绝对是首选。尤其是调试体验，用过就知道有多爽。当然，如果需要跨浏览器测试（尤其是 Safari），或者要做移动端测试，Playwright 会更合适。
官网：https://www.cypress.io | GitHub：https://github.com/cypress-io/cypress