背景
在当今软件开发中，自动化测试越来越受到青睐，而 Cypress 是一个非常受欢迎的前端自动化测试框架。Cypress 提供了完整的自动化测试方案，它允许你对你的应用程序进行端到端（E2E）测试。本文将介绍如何使用 Cypress 进行 E2E 测试。
开始
首先需要安装 Cypress，可以通过 npm 安装，也可以直接在 Cypress 官网 下载安装。
完成安装后，我们可以执行以下命令：
$(npm bin)/cypress open
这将启动 Cypress Test Runner。在 Test Runner 中，你可以选择一个测试文件来执行。类似于这样：
添加 E2E 测试
接下来，我们将创建一个具有简单 E2E 测试的示例项目。我们将使用 TodoMVC 来构建我们的项目。
我们先需要安装一些必要的依赖：
npm install --save-dev cypress cypress-testing-library
在我们的项目中，我们将创建一个 todo.html 文件，然后添加一些用于管理待办事项的基本 HTML 元素。
下一步，我们将使用 Test Runner 来创建一个新的测试文件 todo_spec.js。
-- -------------------- ---- -------
------------------- -- -- -
------------- -- -
----------------------
---
-------- - --- ------ -- -- -
------------------------------- ---------------
-------------------------------------- ------ --------
---
------------- - ------ -- -- -
------------------------------- ---------------
--------------------------
------------------ ------------------------- -------------
---
----------- - ------ -- -- -
------------------------------- ---------------
---------------------------
------------------------------------------ ------ --------
---
---该测试文件将运行三个测试，分别测试添加、完成和删除待办事项。
在每个测试之前，我们使用 cy.visit() 命令打开 todo.html 文件。
然后，我们开始编写各自的测试用例。
在第一个测试中，我们将输入文本并按下 Enter 键添加新待办事项。然后，我们检查待办事项是否存在于待办事项列表中。
在第二个测试中，我们将添加另一个待办事项，并单击完成按钮以完成该项。然后，我们检查待办事项是否被标记为“已完成”。
在第三个测试中，我们将添加另一个待办事项，并单击删除按钮以删除该项。然后，我们检查待办事项是否从待办事项列表中移除。
这几个测试覆盖了我们的应用程序的主要功能，可以在应用程序出现问题时提供有用的信息。
运行测试
现在我们已经编写了我们的 E2E 测试，我们需要将它们运行起来。我们可以通过以下命令来运行测试：
npx cypress run
这将运行我们的测试文件，并将测试结果输出到控制台。我们还可以在 CLI 中传递不同的选项来自定义测试运行的行为。
如果我们想使用交互式方式运行测试，我们可以运行以下命令：
npx cypress open
这将启动 Test Runner，并在你选择测试文件后自动运行测试。
总结
在本文中，我们介绍了如何使用 Cypress 进行 E2E 测试。我们创建了一个基本的应用程序，然后编写了三个测试用例来覆盖我们的应用程序的主要功能。
Cypress 测试用例可以帮助我们发现和修复问题，并确保我们的应用程序在用户使用时正常工作。希望这篇文章可以帮助你开始使用 Cypress 进行自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485236348841e989440f561