在现代 Web 开发中，前端框架不断涌现，为提升开发效率和用户体验做出了巨大贡献。然而，随着前端代码规模和复杂度的增加，如何保证代码质量和稳定性也成为了一大挑战。因此，端到端测试（End-to-End Testing，E2E 测试）逐渐成为了前端测试的重点。
Cypress，作为一款现代化的 E2E 测试框架，使用了最新的前端技术，提供了强大的 API 和易用的 UI，具备以下优势：
- 可读性强：以自然语言方式编写测试代码，易于阅读和维护；
- 实时反馈：运行测试时，Cypress 实时显示测试用例的状态和进度，开发者可以快速定位问题；
- 易于调试：Cypress 可以在浏览器中调试测试用例，开发者可以在代码中添加断点调试；
- 可靠性高：Cypress 提供了自动重试和智能等待等特性，保证了测试用例的可靠性。
前置条件
在开始之前，您需要先安装 Cypress：
npm install cypress --save-dev
安装完成后，在你的 package.json 文件的 scripts 部分添加以下内容：
"cypress:open": "cypress open"
然后，你就可以使用以下命令启动 Cypress：
npm run cypress:open
创建测试用例
操作页面元素
Cypress 提供了丰富的命令来操作页面元素，比如 click 、type、select 等。以下是一个简单的测试用例，模拟在 Google 页面中搜索 “Cypress”：
-- -------------------- ---- -------
---------------- ---- -- -- -
------ --------- -- -- -
----------------------------------
--------------------
----------------
-----------------------
--------
--------------------------------------
--
--代码解析：
cy.visit：访问谷歌首页；cy.get('[name="q"]')：获取页面中 name 属性为 “q” 的元素；.type('Cypress')：在元素中输入 “Cypress”；cy.get('[name="btnK"]').click()：获取页面中 name 属性为 “btnK”的元素并点击；cy.contains('https://www.cypress.io/')：断言页面中是否出现了指定字符串。
处理异步操作
在现代 Web 开发中，大量的异步操作、网络请求等都显得非常普遍。对此，Cypress 也提供了解决方案。例如，下面是一个测试用例，处理异步网络请求：
describe('异步操作示例', () => {
it('处理异步操作', () => {
cy.visit('https://jsonplaceholder.typicode.com')
cy.request('/comments?postId=1')
.its('body')
.should('have.length', 5)
})
})代码解析：
cy.request('/comments?postId=1')：发起一个 GET 请求，请求地址为https://jsonplaceholder.typicode.com/comments?postId=1；its('body')：访问响应的 body 属性；.should('have.length', 5)：判断响应数组长度是否为 5。
处理 Cookie 和 LocalStorage
Cypress 还提供了操作 Cookie 和 LocalStorage 的命令。以下是一个测试用例，模拟设置 LocalStorage 并读取数据：
-- -------------------- ---- -------
---------------------- ---- -- -- -
------ -------------- -- -- -
-------------
-----------
--------------------
------------------ -------- ----------
-----------
-----------
--------------------
------------------ --------
---------------- ----------
--
--代码解析：
cy.window().its('localStorage').invoke('setItem', 'myKey', 'myValue')：在 LocalStorage 中设置键值对；cy.reload()：重新加载页面，重新加载后 LocalStorage 中的内容将被清除；cy.window().its('localStorage').invoke('getItem', 'myKey').should('equal', 'myValue')：获取 LocalStorage 中的数据并断言是否为预期值。
测试特定场景
模拟用户行为
在前端开发中，很多场景需要模拟用户的特定行为来测试前端应用的正确性。例如，模拟用户登录操作：
-- -------------------- ---- -------
------------------ -- -- -
-------- -- -- -
-------------
---------------------------------------------
---------------------------------------------
-------------------------
------------------------ ------------
--
--代码解析：
cy.get('[data-cy=username]').type('testuser')：获取页面中 data 属性为cy且值为username的元素，并输入用户名；cy.get('[data-cy=password]').type('password')：获取页面中 data 属性为cy且值为password的元素，并输入密码；cy.contains('登录').click()：查找页面中包含 “登录” 文本的元素并点击；cy.url().should('match', /dashboard/)：断言跳转后的 URL 是否匹配正则表达式/dashboard/。
处理表单数据
处理表单数据也是 E2E 测试过程中非常重要的一个场景。以下是一个简单的测试用例，模拟在表单中输入数据：
-- -------------------- ---- -------
------------------ -- -- -
---------- -- -- -
-------------------
----------------------------------- ------
-----------------------------------------------
-------------------------------------------
---------------------------------------------------
-----------------------
--------------------
--
--代码解析：
cy.get('[data-cy=name]').type('Test User')：获取页面中 data 属性为cy且值为name的元素，并输入姓名；cy.get('[data-cy=email]').type('test@user.com')：获取页面中 data 属性为cy且值为email的元素，并输入邮箱；cy.get('[data-cy=password]').type('123456')：获取页面中 data 属性为cy且值为password的元素，并输入密码；cy.get('[data-cy=confirm-password]').type('123456')：获取页面中 data 属性为cy且值为confirm-password的元素，并确认密码；cy.get('form').submit()：获取页面中的表单并提交；cy.contains('注册成功！')：断言页面中是否出现了指定字符串。
结束语
Cypress 是一个强大的 E2E 测试框架，提供了丰富的命令和易用的 API，可以让开发者更高效地测试前端应用的正确性和稳定性。在日常开发中，我们可以使用 Cypress 来模拟用户行为、处理表单数据、处理异步操作等不同场景下的测试需求，提升代码质量和用户体验。
希望本文对你有所启示，让你更加深入地了解 Cypress 的使用和特性。在实际应用中，你可以根据具体的项目需求，针对性地编写测试用例，提供有效的保障和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67831fa7935627c9002a5de0
