Cypress实践 - 2/2
接上篇，真实项目的一些更进阶的用法。
Cypress高级
测试
元素选择使用XPATH
pnpm install cypress-xpath
在require('cypress-xpath');
调试
- cy.log()记日志
- cy.pause()
- cy.debug()
别名
别名支持网络请求和DOM。
- .as(‘createTodo’) : 别名
- .get(‘DOM别名’)
router
- .wait(’@createTodo’) : 等待请求完成
router计数
cy.server().route('POST','/todos').as('createTodo')
cy.vist('/')
cy.addTodo().addTodo()
cy.wait(['@createTodo','@createTodo']).then( todos => {
expect(todos[0].status).to.eq(201)
})
// 或者使用
cy.wait('@createTodo.2').then( todos => {
expect(todos.status).to.eq(201)
})
截图
cy.screenshot('home',{ capture:'runner', log: false })
配置
主要配置
- cypress.json 核心配置
- cypress.env.json 本地开发环境变量
Jenkins集成
如果是headless模式，需要参考这里先安装依赖.
推荐实践
- 尽量使用闭包用于访问和存储Command的返回值，而不要使用const,let,var
- 解决测试依赖问题
- 把前面测试中的重复代码移到before或beforeEach里(beforeEach应该放在support/index.js)
- 把多个测试合并为一个大测试
- 不要使用after和afterEach, 因为无法保证一定会执行
- 数据构造,并结合mock服务数据
- 登录: 使用接口或保存cookie (默认在每个test执行前, 会清localStorage等所有数据)
// 使用以下方式保留cookie
Cypress.Cookies.defaults({ whitelist: 'session_id' })
注：不要用UI去构建状态,这样做非常缓慢、繁琐和不必要.