Cypress - 架构和环境设置

下图显示了 Cypress 架构 −

上图的来源是 https://www.tutorialspoint.com/cypress-architecturetest-automation

Selenium 等自动化工具在浏览器之外运行。但是，Cypress 的架构不同。它在浏览器内运行。Cypress 基本上基于服务器 - Node.js。

Cypress 与 Node.js 持续交互，并且相互协调工作。因此，Cypress 可用于测试应用程序的前端和后端。

因此，Cypress 能够处理 UI 上实时执行的任务，同时还可以执行浏览器之外的操作。

Cypress 和 Selenium 之间的区别

Cypress 和 Selenium 之间的基本区别如下 −

Cypress 环境设置

如需设置 Cypress 环境，请访问链接 −https://nodejs.org/en/download/。将出现的屏幕如下所示 −

应有 Windows 和 macOS 安装程序。我们必须根据本地操作系统获取软件包。

对于 64 位 Windows 配置，将出现以下弹出窗口以保存安装程序。

安装完成后，将在 Program files 中创建一个 nodejs 文件。应注意此文件的路径。然后，从"开始"输入环境变量，如下所示 −

在"系统属性"弹出窗口中，移至"高级"，单击"环境变量"。然后点击确定。

在环境变量弹出窗口中，移至系统变量部分并点击新建。

在新系统变量弹出窗口中的变量名称和变量值字段中分别输入 NODE_HOME 和 node.js 路径（前面已记下）。

设置好 node.js 文件的路径后，我们将在任何所需位置创建一个空文件夹（例如 cypressautomation）。

接下来，我们需要一个 JavaScript 编辑器来编写 Cypress 的代码。为此，我们可以从链接 https://code.visualstudio.com/ 下载 Visual Studio Code

根据本地操作系统，选择正确的软件包 −

下载可执行文件并完成所有安装步骤后，Visual Studio Code 就会启动。

从文件菜单中选择打开文件夹选项。然后，将 CypressAutomation 文件夹（我们之前创建的）添加到 Visual Studio Code。

我们需要使用以下命令从终端创建 package.json 文件 −

我们必须输入详细信息，例如包名称、描述等，如下图所示 −

npm init

完成后，将使用我们提供的信息在项目文件夹中创建 package.json 文件。

完成后，将使用我们提供的信息在项目文件夹中创建 package.json 文件。

最后，要安装 Cypress，请运行下面给出的命令 −

npm install cypress --save-dev

您将获得以下输出 −