Cypress 是一个现代化的端到端测试工具，它是专门为现代 Web 应用程序打造的。Cypress 拥有丰富的 API，易于使用和学习，同时提供了一个交互式的测试运行器和强大的调试工具。
本文将介绍 Cypress 的一些基本概念和常见用法，以及一些最佳实践和陷阱。我们将使用一个基于 React 的 Todo 应用程序作为示例，通过端到端测试验证应用程序的功能。
安装和配置 Cypress
Cypress 可以通过 npm 安装，可以使用下列命令进行安装：
npm install -D cypress
安装完成后，我们需要进行一些配置工作。首先，我们需要在项目根目录下创建一个 cypress.json 配置文件。该文件包含 Cypress 的配置选项，例如我们需要指定 Cypress 启动的应用程序地址和默认浏览器:
{
"baseUrl": "http://localhost:3000",
"browser": "chrome"
}另外，我们还需要在 package.json 中的 "scripts" 部分添加一个 "cypress" 的脚本，它可以快速启动 Cypress 应用程序，如下所示：
{
"scripts": {
"cypress": "cypress open",
"start": "react-scripts start"
}
}以上配置可以让我们通过运行 npm run cypress 命令快速启动 Cypress 应用程序。
编写测试用例
我们现在已经准备好开始编写端到端测试用例了。我们将针对 Todo 应用程序编写两个测试用例：
- 添加一个新的 Todo
- 标记一个 Todo 已完成
创建测试文件
在 cypress/integration 目录下，我们需要创建两个测试文件 add_todo.spec.js 和 complete_todo.spec.js。对于每个测试文件，Cypress 会提供一个 describe 函数，以及一个或多个 it 函数。
-- -------------------- ---- -------
------------- ------ -- -- -
---------- --- - --- ------ -- -- -
-- ------- ---- ---- ----
--
--
------------------ ------ -- -- -
---------- -------- - ------ -- -- -
-- ------- ---- ---- ----
--
--访问应用程序
在编写测试用例之前，我们需要确保测试应用程序正在运行。我们可以通过 Cypress 的 baseUrl 配置来访问应用程序。在我们的例子里，我们将访问 http://localhost:3000。调用 cy.visit() 函数以启动测试应用程序：
-- -------------------- ---- -------
------------- ------ -- -- -
---------- --- - --- ------ -- -- -
-------------
--
--
------------------ ------ -- -- -
---------- -------- - ------ -- -- -
-------------
--
--交互测试
对于第一个测试，我们需要测试添加一个新的 Todo。我们需要输入 Todo 名称，并按下“Enter”键。使用 cy.get() 函数访问我们的输入字段，并虚拟按下“Enter”键：
describe('Add Todo', () => {
it('Should add a new todo', () => {
cy.visit('/')
cy.get('input').type('New Todo').type('{enter}')
})
})对于第二个测试，我们需要模拟单击 Todo 的完成按钮。我们可以使用 cy.contains() 函数找到包含“New Todo”的 Todo，并使用 .parent() 函数获取 Todo 元素。然后，我们需要使用 .find() 函数访问我们的完成按钮，并虚拟单击：
describe('Complete Todo', () => {
it('Should complete a todo', () => {
cy.visit('/')
cy.contains('New Todo').parent().find('button').click()
})
})断言测试结果
我们需要确保测试结果符合预期。对于第一个测试，我们需要确保一个新的 Todo 已经添加到了列表中。通过 cy.get() 函数获取我们的 Todo 列表，并使用 should() 函数断言列表中包含了我们的 Todo：
describe('Add Todo', () => {
it('Should add a new todo', () => {
cy.visit('/')
cy.get('input').type('New Todo').type('{enter}')
cy.get('li').should('contain', 'New Todo')
})
})对于第二个测试，我们需要确保我们的 Todo 已经被标记为已完成。使用 .should() 函数断言该 Todo 的 class 包含了 completed：
describe('Complete Todo', () => {
it('Should complete a todo', () => {
cy.visit('/')
cy.contains('New Todo').parent().find('button').click()
cy.contains('New Todo').should('have.class', 'completed')
})
})最佳实践和陷阱
在编写 Cypress 测试时，有一些最佳实践和陷阱需要了解。
在 before 和 beforeEach 操作中设置状态
为了保持测试干净，我们需要在每个测试之前重置应用程序状态。可以使用 beforeEach 操作来重置应用程序状态：
-- -------------------- ---- -------
------------- ------ -- -- -
------------- -- -
-------------
------------------------- ----------------------
------------------------------ ---- ------
--
---------- --- - --- ------ -- -- -
-- ------- ---- ----
--
--同样，我们也可以在 before 操作中为所有测试设置状态：
-- -------------------- ---- -------
--------- -- -
-------------
----------------------------- ----------------------
--
------------- ------ -- -- -
------------- -- -
------------------------- ----------------------
------------------------------ ---- ------
--
---------- --- - --- ------ -- -- -
-- ------- ---- ----
--
--避免使用 cy.wait()
尽可能不要使用 cy.wait() 函数，因为它会使测试变慢。如果您确实需要等待，Cypress 提供了一个更好的替代品：cy.waitUntil() 函数。此函数等待一个表达式为真，然后才继续执行测试。
使用 .then() 和 .should() 函数来处理异步代码
在 Cypress 中，大多数测试代码都是异步的。使用 .then() 和 .should() 来处理异步代码。
cy.get('button').click().then(() => {
cy.get('li').should('have.length', 2)
})使用 Cypress 命令获取 DOM 元素
Cypress 提供了一系列方便快捷的 DOM 元素选择器。Cypress 命令对 DOM 元素进行封装，您可以在选择器前加上 cy. 以获取 Cypress 命令。例如：cy.get()、cy.contains()、cy.get('#my-id').click()。
结论
Cypress 是一个功能强大的端到端测试工具，内置了很多实用的功能和工具。我们在此介绍了概念和用法，以及一些最佳实践和陷阱。根据适当的用例和最佳实践，Cypress 可以在前端开发和测试中发挥重要的作用，提高我们的代码可靠性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffbcf51b0bf82c71cf2b4c