Cypress 是一款现代化的前端自动化测试工具，它具有简单易用、快速稳定等特点，在前端开发中得到了广泛的应用。本文将从进阶的角度对 Cypress 进行实战讲解，包括页面操作、网络请求、测试流程控制及其高级特性。
页面操作
在 Cypress 中，页面操作是测试的核心，我们可以使用 Cypress 的选择器和命令对页面元素进行操作和断言。以下是一些常见的页面操作命令：
访问页面
通过 cy.visit(url) 命令可以访问指定的网页：
cy.visit('https://www.baidu.com')选择元素
Cypress 提供了多种选择器，如 cy.get()，cy.contains()，cy.get().find() 等，可以方便地选择页面中的元素。例如，选中一个类名为 title 的元素：
cy.get('.title')输入文本
使用 cy.get().type() 命令可以往指定的元素中输入文本，例如，往一个 input 元素中输入字符串 "hello world"：
cy.get('#input-field').type('hello world')点击元素
使用 cy.get().click() 命令可以模拟鼠标单击操作：
cy.get('#submit-btn').click()断言元素
使用 Cypress 的 should() 函数可以对页面元素的属性或文本进行断言，例如，检查一个元素的文本内容是否包含字符串 "hello"：
cy.get('.message').should('contain', 'hello')网络请求
Cypress 还提供了丰富的 API 支持对网络请求进行测试，包括监听、拦截、修改和断言请求等操作。
监听请求
使用 cy.server() 命令可以启动一个虚拟的服务器，通过 cy.route() 命令可以监听指定的请求，例如，监听一个 HTTP GET 请求：
cy.server() // 启动一个虚拟服务器
cy.route('GET', 'https://api.example.com/items').as('getItems')拦截请求
在路由中指定回调函数，即可实现请求拦截和修改。例如，拦截一个 HTTP POST 请求，并返回自定义的数据：
cy.route('POST', 'https://api.example.com/items', (req) => {
req.reply({ status: 'success', data: { id: 1, name: 'item' }})
})断言请求
使用 cy.wait() 命令可以等待指定的请求完成，然后使用 should() 断言请求的状态码、请求体、响应头等信息。例如，检查一个 HTTP GET 请求的响应状态码是否为 200：
cy.wait('@getItems').its('status').should('eq', 200)测试流程控制
Cypress 还支持常见的测试流程控制操作，包括异步测试、循环和条件控制等。
异步测试
Cypress 默认支持 Promise，async/await 和 jQuery Ajax 等异步测试方式，其测试流程控制 API 也具有极强的灵活性。例如，以下为一个异步测试用例：
-- -------------------- ---- -------
---------- ---- ----- --- ----- ----- -- -- -
-----------
--------------- -----------------------------------------------
-------------
----- --------------------
---------------- ----
---------------------- --
--------
------------------ ----- ---
--循环和条件控制
使用 Cypress 提供的循环和条件控制语句，可以在测试中实现更加复杂的流程控制，例如，以下示例为循环遍历元素列表：
cy.get('.item').each(($el, index, $list) => {
cy.wrap($el).should('have.class', 'selected')
})高级特性
除了以上介绍的基本特性外，Cypress 还具有许多高级特性，如自定义命令、自定义断言、截图和录屏等。
自定义命令
使用 Cypress.Commands.add() 函数可以自定义命令，用于简化和模块化测试逻辑，例如，以下示例为一个自定义命令，用于模拟用户登录操作：
Cypress.Commands.add('login', (username, password) => {
cy.get('#username').type(username)
cy.get('#password').type(password)
cy.get('#submit').click()
})自定义断言
使用 chai 断言库和自定义的断言函数，可以实现更严谨的测试断言，并扩展 Cypress 的内置断言。例如，以下示例为一个自定义断言，用于检查页面中所有链接，是否都为 HTTPS 协议：
expect.addAssertion('allHttps', () => {
cy.get('a').each(($el) => {
const href = $el.attr('href')
expect(href.startsWith('https://')).to.be.true
})
})截图和录屏
使用 Cypress 提供的截图和录屏功能，可以帮助我们捕捉测试过程中的异常情况，便于后续的调试和定位。例如，以下示例为一个在测试失败时自动截图的实现：
Cypress.on('fail', (error, runnable) => {
const fileName = `${runnable.title} -- ${error.message}`
cy.screenshot(fileName)
})总结
本文从进阶的角度对 Cypress 进行了详细的讲解，覆盖了页面操作、网络请求、测试流程控制及其高级特性。希望本文能够帮助读者更加深入地了解 Cypress，提高前端自动化测试的能力和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ee07748841e9894d47504