在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

cypress-io/cypress

菜单

架构

相关源文件

本文档概述了 Cypress 的架构，解释了不同组件如何协同工作以提供端到端和组件测试功能。有关特定子系统的信息，请参阅导航中的相应维基页面。

概述

Cypress 被组织成一个包含多个相互关联的系统的单体仓库。总的来说，Cypress 由以下几部分组成：

  1. 一个协调浏览器自动化的 Node.js 服务器进程
  2. 一个基于浏览器的测试运行器，用于执行测试代码
  3. 连接服务器和浏览器的通信层
  4. 用于显示和交互测试的用户界面组件

该架构通过允许 Cypress 在浏览器内部和外部运行，实现了其独特的测试方法。

来源: package.json1-288 packages/server/package.json1-243 packages/driver/package.json1-110 cli/package.json1-183

核心组件

Cypress 的架构围绕几个核心组件构建，这些组件协同工作以提供测试功能。

来源: packages/server/lib/project-base.ts1-66 packages/server/lib/socket-base.ts1-60 packages/server/package.json1-243

服务器

服务器是核心的 Node.js 进程，它：

  1. 管理项目配置
  2. 启动和控制浏览器
  3. 提供测试运行器应用程序
  4. 处理网络拦截和代理
  5. 通过 Socket.io 与浏览器通信

服务器实现为 ServerBase 类，它与 ProjectBase 一起处理项目特定的操作。

来源: packages/server/lib/project-base.ts65-126 packages/server/lib/socket-base.ts46-79

命令执行系统

命令执行系统是 Cypress 测试机制的核心。它负责命令的排队和执行、断言的管理以及重试的处理。

来源: packages/driver/package.json1-110

Socket 通信

Cypress 使用 Socket.io 在 Node.js 服务器和浏览器之间进行通信。这使得双向通信能够：

  1. 将自动化命令发送到浏览器
  2. 从浏览器接收测试结果
  3. 协调网络拦截和模拟
  4. 在测试之间管理浏览器状态

两个专用 Socket 类处理不同的测试模式：

  • SocketE2E 用于端到端测试
  • SocketCT 用于组件测试

来源: packages/socket/package.json1-58 packages/server/lib/socket-base.ts46-168

浏览器自动化

Cypress 使用不同的协议来自动化浏览器：

  • Chrome DevTools Protocol (CDP)，用于 Chrome 和 Electron
  • WebDriver BiDi，用于 Firefox (Firefox 135+)

这使得 Cypress 能够控制浏览器行为、截屏、管理 Cookie 和模拟用户交互。

来源: cli/CHANGELOG.md94-97 packages/launcher/package.json1-51

项目配置和初始化

当 Cypress 启动时，它会经历几个步骤来初始化项目并为测试做准备。

项目初始化主要由 ProjectBase 类处理，该类：

  1. 读取和验证配置
  2. 设置测试环境
  3. 初始化测试所需的组件

来源: packages/server/lib/project-base.ts65-170

协议管理器

对于云录制和 Studio 功能，Cypress 使用协议管理器来捕获和传输测试数据。

协议管理器处理：

  1. 通过 CDP 连接到浏览器
  2. 捕获测试执行数据
  3. 将数据存储在 SQLite 数据库中
  4. 将工件上传到 Cypress Cloud

来源: packages/server/lib/cloud/protocol.ts37-59 packages/types/src/protocol.ts1-47

网络处理

Cypress 实现了复杂的网络处理，以支持网络模拟、请求拦截和代理管理等功能。

主要组成部分包括：

  • HTTPS 代理：拦截和修改 HTTP/HTTPS 流量
  • 网络模拟：实现 cy.intercept() 功能
  • 重写器：修改 HTML 和 JavaScript 内容以支持 Cypress 功能

来源: packages/https-proxy/package.json1-45 packages/proxy/package.json1-63 packages/network/package.json1-49 packages/rewriter/package.json1-24

用户界面

Cypress 提供了一个图形用户界面，用于项目选择、测试执行和结果可视化。

主要 UI 组件：

  • Launchpad：项目选择界面
  • Runner：测试执行界面
  • Reporter：测试结果显示

来源：packages/reporter/package.json1-46 packages/runner/package.json1-54

组件测试架构

Cypress 通过框架特定的适配器和开发服务器支持组件测试

组件测试架构

  1. 框架适配器为不同框架提供挂载能力
  2. 开发服务器编译和提供组件测试
  3. Cypress 测试运行器独立执行组件测试

来源：cli/package.json119-160

二进制分发

Cypress 以二进制应用程序的形式分发，捆绑了 Electron、Chrome 和其他依赖项

二进制分发系统

  1. 构建特定于平台的二进制文件（Windows、macOS、Linux）
  2. 使用 V8 快照优化性能
  3. 通过 CDN 分发二进制文件
  4. 提供一个下载适当二进制文件的 npm 包

来源：package.json7-17 cli/package.json119-132

通信流程

此图说明了测试执行期间数据在不同组件之间如何流动

来源：packages/server/lib/project-base.ts127-227 packages/server/lib/socket-base.ts130-368

目录结构

Cypress 存储库被组织成一个包含多个包的单体仓库

目录目的
cli/命令行界面和 npm 包
packages/核心包（server、driver 等）
npm/已发布的 npm 包（webpack、react 等）
tooling/构建和开发工具
system-tests/Cypress 本身的端到端测试

主要包包括

包目的
服务器协调测试的 Node.js 服务器
driver浏览器端测试执行引擎
reporter测试结果可视化
runner测试运行器界面
socketSocket.io 通信层
network网络处理实用程序
proxy用于请求拦截的 HTTP 代理

来源：package.json247-255 packages/server/package.json1-243 packages/driver/package.json1-110 packages/reporter/package.json1-46 packages/runner/package.json1-54 packages/socket/package.json1-58 packages/network/package.json1-49 packages/proxy/package.json1-63

结论

Cypress 的架构设计旨在提供一个全面的测试平台，该平台可以在浏览器内和浏览器外运行。Node.js 服务器、浏览器自动化和各种专用组件的组合，使 Cypress 能够提供传统测试框架所不具备的独特测试功能。

这个高级概述为理解 Cypress 代码库奠定了基础。有关特定子系统的更详细信息，请参阅相应的维基页面。