DR：这篇文章介绍了如何使用Cypress为web应用程序编写基于浏览器的自动化测试。本教程使用React应用程序作为示例来说明测试框架，淘客社区，但是您可以应用所学知识为任何web应用程序编写集成测试。React应用程序的源代码和相应的Cypress测试都可以在这个存储库中找到。主分支包含启动本教程所需的代码，cypress测试分支包含所有cypress测试的最终设置。"了解如何使用Cypress编写端到端测试，帮助您自动验证web应用程序。"在推特上留言测试金字塔与E2E测试的重要性应用程序的典型测试套件通常由三个层组成（根据应用程序的性质，可以有更多层）：单元测试。集成测试。端到端测试。许多工具和库帮助您编写测试，在上面列出的每一层为应用程序提供安全网。但是，当涉及到测试覆盖的冗余级别以及哪个层应该声明什么时，以下两个规则可能会有所帮助：编写不同粒度的测试。你应该得到更少的高水平测试。另外，每个层中测试的反馈周期也可能不同。单元测试提供了反馈的最低延迟，并且延迟随着金字塔的上升而增加。对于这篇文章，我们将重点关注E2E测试，特别是用户界面测试。用户界面（UI）测试或UI测试是使用系统的测试，就像真实用户在浏览器上与应用程序交互一样。他们使用脚本来模拟用户的行为，基本上就像普通用户一样与应用程序交互。Cypress是许多web自动化工具之一，可帮助您编写有效的用户界面测试。作为UI测试工具，Cypress有什么不同？大多数基于浏览器的自动化工具都是基于selenium的，它通过实现web驱动程序来工作，该驱动程序通过网络在浏览器上远程执行命令。然而，Cypress与父应用程序在同一个运行循环中运行。此外，Cypress测试只使用JavaScript编写。虽然您可以从任何其他语言编译成JavaScript，但最终测试代码是在浏览器内部执行的。这些架构上的改进使我们能够在浏览器模式和无头模式下更快地运行测试。你可以在这里阅读更多关于赛普拉斯的内部细节。当您开始编写更多的Cypress测试并使用测试套件构建管道时，您将看到使用这个库编写自动化测试的许多方面都得到了改进。写你的第一个柏树测试要查看Cypress的实际操作，您将利用React编写的现有待办应用程序。如果您没有React本身的经验，请不要担心。柏树可以像其他技术一样使用前端Vue.js版或者Angular，你将使用一个现有的React应用程序来避免在潜入Cypress之前设置太多的东西。下面，您可以看到一个屏幕截图，您将在学习Cypress时使用该应用程序。如您所见，此应用程序有一个已打开或已完成的待办事项列表。待办事项可以使用项目上的操作图标完成或删除。文本字段和按钮可用于添加新的待办事项。首先，您将首先克隆示例应用程序并安装其依赖项：git克隆https://github.com/auth0-blog/cypress-todo-example.gitcd cypress todo示例纱线安装注意：你可以很容易地用npm代替纱线。在这里更多的是一个品味的问题。安装完所有依赖项后，run yarn start在浏览器中运行应用程序，以确保其外观良好。如果在您的计算机上运行该应用程序时遇到问题，它也可以在codesandbox中使用。现在，您将引导Cypress并编写您的第一个测试。在应用程序运行时，打开另一个终端会话，并在同一文件夹中运行以下命令（cypress-todo示例）：纱线添加——dev cypress丝柏开Cypress将感觉到您是第一次运行它，并创建一个名为Cypress的文件夹，其中包含必要的文件来帮助您。它还将推出赛普拉斯测试运行程序。把它看作是运行/调试自动化规范的GUI。之后，您将创建一个名为todo的文件_规范js在cypress/integration目录中。您可能需要第三个终端（一个用于运行示例，一个用于Cypress，另一个用于创建新文件）。或者，更好的是，您可以使用像WebStorm或visualstudio这样的IDE来完成最后一个任务。注意：您应该已经看到了一个例子_规范jsf文件其中包含了示例厨房水槽应用程序的测试，其中包含了各种场景的大量文档。建议您稍后再通读该文件以供参考。在此新文件中，添加以下代码：//赛普拉斯/集成/todo_规范js描述（'Todo App'，高防云服务器，功能（）{它（'.should（）-允许添加新的todo项'，函数（）{年度访问('http://localhost：3000’）；西。吉（'input[data cy=newItemField]'）.type（'Write Test'）；西。吉（'#addBtn'）。单击（）；西。吉（'tr[data cy=todoItem]：第n个子项（1））.should（'contain'，'Write Test'）})});这个测试是不言而喻的。它只是连接到你的应用程序(年度访问('http://localhost：3000'）；），然后在input[data cy=newItemField]字段中键入"Write Test"，然后单击"addBtn"按钮，以便验证第一个tr元素是否包含"Write Test"字符串。用于与应用程序交互的cy变量是驱动测试的全局Cypress对象。它有各种各样的helper方法来访问web页面、与web元素交互以及获取DOM中的数据。要了解更多信息，您可以查看有关Cypress的优秀文档以及在向应用程序添加更多测试用例时经常引用的示例应用程序。另外，请注意，Cypress捆绑了chai断言库，您在测试中看到的匹配器被无缝地链接到Cypress helper方法，以提高可读性。使用Cypress测试运行程序当你救了托多之后_规范js文件，它将开始出现在Cypress测试运行程序中。当你点击todo_规范js在测试运行器中，将打开一个新的浏览器实例并以可视化方式运行测试。你可以观察到柏树跳过你写在todo中的每一步_规范js测试。如果一切工作正常（应该如此），您将看到类似于此屏幕的内容：左侧窗格称为命令日志，淘返利，列出测试的名称，后面依次是每个步骤及其结果。当测试运行时，您可以看到Cypress与浏览器webview右侧的应用程序交互，并且您可以看到新的todo项成功地添加到列表中。最后，您可以看到左侧的最后一步是验证列表中是否存在新项的断言。浏览器视图中一个非常有用的特性是DOM选择器，它在内部URL地址栏下面突出显示（不是来自浏览器的真正的，而是来自内部浏览器的）。当您单击此地址栏左侧的"打开选择器游乐场"图标时，它将出现。您可以在文本框中键入一个选择器，就像您已经输入了#addBtn，Cypress将为您突出显示所选项目。或者，您可以从屏幕上选择一个元素，Cypress将尝试找到您在测试中使用的最佳选择器。为Cypress建立持续集成编写和维护基于浏览器的自动化测试的全部要点是测试应用程序是否有任何中断的流，并尽早向团队提供反馈。您可以将Cypress测试套件设置为在连续集成（CI）服务器上运行，以便在每次签入时运行或作为夜间构建运行。在本节中，您将完成设置构建和任何特定CI工具所需的步骤。大多数CI构建代理都是服务器而不是工作站，因此您不能期望它们具有GUI或xwindowsystem来启动真正的浏览器UI。因此，在无头模式下运行web自动化测试是一种常见的实践。为了简单起见，您将使用xvfb这样的虚拟GUI缓冲区来虚拟地启动web浏览器，启动目标应用程序，并对其运行Cypress测试。假设您正在CI服务器上设置Docker代理以运行测试，以下是Dockerfile的规范：来自柏树/底座//在这里克隆你的代码库运行npm安装运行$（npm bin）/cypress RUN请参阅本页以在您最喜爱的CI服务器上设置Cypress。"Cypress可以很容易地集成到持续集成工具中，大数据定义，以便在每次开发迭代中验证您的web应用。"在推特上留言赛普拉斯的时间旅行和调试Cypress Test Runner工具中的另一个很酷的特性是，当您在左侧的命令日志中悬停时，您可以在右侧检查应用程序的状态。您还可以单击pin图标冻结特定步骤的运行程序，打开开发人员控制台，深入了解发生的特定web交互、使用的选择器、传递的参数和结果。"使用Cypress测试web应用程序非常棒，物联网操作系统，因为您甚至可以访问time travel等功能。"在推特上留言柏树的死后分析对于浏览器自动化测试，您最不希望看到的是误报。这样一来，一个测试用例失败是因为自动化测试的编写方式，而不是因为实际应用程序中的某些东西被破坏了。当这种情况频繁发生时，测试套件就失去了它的可信性，一个红色的构建就不是了