Cypress 自动化测试实战：进阶篇-JavaScript中文网-JavaScript教程资源分享门户

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

Cypress 自动化测试实战：进阶篇