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