Cypress 是一个现代化的 JavaScript 端到端测试框架，对于 web 应用的自动化测试而言，Cypress 非常好用且具有高效性和易用性。
在本篇文章中，我们将详细介绍 Cypress 的相关知识和使用方法，帮助你快速上手并使用 Cypress 进行 web 应用的自动化测试以及生成测试报告。
什么是 Cypress？
Cypress 是一个开源的前端测试框架，用于端到端测试、集成测试和验收测试等场景中。Cypress 的特点在于：基于 JavaScript 编写、高可控性、易于集成、可自行管理和维护测试数据等等。
Cypress 的优势
可交互的测试
Cypress 允许我们在执行测试时，实时交互并进行调试，在浏览器中实时观察每一步的执行情况，对于调试以及深入理解 web 应用的行为非常有帮助。
健壮的定位方式
Cypress 的选择器和定位方式非常健壮，并且不易受到 web 应用中 CSS 或 JS 的变动所干扰，并且它的智能等待机制会自动等待元素加载完毕再进行操作。
内置断言和自定义断言
Cypress 内置了一套简便的断言机制，支持开发者自定义断言，让测试代码更加具有可读性和可维护性。
完整的测试工具链
Cypress 提供了完备的测试工具链，开箱即用，包括测试的网络监听、测试重跑、截图、视频录制等等，都是 Cypress 所支持的工具。
使用 Cypress 进行测试
安装 Cypress
要使用 Cypress 进行测试，我们需要先在本地安装 Cypress，方法如下：
--- ------- ------- ----------
安装完成后，在项目根目录中使用以下命令启动 Cypress：
--------------------------- ----
这将启动 Cypress 的测试管理器，并在左侧生成一个菜单，供我们管理和运行测试套件。
编写测试用例
Cypress 使用 JavaScript 进行测试编写，测试文件保存在 cypress/integration 目录下，我们可以在其中添加新的测试脚本。
例如，我们要写一个简单的测试用例，测试当我们通过表单登录页面时，登录成功后是否正确跳转至首页。我们的测试文件结构如下：
------------------ -- -- -
-------------- -- -- -
------------------------------------- -- ------
----------------------------------------------
-------------------------------- -----------------
-----------------------
-------------------------- --------
--
--在上面的测试文件中，我们使用了 Cypress 的一些核心 API：
cy.visit()：加载页面cy.get()：通过 CSS 选择器定位元素cy.type()：向元素发送键盘输入cy.submit()：提交表单cy.url()：用于获取当前 URLcy.contains()：选择页面中包含特定文本的元素
运行测试用例
要运行测试脚本，可以单独运行一个脚本文件，也可以在 Cypress 测试管理器中选择运行整个测试套件。
对于前者，我们可以使用以下命令：
--------------------------- --- ------ -----------------------------------
你将看到 Cypress 在命令行中输出测试结果。此外，你还可以使用以下命令在交互模式下启动 Cypress：
--------------------------- ----
这会在新窗口中打开 Cypress 测试管理器，让你方便地管理和运行测试套件。
使用命令行参数
在运行测试时，有时我们需要使用参数来控制测试的行为。Cypress 支持在命令行中传递参数，供我们使用。
例如，以下命令可以在 Headless 模式下运行测试：
--------------------------- --- --------
我们也可以通过命令行参数来指定测试使用的浏览器，例如：
--------------------------- --- --------- ------
渲染测试报告
Cypress 可以很方便地生成测试报告，同时也支持与各种 CI/CD 工具进行集成。
在默认情况下，Cypress 会渲染简单的测试结果汇总。但是如果你需要更详细的测试报告，你可以使用 Cypress 的 mochawesome 插件。这个插件可以渲染漂亮的 HTML 测试报告，用于实时查看测试结果和跟踪问题。
首先，我们需要先安装 mochawesome：
--- ------- ---------- -----------
接下来，在 Cypress 的 cypress.json 文件中设置配置项：
-
----------- --------------
------------------ -
------------ -----------------
-
-以上的代码会告诉 Cypress 使用 mochawesome 插件生成测试报告，并将测试报告保存在 cypress/reports 目录中。
现在你可以使用以下命令运行测试脚本：
--------------------------- --- ------ -----------------------------------
待测试完成后，你可以在 cypress/reports 目录中看到自动生成的漂亮 HTML 测试报告。
结论
通过以上文章，我们介绍了 Cypress 的核心特点和优势以及使用方法，并编写了一个简单的测试用例进行练习。此外，我们还介绍了如何生成漂亮的测试报告。
希望这些知识可以让你更好地理解 Cypress 的基础知识，并使用它进行您的 web 应用程序的自动化测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671a0b659babaf620fa0a13b