一、安装 Cypress
Cypress 是一个端到端的测试自动化框架，为现代网络应用而构建和设计。它侧重于通过确保您可以在浏览器上编写、调试和运行测试，而不需要额外的配置或额外的包，来消除测试中的不一致。Cypress 作为一个独立的应用工作，可以使用断字应用或命令行工具安装在 macOS、Unix/Linux 和 Windows 操作系统上。Cypress 主要是为使用 JavaScript 编写应用的开发人员构建的，因为它可以用来测试所有在浏览器上运行的应用。在本章中，我们将涵盖以下主题:
- 在窗户上安装 Cypress
- 在苹果电脑上安装 Cypress
- 通过直接下载安装 Cypress
- 打开 Cypress 测试运行程序
- 切换 Cypress 浏览器
- 添加 npm 脚本
- 运行 Cypress 测试
本章结束时，您将了解如何在 Windows 和 Mac 操作系统上正确设置 Cypress，以及如何运行 Cypress 测试。您还将了解如何使用 npm 脚本来自动化运行测试和打开测试运行器的过程。
技术要求
Cypress 可以作为独立应用安装在您的计算机上，并且可以在至少具有 2 GB 内存并且满足以下任何操作系统要求的计算机上运行:
- macOS 10.9 及以上版本(仅限 64 位)
- Linux Ubuntu 12.04 及以上版本、Fedora 21 和 Debian 8(仅限 64 位)
- Windows 7 及以上版本
为了在这里列出的操作系统之一上使用 Cypress，必须首先安装 Node.js 8 或更高版本。Node.js 是一个 JavaScript 运行时环境，允许 JavaScript 代码在浏览器之外运行。安装 Node.js 安装 npm，允许我们从https://www.npmjs.com/安装 JavaScript 包。npm 是 Node.js 的默认包管理器，用户既可以使用它，也可以使用第三方包管理器，比如 shate。在本节中，我们将在 macOS 和 Windows 操作系统上安装 Cypress。
在窗户上安装 Cypress
在这一部分，我们将在 Windows 操作系统上安装 Cypress 和 Node.js，这样我们就可以运行我们的测试。
下载并安装 Node.js
以下步骤将引导您完成 Node.js 的安装:
- 访问 Node.js 官方网站(https://nodejs.org/en/download/)。
- 选择窗口安装程序选项。
- 下载安装包。
- 按照 Node.js 网站上的说明安装 Node.js 包。
接下来，让我们初始化项目。
初始化项目
作为最佳做法，将 Cypress 安装在项目所在的目录中；这样，我们可以确定 Cypress 测试属于该项目。在我们的例子中，我们将在Documents中创建一个文件夹，并将其称为cypress-tests，然后在安装 Cypress 时导航到该目录。我们可以在 Windows PowerShell 终端中使用以下命令来创建cypress-tests目录并导航到它:
$ cd .\Documents
$ cd mkdir cypress-tests
成功运行这些命令后，我们将启动 PowerShell，并导航到我们刚刚使用以下命令创建的目录:
$ cd .\Documents\cypress-tests
创建目录后，我们将通过在 PowerShell 中运行以下命令来初始化一个空的 JavaScript 项目:
$ npm init –y
这将创建一个默认的package.json文件，用于定义我们的项目。
在窗户上安装 Cypress
我们现在将使用以下命令在我们的项目目录中使用 npm 安装 Cypress:
$ npm install cypress --save-dev
运行此命令后，您应该能够看到 Cypress 的安装和安装进度。这种方法将 Cypress 安装为我们空项目的dev依赖项。
关于 macOS 的安装，请参考下一个主要部分。
重述-在窗户上安装 Cypress
在本节中，我们学习了如何在 Windows 操作系统上安装 Cypress。我们还学习了如何使用 PowerShell 将 Cypress 添加到项目中，以及如何初始化一个空项目。在下一节中，我们将了解如何在 macOS 上安装 Cypress。
在 MacOS 上安装 Cypress
在这一节中，我将使用一台 macOS 机器来安装 Cypress 和 Node.js。到这一节结束时，您将已经学习了如何初始化一个空的 JavaScript 项目，以及如何将 Cypress 测试框架添加到 macOS 中。我们还将深入研究如何在我们的项目中使用 npm、纱线或直接丝柏下载。
安装 Node.js
以下步骤将指导您完成 Node.js 的安装:
- 访问 Node.js 官方网站(https://nodejs.org/en/download/)。
- 选择 macOS 安装程序选项。
- 下载安装包。
- 按照 Node.js 网站上的说明安装 Node.js 包。
接下来，让我们初始化项目。
初始化项目
要安装 Cypress，我们需要导航到项目文件夹，并将其安装在我们希望 Cypress 测试所在的位置。在我们的例子中，我们将在Documents中创建一个文件夹，并将其称为cypress-tests，然后在使用我们的终端安装 Cypress 时导航到该目录。然后，我们将启动终端应用，并使用以下命令导航到我们刚刚创建的目录:
$ cd ~/Documents/cypress-tests
创建目录后，我们将通过运行以下命令来初始化一个空的 JavaScript 项目:
$ npm init –y
这将创建一个默认的package.json文件，用于定义我们的项目。
在 Mac 上安装 Cypress
要安装 Cypress，我们将使用 Node.js 附带的 npm 包管理器。为此，我们需要运行以下命令:
$ npm install cypress --save-dev
运行此命令后，您应该可以在package.json文件中看到 Cypress 的安装情况以及命令行上的安装进度。这种方法将 Cypress 安装为我们空项目的dev依赖项。
对于可用于 Windows 和 macOS 的替代包管理器，您可以使用纱。我们将在下一节看到如何使用纱线安装 Cypress。
用纱线安装 Cypress
在窗口和 macOS 中，你都可以选择一个替代包管理器。其中一个可用的选择是纱线包管理器。就像 npm 一样，您首先需要通过运行以下命令，使用 macOS Homebrew 包管理器下载纱线包管理器:
$ brew install yarn
就像 npm 一样，纱做的是管理项目依赖关系的工作，可以作为项目经理使用。与 npm 相比，Yarn 的一个优势是它能够以不需要重新下载依赖项的方式缓存下载的包，因此可以更好地利用资源。
安装完纱线后，我们可以使用它来安装软件包，就像使用 npm 一样，方法是运行以下命令:
$ yarn add cypress –dev
我们有一个最终的安装方法，这是通过直接下载。这将在下一节中介绍。
直接下载安装 Cypress
我们可以通过直接下载的方式为 Windows、Linux 或 macOS 安装 Cypress。如果您不需要安装 Cypress 附带的依赖项，或者您只是在试用 Cypress，则推荐使用这种方法。需要注意的是，虽然这是安装 Cypress 最快的方法，但该版本没有诸如将测试记录到仪表板的功能。
以下步骤将指导您通过直接下载完成 Cypress 的安装:
- 导航至 https://cypress.io 。
- 选择立即下载链接。
Cypress 会自动下载，因为它会自动检测下载的用户的操作系统。压缩文件。然后，您应该提取 zip 文件并运行 Cypress，而不安装任何其他依赖项。
重述–在苹果电脑上安装 Cypress
在本节中，我们学习了如何使用 npm 在 macOS 上安装 Cypress 测试框架，以及如何初始化一个空的 JavaScript 项目来使用 Cypress 测试。我们还学习了如何使用纱线包管理器来安装 Cypress，以及如何在不使用任何包管理器的情况下直接将 Cypress 下载到我们的项目中。在下一节中，我们将看看如何打开 Cypress 测试框架。
开柏
安装 Cypress 是编写端到端测试之旅的第一步；现在，我们需要学习如何使用 Cypress 提供的工具来使用图形用户界面和仪表板运行测试。有四种方法可以运行安装在您机器上的 Cypress 可执行文件。打开 Cypress 后，您应该会看到 Cypress 测试运行程序。无论您以哪种方式打开 Cypress，您看到的测试运行者仪表盘都是一样的。以下各节详细介绍了打开和运行 Cypress 的不同方法。
用 Npx 运行
npx 用于执行 npm 包二进制文件，并附带 5.2 版的所有 npm 版本。Npx 也可以从npmjs.com开始使用 npm 安装。要使用 npx 运行 Cypress，您需要运行以下命令:
npx cypress open
用纱线跑步
如果 Cypress 是使用纱线安装的，则可以使用以下命令打开 Cypress:
Yarn run cypress open
使用节点模块路径运行
Cypress 也可以参照节点模块上安装的根路径运行。这可以通过使用 Cypress 可执行文件所在的node_modules bin 的完整路径，或者通过使用 npm bin 快捷方式来实现，如下节所示。
使用完整路径启动 Cypress
这种启动 Cypress 的方法引用位于node_modules的已安装 Cypress 可执行文件，并通过运行该可执行文件来打开 Cypress:
$ ./node_modules/.bin/cypress open
使用快捷方式启动 Cypress
就像使用完整路径启动 Cypress 一样，该方法以相同的方式启动 Cypress，但是它使用 npm bin 变量来定位node_modules bin 文件夹的默认位置，而不是引用完整路径:
$(npm bin)/cypress open
桌面应用启动
如果您将应用作为桌面应用下载，您可以通过导航到解压缩的 Cypress 文件夹的位置并单击该文件夹中的 Cypress 可执行文件来打开 Cypress。
现在，我们已经通过首选方法成功打开了 Cypress，如果我们不想使用 Cypress 附带的默认浏览器，我们将看看如何在 Cypress 中选择替代浏览器。
重述–打开 Cypress
在本节中，我们学习了如何打开 Cypress 测试框架仪表板，以及如何以不同的方式运行 Cypress 仪表板，包括使用 npx 、纱或使用 node_modules 路径运行 Cypress 仪表板。在下一节中，我们将学习如何切换在 Cypress 中运行的测试的浏览器。
切换浏览器
Cypress 在安装时附带 electronic 作为默认浏览器，但它也可以与其他兼容的包含chrome 项目的浏览器集成，火狐除外。目前，Cypress 支持火狐浏览器、Chrome 浏览器和 Edge 浏览器。启动 Cypress 时，它会自动在运行的机器上找到所有兼容的浏览器，您可以使用测试运行程序随时在任何浏览器之间切换。要从一个浏览器切换到另一个浏览器，您需要单击右上角的浏览器按钮，并从下拉链接中选择一个替代浏览器。
Cypress 测试也可以使用命令行在不同的浏览器上运行或打开，这可以通过在打开 Cypress 测试运行程序或运行 Cypress 测试时指定浏览器来实现。所有基于 Chromium 的浏览器、Edge 和 Firefox 都可以使用命令行和以下命令启动:
$ cypress run --browser {browser-name}
命令中指定的browser-name可以是 Edge、Chrome 或 Firefox。要指定 Cypress 应该启动的浏览器的路径，您可以选择使用浏览器的可执行二进制文件而不是浏览器的名称来运行浏览器名称，如下所示:
$ cypress run --browser /path/to/binary/of/browser
能够在 Cypress 中切换浏览器可以确保用户可以在不同的设备上运行他们的测试套件，并验证来自不同浏览器的输出在整个测试套件中是一致的。在 Cypress 上切换浏览器还可以确保测试的验证可以进行，并且可以在一个浏览器上执行的所有可见元素或操作都可以在另一个浏览器上执行。
让我们利用到目前为止所获得的知识，尝试使用 Cypress 进行一个实际的练习。
运动
要结合打开 Cypress 和切换浏览器的知识，请尝试以下步骤:
- 导航到我们在初始化 Cypress 时创建的文件夹。
- 运行 Cypress 启动时自动生成的所有默认测试。
- 切换测试运行器上的浏览器。
- 用不同的浏览器重新运行测试。
现在我们已经学习了如何在不同的浏览器中运行 Cypress 测试，在下一节中，我们将探讨如何使用 npm 脚本自动运行测试的过程。
重述–切换浏览器
在本节中，我们学习了 Cypress 支持的不同浏览器，以及如何使用命令行或 Cypress 仪表盘切换不同的 Cypress 浏览器。我们还进行了一个简单的练习来帮助我们理解 Cypress 浏览器切换是如何工作的，以及我们如何使用 Cypress 运行我们的测试。在下一节中，我们将考虑向我们的package.json文件中添加 npm 脚本，以自动化一些 Cypress 任务。
添加 npm 脚本
scripts是一个package.json属性，让用户能够通过 JavaScript 应用中的命令行运行命令。npm 脚本可用于将环境变量添加到应用的属性中，将应用打包到生产就绪包中，运行测试，或者自动化 JavaScript 应用中的任何其他活动。npm 脚本可以按照npmjs.com的定义使用，也可以根据用户的偏好和应用进行定制。在本节中，我们将学习如何编写 npm 脚本来运行我们的 Cypress 测试，如何打开我们的 Cypress 测试，甚至如何组合不同的 npm 脚本来获得不同的结果。
打开一个 Cypress 命令脚本
要创建一个 scripts命令来打开 Cypress，你需要写脚本名，然后添加 npm 在脚本执行时将运行的命令。在这种情况下，我们打开 Cypress 的命令将嵌入到一个名为open的脚本中。我们可以通过向package.json中的scripts对象添加以下命令来实现这一点:
"scripts": {
"open": "npx cypress open"
}
要运行open命令，只需运行npm run open命令，测试运行程序应在 Cypress 测试运行程序中选择的默认浏览器上打开。
重述–添加 npm 脚本
在本节中，我们学习了什么是 npm 脚本，以及如何将它们添加到package.json文件中。我们还学习了如何运行添加到package.json文件中的 npm 脚本，以在项目中执行和自动化任务。接下来，我们将学习如何在 Cypress 进行测试。
运行 Cypress 测试
在这一节中，我们将重点介绍如何在浏览器上运行 Cypress 测试。为此，我们将编写测试脚本，这些脚本可以像打开 Cypress 脚本一样运行测试:
"scripts": {
"test:chrome": "cypress run –browser chrome",
"test:firefox": "cypress run –browser firefox"
}
根据用户在其命令行终端上运行的命令，上述脚本将用于在 Chrome 浏览器或火狐浏览器中运行测试。要执行测试，您可以运行npm run test:chrome在 Chrome 中运行测试，或者运行npm run test:firefox在 Firefox 中执行测试。命令的第一部分指示 Cypress 以无头模式运行测试，而第二部分指示 Cypress 在哪个浏览器中运行测试。运行 Cypress 测试不仅限于 Chrome 和 Firefox，还可以扩展到 Cypress 支持的任何浏览器，可以根据需要自定义运行脚本的名称。
使用脚本组合 Cypress 命令
package.json中的scripts对象使您可以灵活地组合命令来创建高级命令，这些命令可以执行不同的功能，比如将环境变量传递给正在运行的测试，或者甚至指示 Cypress 根据已经通过的变量来运行不同的测试。组合 Cypress 命令可以确保我们编写简短的可重用语句，然后我们可以使用这些语句构建一个在运行时执行多个功能的命令。在下面的例子中，根据我们选择运行的命令，我们将使用scripts对象编写一个命令来打开 Cypress，设置端口，设置环境，并将浏览器设置为 Chrome 或 Firefox:
"scripts": {
"test": "cypress run",
"test:dev": "npm test --env=dev",
"test:uat": "npm test --env=uat",
"test:dev:chrome": "npm run test:dev –browser chrome",
"test:uat:chrome": " npm run test:uat –browser chrome",
"test:dev:firefox": "npm run test:dev –browser firefox",
"test:uat:firefox": "npm run test:uat –browser firefox"
}
前面的脚本可以在两个浏览器中运行 Cypress 测试。脚本还帮助识别运行测试的环境，如–env变量所指定的。最后两个脚本结合了一系列运行 Cypress 的脚本，附加一个环境变量，并选择运行测试的浏览器，这使得package.json的脚本功能在编写要在测试套件中执行的 Cypress 命令时非常有用。要在火狐中运行测试，我们只需为 UAT 运行npm run test:uat:firefox命令或为dev环境运行test:dev:firefox命令。您也可以在 Chrome 中使用test:uat:chrome进行 UAT 测试，在dev环境测试中使用test:dev:chrome进行 Chrome 测试。
重要说明
要在不同的环境中运行测试，您需要在项目中已经设置好的不同环境中运行测试的配置。
回顾–运行 Cypress 测试
在这一节中，我们看了如何在 Cypress 执行我们的测试。我们还研究了 npm 脚本执行测试的不同方式，通过传递环境变量和更改参数，如脚本中的浏览器来运行我们的测试。我们还学习了如何组合多个 Cypress 命令来运行我们的测试，从而减少我们需要编写的代码量。
总结
在本章中，我们学习了在 Windows 和 Mac 操作系统上安装 Cypress。在这两个安装中，我们介绍了将 Cypress 作为下载的应用或通过命令行进行安装。我们还介绍了使用 Node.js (npm)附带的默认包管理器或第三方依赖关系管理器，如 that。我们学习了如何利用测试运行器来运行我们的测试，以及如何在package.json中自动化我们的脚本来帮助我们有效地运行我们的测试。为了测试我们的知识，我们还做了一个练习，练习在不同的 Cypress 浏览器上运行测试。
在下一章中，我们将深入探讨硒和 Cypress 之间的差异，以及为什么 Cypress 应该是首选。我们将在本章所获得的对 Cypress 的理解的基础上更进一步。
版权属于：月萌API www.moonapi.com，转载请注明出处
