持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
Cypress 下什么是条件测试
- 判断一个元素是否存在，当它存在时，执行 A 操作；当它不存在时，执行 B 操作
- Cypress 认为条件测试是导致测试不稳定的根本原因
条件测试的不稳定性
- 当测试代码中出现条件测试时，说明无法确定操作会导致哪种结果发生
- 这显然是有风险的，例如执行 A 操作的代码有错误，导致 A 操作一直没有被触发，则此问题将无法被测试到
停用条件测试
- Cypress 建议通过指定前置测试条件来避免操作引发的不确定行为
- 例如当有A、B 策略的需求时，指定测试前置条件使得 A 或 B 一定发生
- 前置条件的构造，可以通过修改 DB 直接获取，也可以根据业务使用 API 或 UI 的方式构造
- 唯有条件确定时，才能避免使测试进入条件测试的困境
测试代码栗子
// 前置条件的构造过程
it('确定 A 操作会发生', function () {
cy.get('.A_Selector').should('exist')
});
it('确定 A 操作不会发生', function () {
cy.get('.A_Selector').should('not.exist')
});
前言
Cypress 提供了两种方式的 debug
.debug()
作用
- 在定位问题时，可以使用 .debug() 来调试，查看此时系统的状态
- 记得需要打开浏览器开发者工具哦（F12），才能让调试生效
语法格式
.debug()
.debug(options)
// ---or---
cy.debug()
cy.debug(options)
命令返回结果
返回上一条命令产生的结果
正确用法
// 在命令开头就进行调试
cy.debug().getCookie('app')
// 调试 get 命令
cy.get('nav').debug()
栗子
cy.get('a').debug().should('have.attr', 'href')
测试结果
主要看 F12
debugger
作用
Cypress 测试代码和被测应用运行在同一个循环中，意味着有访问和控制页面上运行着的代码的权利
栗子一
it('debugger', function () {
cy.get('a').then(function () {
debugger
})
});
记得需要打开浏览器开发者工具哦（F12）
测试结果
命令执行流程
上面的代码整个工作流程如下
- cy.visit() 访问页面，Cypress 等待加载
- 查询该元素（a 标签），如果没有立即找到它，Cypress会自动等待并重试一会儿
- .get() 执行结果传递给 .then() 函数
- 在 .then() 函数的上下文中，调用 debugger 调试器，停止运行测试代码并调用 Developer Tools 的焦点
- 检查应用程序的状态，执行 debugger
