持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
前言
- 断言是测试用例的必要组成部分
- 没有断言，咱们就不知道测试用例的有效性，到底通过没通过
- Cypress 的断言基于 Chai 断言库，并且增加了对 Sinon-Chai、Chai-jQuery 断言库的支持，其中就包括 BDD 和 TDD 格式的断言
BDD 格式的断言
- expect
- should
TDD 格式的断言
assert
常见的断言方式
以下列出了常见的元素断言
长度（Length）
// 重试，直至找到3个匹配的<li.selected>
cy.get('li.selected').should('have.length',3)
重点： hava.length
类（Class）
// 重试，直至这个input不再有disabled的class
cy.get('form').find('input').should('not.hava.class','disabled')
重点： not.hava.class
值（Value）
// 重试，直至这个textarea的值为 poloyy
cy.get('textarea').should('have.value','poloyy')
重点： have.value
文本内容（Text Content）
// 重试，直至这个span不再包含'click me'
cy.get('a').parent('span.help').should('not.contain','click me')
重点： not.contain
针对元素是否可见（Visibility）
// 重试，直至button可见
cy.get('button').should('be.visible')
重点： be.visible
针对元素是否存在（Existence）
// 重试，直至 id=loading 元素不再存在
cy.get('#loading').should('not.exist')
重点： not.exist
针对元素状态（State）
// 重试，直至radio状态是checked
cy.get(':radio').should('be.checked')
重点： be.checked
针对 CSS
// 重试，直至complete这个类有匹配的css为止
cy.get('.completed').should('have.css','text-decoration','line-through')
重点： hava.css
针对回调函数（callback）
如果内建的断言没有满足你的需求，可以自己写断言函数，然后作为一个回调以参数的形式传给 .should()
假设源HTML如下
<div class="main-abc123 heading-xyz987">Introduction</div>
自己写的断言函数
前言
- Test Runner 也叫运行器，Cypress 因为它的存在，才在众多自动化测试框架中脱颖而出
- Cypress 使测试在一个独特的交互式运行器中运行测试，不仅可以在执行命令时查看测试结果，同时还允许查看被测应用程序
Test Runner 的简介
- Test Runner 是一个库或者工具，它用来挑选一个包含单元测试或者一系列其他设置的测试集合 【打包测试用例集】
- 然后执行这个测试集合，并将测试结果写入控制台或日志文件 【运行测试用例集】
- Test Runner 使创建和执行测试套件更加方便和灵活
- 不同的语言，会有不同的 Test Runner
Cypress Test Runner
Cypress 自带的交互式测试运行器功能强大，允许你在测试运行期间就查看测试命令的执行结果，并同时监控在命令执行时，被测程序所处的状态
Cypress Test Runner 的组成
讲解的顺序就是按上面图片1-6哦
测试状态目录（Test Status Menu）
展示测试用例成功的数目
展示测试用例失败的数目
展示测试用例待定的数目
最后展示整个测试文件的运行总时间
右侧还可以手动再次运行一次当前测试文件的所有测试用例哦
命令日志（Command Log）
命令
这里要说下命令的意思，其实就是调用的方法，只不过官方会将它说成命令；一个命令等于调用了一个方法
作用
- 命令日志用于记录每个被执行的命令
- 点击命令，可以在 Console 中查看命令应用于哪个元素，以及执行的详细信息；同时应用程序预览（App Preview）会显示当前命令执行时被测应用程序的状态
URL 预览（URL Preview）
展示测试命令执行时，被测应用程序所处的 URL，它能够使你更方便地查看测试路由
应用程序预览（App Preview）
展示测试运行时，被测应用程序的实时状态（样式，动画之类的）
视窗大小（ViewPoint Sizing）
- 可以通过设置视窗大小来测试页面响应式布局
- 可以在 cypress.json 文件中通过设置 viewportWidth 和 viewportHeight 两个配置项来控制视窗大小
Cypress 元素定位辅助器（Selector Playground）
可以帮助我们识别元素唯一的定位标识
