📌 项目地址：cypress-io/cypress | ⭐ 49,869 颗星 | 🔧 TypeScript | 📜 未标注
项目简介：让浏览器测试回归简单
Cypress 是一个面向浏览器的端到端测试框架，官方描述为“Fast, easy and reliable testing for anything that runs in a browser.” 它用 TypeScript 编写，在 GitHub 上收获 49,869 个星标（截至 2024 年）。与传统的 Selenium / WebDriver 不同，Cypress 直接运行在浏览器进程中，能够捕捉应用的真实行为，并提供实时重载、时间旅行调试等强大能力。
安装：一行命令即开始
根据 README，Cypress 支持 Mac、Linux 和 Windows，推荐通过 npm / yarn / pnpm 安装为开发依赖：
npm install cypress --save-dev
或者
yarn add cypress --dev
或者
pnpm add cypress --save-dev
安装完成后，就可以在项目中直接使用 npx cypress open 启动图形化界面。
实际用法：从编写测试到查看结果
Cypress 的测试文件默认放在 cypress/e2e/ 目录下，使用 Mocha 风格的 describe 和 it 组织用例。以下是一个简单的登录测试示例（来自官方文档示例，并非 README 原文，但符合一般用法）：
describe('Login Page', () => {
it('should log in with valid credentials', () => {
cy.visit('/login')
cy.get('[data-test=email]').type('user@example.com')
cy.get('[data-test=password]').type('password123')
cy.get('[data-test=submit]').click()
cy.url().should('include', '/dashboard')
cy.contains('Welcome').should('be.visible')
})
})
运行测试时，Cypress 会录制每个步骤的屏幕快照和视频，并在测试失败时自动暂停，方便排查。这些特性使得调试体验远超传统框架。
和同类工具的区别：运行在浏览器内的关键差异
Cypress 最核心的区别在于它的架构：它不是在浏览器外部驱动浏览器，而是直接注入到浏览器窗口中执行。这意味着：
- 无需 WebDriver：不需要额外安装 ChromeDriver、GeckoDriver 等，安装即用。
- 实时重载：代码变更后测试自动重新运行。
- 时间旅行：可以回到测试执行的任何一步，查看当时的 DOM 状态和网络请求。
- 自动等待：Cypress 会自动等待元素出现、命令完成，无需手动添加 sleep 或 wait，减少测试脆弱性。
相比之下，传统工具如 Selenium 只能通过 HTTP 协议远程控制浏览器，无法直接访问页面内部的执行上下文，因此无法实现上述功能。
需要注意的事项
- 许可证：Cypress 使用 MIT 协议（见 README 中的 LICENSE 链接），可以自由使用和修改。
- 浏览器支持：官方主要支持 Chrome 系和 Electron 浏览器，Firefox 和 Edge 支持在完善中。如果需要测试 Safari，当前需要借助其他工具。
- 局限性：由于运行在浏览器内，Cypress 无法同时控制多个浏览器标签页或窗口（虽然可以模拟多标签页行为），也不能与 iframe 之外的其他域交互（通过
cy.origin可以解决跨域访问）。对于需要 WebDriver 级别控制的场景（如移动端 Safari），Cypress 可能不是最佳选择。 - 社区与云服务：Cypress Cloud（原 Dashboard）提供测试结果记录、视频回放、失败重跑等功能，但需要付费或使用开源免费额度。项目 README 中提供了 Cypress Cloud 的徽章配置链接。
- 贡献指南：如果你有兴趣参与开发，请阅读项目中的 CONTRIBUTING.md，了解仓库组织、lint 规则和测试流程。
总结：适合谁用？
Cypress 尤其适合需要频繁迭代、追求稳定 E2E 测试的前端团队。它降低了编写和维护测试的门槛，让开发者能快速定位回归 bug。如果你的项目是基于现代前端框架（React、Vue、Angular）的 SPA，且测试环境以 Chrome 为主，Cypress 几乎是零学习成本的选择。需要复杂的多标签页或跨域场景时，则需评估是否满足需求。