自动化测试框架[Cypress Test Runner详解]

前提

• 已经熟练掌握了Cypress的基本知识，请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较]
• 已经熟练掌握Cypress环境配置，请参考自动化测试框架[Cypress环境搭建与配置详解]和自动化测试框架[Cypress测试实例凸显其优势]
• 已经熟练掌握Cypress框架结构，请参考自动化测试框架[Cypress框架拆解]和自动化测试框架[Cypress重试机制]
• 已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress内置测试报告详解]
• 已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress自定义测试报告详解]
• 已经熟练掌握Cypress测试用例相关知识，请参考自动化测试框架[Cypress测试用例]
• 已经熟练掌握Cypress页面元素识别基础知识，请参考自动化测试框架[Cypress元素识别详解]
• 已经熟练掌握Cypress页面元素操作基础知识，请参考自动化测试框架[Cypress元素操作详解]

Test Runner基本特性

更改浏览器

默认情况下，Cypress使用Electron浏览器，但当系统中安装好其他浏览器后，可以在Test Runner中切换，如图所示

更改元素定位策略

Cypress在定位元素时会遵循如下优先级：

1. data-cy
2. data-test
3. data-testid
4. id
5. class
6. tag
7. attributes
8. nth-child

Cypress会尝试从高优先级的定位策略开始，定位目标元素，如果默认的定位顺序不符合应用程序实际情况，可以更改元素定位的优先级顺序，语法如下

//设置定位策略优先级,Options的可选值为以上8种的一种或多种
Cypress.SelectorPlayground.defaults(options)
//获取元素选择器的值
Cypress.SelectorPlayground.getSelector($el)

//设置定位策略优先级，最高级是id
Cypress.SelectorPlayground.defaults({
	selectorPriority:['id', 'class', 'attributes']
})

代码实例

例如如下HTML代码

<button id='login' class='login-class'>登陆</button>

默认情况下，获取到的元素选择器的值应该是login

const $el=Cypress.$('button')
//selector的返回值是login
const selector=Cypress.SelectorPlayground.getSelector($el)

更改元素定位策略，再次获取元素选择器的值，selector的值变成了login-class

Cypress.SelectorPlayground.defaults({
	selectorPriority:['class', 'id']
})
//selector的值变成了login-class
const $el=Cypress.$('button')
const selector = Cypress.SelectorPlayground.getSelector($el)

实时监控测试用例执行情况

Test Runner

Time-Travel

大部分的自动化测试框架都无法得知测试执行时被测应用程序所处的状态，只能在测试运行结束后通过日志或截图来猜测测试失败的原因，Cypress测试运行器则完全不同，它会记录每一条测试命令执行时被测应用程序所处的状态，并且保存起来以便回溯，因为Cypress保存的是应用程序状态，不是截图，因此Cypress支持查看命令执行时发生的一切操作，用户可直接定位到错误的根本原因，在测试结束后，可以通过鼠标悬停或者用鼠标单击某个命令的方式进行回溯

• 使用鼠标悬停可以在应用程序预览中查看命令作用到被测应用的具体情况
• 使用鼠标单击，将在浏览器的Console中看到当命令执行时，应用到了被测应用程序的哪个元素上，以及当时的上下文详细信息

Test Runner扩展

一个测试用例集(describe)通常包含多个测试用例(it)，当特殊情况出现时，例如网络不稳定等可能引起测试失败，我们希望仅重试失败的用例而不是重跑整个测试用例集，但测试运行器仅支持重试整个测试用例集，插件cypress-skip-and-only-ui使该场景成为现实

插件安装

执行命令npm i -D cypress-skip-and-only-ui

配置插件

在cypress/support/index.js文件中添加配置项

require('cypress-skip-and-only-ui/support')

在cypress/plugins/index.js文件中添加 配置项

const task=require('cypress-skip-and-only-ui/task')
module.exports=(on,config)=>{
	on('task', task)
}

如果有其他的配置项，则合并

//将其他task的选项定义在otherTask里
const otherTask={...}
const task=require('cypress-skip-and-only-ui/task')
const all=Object.assign({}, otherTask, task)
module.exports=(on, config)=>{
	on('task', all)
}

使用插件

命令行启动Test Runneryarn run cypress open，在执行测试的时候就可以在用例后看到如下图标

但此插件新版本的Cypress已经不再支持，4.0之前的Cypress可以，然而对于Cypress的扩展来说，不止这一款插件可用，还有很多