Cypress 是一个现代化的前端自动化测试框架，它能够快速地测试 Web 应用程序并提供详细的测试结果和错误信息。它主要被用于单页面应用和 react 应用程序的测试。Cypress 的特点是快速、高效、可靠，使用者可以方便地编写测试代码，并通过实时的测试结果来迅速定位错误，减少调试时间。
为什么选择 Cypress
Cypress 提供了强大的测试 API，集成了断言库和跨浏览器测试工具，能够用来测试 Web 应用程序的各种前端功能。其主要特点有：
- 可以快速测试 Web 应用程序
- 提供现代测试 API 和断言库
- 支持交互式断点调试
- 实时监测测试信息和错误信息，方便快速修复错误
- 提供后续测试替代品
Cypress 使用者可以方便地编写测试代码，并通过实时的测试结果来迅速定位错误，减少调试时间。
Cypress 安装和使用
安装 Cypress
首先需要确保安装了 Node.js，然后执行以下命令来安装 Cypress：
npm install cypress --save-dev
编写测试用例
Cypress 的测试用例可以编写在 cypress/integration 目录下，测试用例以 .spec.js 结尾。例如：
describe('My first test', function() {
it('click a button', function() {
cy.visit('http://localhost:3000');
cy.get('button').click();
});
});测试代码中的 cy.visit() 方法用于访问测试网址，cy.get('button').click() 用于获取按钮并触发点击事件。这个例子的意思是测试点击按钮后是否显示了目标内容。
运行测试用例
启动 Cypress 用例运行器：
node_modules/.bin/cypress open
这将启动 Cypress 用例运行器，您可以在其中看到测试用例列表并单击要运行的用例。 Cypress 会自动打开一个浏览器窗口开始运行测试代码。
结果查看
测试结果会在 Cypress 界面中实时更新，也可以在 cypress/videos 目录下找到视频文件来查看用例运行过程。如需要将测试结果保存成报告，可以使用 mochawesome 等测试报告工具进行生成。
Cypress 高级使用
点击 VS 触发
在 Cypress 中，从 DOM 中触发事件有时候不够准确，因为我们在一段时间内可能并不知道何时能够触发事件。如果是让用户自己点击，这可能会导致一些问题。因此，我们可以使用 cy.contains() 和 cy.contains().click() 函数来生成事件，如：
cy.contains('Log in').click();cy.contains() 函数将搜索页面中的文本，然后通过选择器而找到元素，click() 方法在找到某个元素后触发对应的事件。
数据存储
我们可以在测试用例中使用 cy.readFile()和 cy.writeFile() 来读取和写入数据。例如，在使用 Cypress 进行表单测试时，我们可以保存表单数据，从而避免重复输入完整的数据。当使用 cy.writefile() 时，文件将被存储在 cypress/fixtures 目录下。
-- -------------------- ---- -------
-------------- ---- ------ ---------- -
--------- --- ---- ---- ----- --------- ---------- -
----------------------------------
-------------------------------------------
--------------------------------------------------------
------------------------------------------------
------------------------------------------ -
----- --------
------ --------------------
--------- --------
---
---
---使用 cy.writeFile() 的同时，同时在应用程序页面输入相应的文本。
认证API
Cypress 使 API 认证变得非常简单。可以使用 cy.request() 和 cy.login() 函数来进行认证。如下所示：
-- -------------------- ---- -------
--------------- ------ ---------- -
---------- ----- ----- ------ ---------- -
------------------------------------------
---
---------- ------- ---------- -
-------------------- ------------
---
---断点调试
在 Cypress 中，您可以在测试代码中设置断点来调试代码。当测试代码运行时，它将停止在断点处，并允许您逐步调试代码。
describe('My first test with debugger', function() {
it('click a button', function() {
cy.visit('http://localhost:3000');
debugger;
cy.get('input[type="email"]').type('email@example.com');
});
});注意代码中被包裹在 debugger 语句中的行，在执行到这一行的时候会自动停下，然后您就可以逐步跟踪测试流程了。
总结
Cypress 是一款非常强大，且易于使用的前端自动化测试框架。它具有许多功能，支持所有流行的测试 API 和断言库。在测试开发进程中，通过使用 Cypress 可以大大简化测试流程，将更多精力专注于测试的业务逻辑部分。在后续的开发过程中，开发人员们可以根据测试用例的结果，修补相关的代码或对相关文档进行修改，从而达到了显著提高质量的目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fd64c48841e9894dfc797