为什么是cypress.io？

cypress.io通常与Selenium进行比较，但是它们在架构上有根本的不同。 最终，cypress是一个用于测试浏览器中发生的一切的工具。 使用它，您可以编写所有类型的测试：端到端测试，集成测试和单元测试。 也许您正在寻找一种轻松，轻松地为React应用程序（或其他任何框架）编写端到端测试的方法。 您可能和我一样，正在寻找Selenium框架的替代方案。 这个简短的示例将向您展示使用cypress创建您的第一个端到端测试有多么容易。

什么是端到端测试？

端到端测试是一种从头到尾测试整个软件产品以确保应用程序流按预期方式运行的技术。 它定义了系统依存关系，并确保所有集成件均按预期工作。

换句话说，端到端测试的目的是从最终用户的角度测试整个系统。 您可以模拟真实用户的行为，以便检查所有子系统之间的交互方式。 例如，与第三方系统，接口，数据库等的交互。

这正是位于测试金字塔顶部的测试类型。 您应该记住，在金字塔的顶端，测试变得更加复杂，缓慢并且维护成本更高。

创建测试应用程序

先决条件

您需要在本地开发计算机上安装Node 8.16.0或Node 10.16.0或更高版本。

创建React应用

使用以下命令之一创建一个React应用程序。

npx命令：

npx create-react-app cypress-with-reactjs

yarn命令：

yarn create react-app cypress-with-reactjs

npm命令：

npm init react-app cypress-with-reactjs

您无需安装或配置Webpack或Babel之类的工具。 它们是预先配置和隐藏的，因此您可以专注于代码。

在新创建的项目中，您可以运行内置命令来运行该应用程序：

yarn start

要么

npm start

在开发模式下运行应用程序。 打开http：// localhost：3000在浏览器中查看它。 如果您更改代码，页面将自动重新加载。 您将在控制台中看到构建错误和棉绒警告。

安装cypress

让我们使用以下命令之一将Cypress.io添加到我们的项目中

yarn add cypress --dev

要么

npm install cypress --save-dev

cypress

运行以下命令之一以打开cypress。 片刻之后，赛普拉斯测试运行器将启动。

yarn run cypress open

要么

npx cypress open

首次启动后，Сypress在您的项目中创建新文件夹。 您可以在那里找到许多有用的示例。 当然，您可以稍后删除不需要的文件和文件夹。 现在，我们可以关闭此弹出窗口，然后转到Cypress Runner Ui。

编写您的第一个测试

配置cypress

为了简化Сypress的发布，我们将脚本添加到package.json中

添加此脚本后，我们可以按以下方式运行Сypress：

yarn cypress:open

要么

npm run cypress:open

将项目添加到赛普拉斯后，会在该项目中创建一个cypress.json文件。 该文件用于存储您提供的任何配置值。 在我们的例子中，我们只需要一个值。

准备项目

让我们添加一些将要测试的简单逻辑。 即，用于输入的几个字段和用于显示输入的信息的表格。 我们还将添加一个react-bootstrap以使其看起来不错。

· 安装react-bootstrap：

yarn add react-bootstrap bootstrap

要么

npm i react-bootstrap bootstrap

· 从./src/App.js删除所有内容

· 将以下代码粘贴到./src/App.js中

第一次测试

创建一个新的测试文件./cypress/integration/form_spec.js来测试表单。

我们将编写我们的第一个测试。 为了帮助您正确地编写测试名称，可以使用"工作单元-场景/上下文-预期行为"模式：

describe('[unit of work]', () => { it('should [expected behaviour] when [scenario/context]', () => { });});

您可以在该存储库中找到有关如何命名测试的有用建议。 要查看实际测试，请运行react应用程序：

yarn start

打开另一个终端并运行添加到package.json的脚本：

yarn cypress:open

之后，我们将看到cypress如何启动。 在右上角，选择要测试的浏览器。 然后选择您要运行的测试。

您可以通过所谓的时间旅行看到测试结果。

cypress会自动返回到该命令解析时间的快照。 另外，由于cy.contains（）在页面上找到DOM元素，cypress还突出显示该元素并将其滚动到视图中（到页面顶部）。

cypress在一个独特的交互式运行器中运行测试，使您可以在执行命令时查看它们，同时还可以查看被测应用程序。

表格测试

我们要模拟真实用户的操作。 因此，让我们创建一个测试，在输入字段中输入名称和电子邮件

在这里，我们可以看到一些新方法：

.get（selector）—通过选择器或别名获取一个或多个DOM元素。

.should（chainers，value）-创建一个断言。 断言将自动重试，直到它们通过或超时。

.type（text）—输入DOM元素。

如您所见，我们创建了两个局部变量。 我们可以通过使用灯具来避免这种情况。 为此，我们为夹具添加一个新文件./cypress/fixtures/form.fixtures.json并添加虚拟数据：

{ "email": "max@mustermann.de", "name": "Max Mustermann"}

为了使用灯具，我们使用了另一种新方法：

.fixture（filePath）-加载位于文件中的一组固定数据。

现在我们的测试如下所示：

提交按钮测试

我们创建一个新文件./cypress/integration/submit.button_spec.js来测试提交按钮。 让我们模拟一个真实用户的行为。 为此，请输入名称和电子邮件，然后按提交按钮。 在这里，我们将看到几种新方法：

.click（）—单击DOM元素。

.and（）—结束命令链。

cypress的一项有趣功能是您可以链接方法调用。

这就是我们的结果。 柠檬容易挤。

headless cypress

使用此命令可以运行headless 测试。

cypress run

默认情况下，它将在Electron浏览器中不费吹灰之力地运行所有测试。 但是，您可以传递不同的选项。

cypress run --browser chrome

希望通过这个简短的示例，您会发现端到端测试应该不会很困难。 Сypress使过程顺畅而愉快。 当然，本文中没有提到很多功能。 但是Сypress文档很棒，您可以在其中找到许多示例和最佳实践。

在这里，您可以找到示例的源代码。

"质量绝非偶然； 这始终是明智努力的结果。" 约翰·罗斯金

(本文翻译自Stanislav Vain的文章《Getting Started With cypress.io》，参考：https://medium.com/@vain.stanislav/getting-started-with-cypress-io-e2c7068663ac)