Cypress 是一个基于 JavaScript 的端到端测试框架，其具有简单易用、快速稳定、自带断言等优点，能够帮助我们更加高效地进行前端测试工作。在本文中，我们将通过详细的指导和示例代码，介绍如何使用 Cypress 进行端到端测试。
安装 Cypress
首先，我们需要安装 Cypress，可以使用以下命令进行安装：
# 使用 npm 安装 npm install cypress --save-dev # 使用 yarn 安装 yarn add cypress --dev
安装完成后，如果使用 npm 安装，可以在项目的 package.json 文件中添加以下脚本：
{
"scripts": {
"cypress:open": "cypress open"
}
}然后，运行以下命令即可启动 Cypress：
npm run cypress:open
编写测试用例
接下来，我们需要编写测试用例，可以创建一个 cypress/integration 目录来存放测试用例。在该目录下创建一个 example.spec.js 文件，内容如下：
describe('Example', () => {
it('should visit example.com', () => {
cy.visit('http://example.com')
cy.contains('Example Domain')
})
})这个测试用例的意思是，访问 example.com 页面，然后断言页面中包含 Example Domain 文字。
运行 Cypress，可以在界面中看到该测试用例，并且可以通过界面来交互式地执行该测试用例。
断言
Cypress 内置了多种断言方法，可以用来判断页面上的内容是否符合预期。常用的断言方法包括以下几种：
cy.get
cy.get 方法用于获取指定的 DOM 元素，可以通过 CSS 选择器或元素描述符来指定。
cy.get('.hello') // 通过类名获取
cy.get('#world') // 通过 ID 获取
cy.get('[data-testid="foo"]') // 通过 data-testid 属性获取cy.contains
cy.contains 方法用于查找包含指定文本的元素。
cy.contains('hello') // 查找文本为 "hello" 的元素cy.should
cy.should 方法用于对获取的元素进行断言判断，判断元素是否符合预期。常用的判断方法包括以下几种：
cy.should('be.visible') // 判断元素是否可见
cy.should('have.length', 2) // 判断元素数量是否为 2
cy.should('have.class', 'foo') // 判断元素是否包含类名为 "foo"
cy.should('have.attr', 'data-testid', 'bar') // 判断元素是否包含 data-testid 属性且属性值为 "bar"
cy.should('not.exist') // 判断元素不存在Hook
Cypress 还支持使用 Hook，在测试执行前或后执行一些预处理或清理工作。常用的 Hook 包括以下几种：
before
before 方法在测试执行前执行一次，可以用于打开页面或进行一些前置操作。
before(() => {
cy.visit('http://example.com')
})beforeEach
beforeEach 方法在每个测试用例执行前执行一次，可以用于进行重置操作。
beforeEach(() => {
cy.reload()
})示例代码
最后，附上一个完整的示例代码，用于测试 Todo App 应用的添加和删除功能：
-- -------------------- ---- -------
-------------- ----- -- -- -
------------- -- -
-- -- ---- ---
---------------------------------
--
---------- --- ---- ------ -- -- -
-- -----------
------------------------ ----------
------------------------
------------------------------ --- ----------
--
---------- ------ ---- ------ -- -- -
-- -----------
------------------------ ----------
------------------------
------------------------------ --- ----------
------------------------
---------------------------------- --- ----------
--
--总结
通过本文的介绍，我们了解了如何使用 Cypress 进行端到端测试，并学习了断言方法、Hook 等相关知识。掌握这些技能可以帮助我们更加高效地进行前端测试工作，缩短开发周期，提高软件质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a10aed48841e9894d505e0