Cypress 简明教程
Cypress - Architecture and Environment Setup
Cypress 架构如下图所示 −
Cypress architecture is illustrated in the below diagram −
The source of the above diagram is https://www.tutorialspoint.com/cypress-architecturetest-automation
Selenium 等自动化工具通过在浏览器外部运行来工作。然而，Cypress 具有不同的架构。它在浏览器内部运行。Cypress 基本上基于服务器。Node.js。
Automation tools like Selenium work by running outside the browser. However, the Cypress has a different architecture. It runs within the browser. Cypress is basically based on the server - Node.js.
Cypress 与 Node.js 有着持续的交互，它们相互协调地工作。因此，Cypress 可用于测试应用程序的前端和后端。
There is a continued interaction of Cypress with the Node.js and they work in coordination with each other. As a result, Cypress can be utilised for testing both the front and backend of the application.
如此，Cypress 既能够处理在 UI 上进行的实时任务，同时还能够执行浏览器外部的动作。
Cypress is thus, capable of handling the tasks performed at a real time on the UI and simultaneously can also perform the actions outside of the browser.
Difference between Cypress and Selenium
Cypress 与 Selenium 之间的基本区别如下所列 −
The basic differences between Cypress and Selenium are listed below −
Cypress |
Selenium |
It is based on Javascript. |
It is based on Java, C#, Python and JavaScript. |
It has small community support |
It has big community support. |
It includes an in-built video capture feature. |
There is no in-built video capture feature. |
No APIs are available to handle the tabs/child windows. |
APIs available to handle tabs/child windows. |
No parallel execution can be performed. |
Parallel execution can be performed. |
Only installation of npm needed. |
Supplemental Jars, libraries, and so on are required to be added as project dependencies. |
Cypress Environment Setup
有关 Cypress 环境设置，请访问链接-@ {s12}。将出现的屏幕如下所示 -
For Cypress environment setup, visit the link −https://nodejs.org/en/download/. The screen that will appear is given below −
将同时提供 Windows 和 macOS 安装程序。我们必须根据本地操作系统获取软件包。
There shall be both Windows and macOS Installer. We have to get the package as per the local operating system.
对于 64 位 Windows 配置，会弹出以下窗口提示保存安装程序。
For a 64- bit Windows configuration, the following pop-up comes up to save the installer.
安装完成后，程序文件中将创建一个 nodejs 文件。记下该文件的路径。然后，如下所示从“开始”处输入环境变量 −
Once the installation is done, a nodejs file gets created in the Program files. The path of this file should be noted. Then, enter environment variables from the Start, as shown below −
在“系统属性”弹出窗口中，转到“高级”，单击“环境变量”。然后单击确定。
In the System Properties pop-up, move to Advanced, click on Environment Variables. Then click on OK.
在“环境变量”弹出窗口中，转到“系统变量”部分并单击“新建”。
In the Environment Variables pop-up, move to the System variables section and click on New.
在“新建系统变量”弹出窗口中，分别在“变量名”和“变量值”字段中输入 NODE_HOME 和 node.js 路径（前面已记录）。
Enter NODE_HOME and the node.js path (noted earlier) in the Variable name and the Variable value fields respectively in the New System Variable pop-up.
设置 node.js 文件的路径后，我们将在任何所需位置创建一个空文件夹（比如 cypressautomation）。
Once the path of the node.js file is set, we shall create an empty folder (say cypressautomation) in any desired location.
接下来，我们需要一个 JavaScript 编辑器来编写 Cypress 的代码。为此，我们可以从链接 [role="bare"] [role="bare"]https://code.visualstudio.com/ 下载 Visual Studio Code。
Next, we need to have a JavaScript editor to write the code for Cypress. For this, we can download Visual Studio Code from the link [role="bare"]https://code.visualstudio.com/
根据本地操作系统选择正确的包 −
As per the local operating system, choose the correct package −
下载可执行文件并完成所有安装步骤后，Visual Studio Code 将启动。
Once the executable file is downloaded, and all the installation steps are completed, the Visual Studio Code gets launched.
从“文件”菜单中选择“打开文件夹”选项。然后，将 CypressAutomation 文件夹（我们之前创建的）添加到 Visual Studio Code。
Select the option Open Folder from the File menu. Then, add the CypressAutomation folder (that we have created before) to the Visual Studio Code.
我们需要使用以下命令从终端创建 package.json 文件 −
We need to create the package.json file with the below command from terminal −
我们必须输入包名称、描述等详细信息，如下面给出的图像中所示 −
We have to enter details like the package name, description, and so on, as mentioned in the image given below −
npm init完成后，package.json 文件将使用我们提供的信息在项目文件夹中创建。
Once done, the package.json file gets created within the project folder with the information we have provided.
完成后，package.json 文件将使用我们提供的信息在项目文件夹中创建。
Once done, the package.json file gets created within the project folder with the information we have provided.
最终，要安装 Cypress，运行下面给出的命令 -
Finally, to install Cypress run the command given below −
npm install cypress --save-dev你将获得以下输出 -
You will get the following output −
