Cypress为何在Node Server与Browser双端存在？各承担什么职责？

Cypress采用Node Server+Browser双端部署的架构，核心是为了兼顾真实Web运行环境的访问能力和操作系统级的操作权限，两边职责完全拆分没有冗余，具体分工如下：

浏览器（Browser）侧核心作用 #

• 同源注入测试运行环境：在被测Web App的文档加载最早期，Cypress就会把自身的测试逻辑、钩子函数注入到和业务代码完全同源的JS上下文里，没有跨域隔离限制，可以直接访问页面的window、document、DOM节点全量对象，甚至能直接读取前端框架挂载在全局的状态、调试变量，不需要走额外的跨进程协议转发指令。
• 执行真实用户交互模拟：所有点击、输入、滚动、路由跳转这类用户操作，都是在浏览器侧通过原生DOM API触发的，不是服务端下发的虚拟事件，可以真实触发浏览器默认行为、事件冒泡、CSS伪类状态（比如hover、focus的样式生效逻辑），和真实用户操作的表现完全一致。
• 实时采集前端运行数据：测试执行过程中的DOM快照、控制台报错、网络请求详情、页面性能指标，都是在浏览器侧第一时间抓取的，没有轮询延迟，Cypress的时间旅行调试功能，完全依赖这部分实时采集的全量数据。
• 前端层网络请求拦截：在浏览器上下文里对fetch、XMLHttpRequest做原生hook，不需要修改业务代码就能实现接口mock、请求等待、响应断言，也能模拟断网、慢网这类前端可感知的网络异常。

Node Server侧核心作用 #

• 全生命周期管控浏览器实例：负责启动、配置、管理测试所用的浏览器（包括内置Electron、本地安装的Chrome/Edge/Firefox等），注入测试初始化参数，兜底处理浏览器进程崩溃、异常退出、自动重启这类底层问题，测试过程不需要人工干预浏览器状态。
• 突破浏览器沙箱权限限制：所有浏览器沙箱不允许执行的操作，全部放在Node侧实现：包括读写本地测试用例文件、处理操作系统级别的文件上传/下载弹窗、执行系统命令（比如启动本地后端服务、连接数据库构造测试数据、清理本地缓存）、修改系统hosts做域名映射等。
• 全链路网络流量代理：Node侧会启动一个本地代理服务，覆盖范围比浏览器侧的拦截广得多——不光能代理业务接口请求，还能处理静态资源请求、跨域请求、HTTPS证书校验，不需要给浏览器装插件、不需要修改业务端CORS配置，就能实现任意域名的接口mock、请求篡改。
• 测试流程全局编排调度：负责测试用例加载、测试生命周期钩子（before/after/beforeEach/afterEach）调度、测试结果聚合统计、截图/录屏文件落盘存储、对接CI流水线等全局管控逻辑，浏览器侧只负责执行当前页面内的测试步骤，不承担全局调度职责。

这套双端设计本质是取两端的能力优势：浏览器端离被测应用最近，能拿到最真实的Web运行上下文，做最贴近用户的交互模拟；Node端拥有操作系统级权限，能搞定所有浏览器沙箱无法覆盖的底层操作。两端通过内部WebSocket做实时通信，既避免了Selenium那种重型WebDriver协议带来的速度慢、指令同步差的问题，也解决了纯前端测试工具受沙箱限制、无法覆盖文件操作、跨域、系统级场景的缺陷。

内容的提问来源于stack exchange，提问作者Genius