Cypress 简明教程

Cypress - Architecture and Environment Setup

Cypress 架构如下图所示 −

Selenium 等自动化工具通过在浏览器外部运行来工作。然而，Cypress 具有不同的架构。它在浏览器内部运行。Cypress 基本上基于服务器。Node.js。

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

如此，Cypress 既能够处理在 UI 上进行的实时任务，同时还能够执行浏览器外部的动作。

Cypress 与 Selenium 之间的基本区别如下所列 −

Cypress

Selenium

它基于 Javascript。

它基于 Java、C#、Python 和 JavaScript。

它具有较小的社区支持

它具有强大的社区支持。

它包括一个内置的视频捕捉功能。

没有内置的视频捕捉功能。

没有可以处理标签页/子窗口的 API。

有 API 可用于处理标签页/子窗口。

不能执行并行执行。

可以执行并行执行。

只需要安装 npm。

需要将补充的 jar、库等作为项目依赖项添加。

有关 Cypress 环境设置，请访问链接-@ {s12}。将出现的屏幕如下所示 -

将同时提供 Windows 和 macOS 安装程序。我们必须根据本地操作系统获取软件包。

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

安装完成后，程序文件中将创建一个 nodejs 文件。记下该文件的路径。然后，如下所示从“开始”处输入环境变量 −

在“系统属性”弹出窗口中，转到“高级”，单击“环境变量”。然后单击确定。

在“环境变量”弹出窗口中，转到“系统变量”部分并单击“新建”。

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

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

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

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

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

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

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

我们必须输入包名称、描述等详细信息，如下面给出的图像中所示 −

npm init

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

最终，要安装 Cypress，运行下面给出的命令 -

npm install cypress --save-dev

你将获得以下输出 -