Cypress - 架构与环境搭建

Cypress 架构概述

Cypress 拥有独特的架构，使其区别于许多其他测试工具，如 Selenium。Cypress 不在浏览器外部运行并执行远程命令，而是运行在浏览器内部，并与你的应用程序在同一个运行循环中。这带来了几个优势：

**直接 DOM 访问：**Cypress 对 DOM、window 对象以及你应用程序中的一切都拥有原生访问权限。这使得测试更快、更可靠。
**网络层控制：**Cypress 可以实时控制、模拟（stub）和测试网络流量，从而可以全面测试应用程序在各种网络条件下的行为。
**Node.js 服务进程：**Cypress 还运行一个 Node.js 服务进程。这个进程协调测试，与浏览器通信，管理网络请求，并执行需要系统访问的任务（例如，截图、录制视频、文件系统操作）。

这种双重架构（浏览器内的测试运行器 + Node.js 服务）使得 Cypress 既能执行前端任务，也能执行有限的后端任务（如为数据库填充数据或通过 cy.task() 与外部服务交互），从而提供强大且集成的测试体验。

虽然两者都是流行的自动化工具，但它们有根本性的区别：

特性	Cypress	Selenium
主要语言	JavaScript（及 TypeScript）	多种（Java, C#, Python, JavaScript, Ruby 等）
架构	在浏览器内部运行；Node.js 服务进程	WebDriver 协议；在浏览器外部运行，通过驱动程序控制浏览器
执行速度和可靠性	通常更快、更可靠，得益于直接 DOM 访问和自动等待	可能较慢；如果显式等待处理不当，容易出现不稳定性（flakiness）
社区支持	大型、活跃且不断增长的社区	非常庞大且成熟的社区
调试	出色的调试能力，包括 Chrome 开发者工具、时间旅行快照、清晰的错误消息	调试可能更复杂，依赖于特定语言的调试器
新标签页/窗口	通过 DOM 操作（`removeAttr`）处理同源；对于跨域，使用 `cy.origin()`。	原生支持多个标签页/窗口
并行执行	支持并行测试执行，结合 Cypress Cloud 进行 CI/CD 优化尤为强大。	支持并行执行，通常通过 TestNG、JUnit 或 Selenium Grid 等测试运行器配置。
设置	简单的 `npm install cypress`；依赖较少。	需要浏览器驱动、语言绑定，以及可能需要设置 Selenium Server/Grid。
内置功能	自动等待、截图、视频、网络模拟、组件测试。	核心浏览器自动化；其他功能通常需要第三方库。

搭建 Cypress 环境非常简单。主要步骤如下：

Cypress 是一个 Node.js 应用程序。你需要在系统上安装 Node.js。建议使用当前的长期支持（LTS）版本。

访问 Node.js 官方网站：nodejs.org 下载适用于你操作系统的安装程序（Windows, macOS, Linux）。
或者，考虑使用像 NVM（Node Version Manager）这样的版本管理器，它可以让你轻松地在不同 Node.js 版本之间切换。NVM 的说明可以在其 GitHub 仓库上找到。
安装完成后，打开你的终端或命令提示符，输入：node -v 和 npm -v 进行验证。这应该会显示已安装的 Node.js 和 npm（Node 包管理器）版本。

现代 Node.js 安装程序通常会将 node 和 npm 添加到你的系统 PATH 中，因此通常不需要手动配置 NODE_HOME 等环境变量。

导航到你希望创建项目的目录，并创建一个新目录：

mkdir my-cypress-project
cd my-cypress-project

初始化一个 package.json 文件。此文件用于追踪你的项目依赖项。

npm init -y

-y 标志会接受所有默认选项。你可以省略它来回答有关项目的问题。

安装 Cypress 作为开发依赖项：

npm install cypress --save-dev

此命令会下载并安装 Cypress 包，并将其添加到 package.json 的 devDependencies 中。

安装完成后，你可以打开 Cypress Test Runner：

npx cypress open

第一次运行此命令时，Cypress 会在你的项目内搭建推荐的文件夹结构（例如，cypress/fixtures、cypress/support、cypress/e2e）。它还会引导你设置端到端（E2E）或组件测试。