使用Cypress进行UI测试（二）易于Debug的TestRunner

Cypress主要分为两部分，一部分是安装在本地使用的Cypress，一部分是展示CI运行结果的dashboard。这一篇呢，主要讲一下CypressTestRunner。

测试用例运行情况展示

我们打开Cypress之后点击运行一个用例，然后看一下TestRunner页面的都有哪些重要的元素。如下图：
1.展示了用例执行状态，成功、失败、运行中的个数；
2.整个测试集执行的总时间；
3.运行完成后可以点击重新运行测试集；
4.点击Selector Playground可以定位元素，下文会详细介绍；
5.左边展示了每一个用例的每一个执行步骤；
6.右边展示了被测APP的页面，可以通过在cypress.json配置调整其大小；

如何Debug

了解了TestRunner的基本功能之后，下面介绍一下如何debug。
1.借助command log排查
页面左边的command log详细记录了测试用例的每一步操作，点击command可以定位到右边页面上的元素，如果用例失败也会打印详细的错误。

2.借助developer tool排查
Cypress支持打开developer tool进行排查，如果测试用例运行出错在console里会打印出详细错误，如果用例里有接口调用，console也会打出具体的request和response内容。当然，如果元素出错，可以打开element重新查找元素。

3.实时检测代码变化自动运行测试用例
如果你在本地调试代码，并且打开的TestRunner，一旦代码修改了，cypress会自动运行该测试用例。（不过笔者亲身体验，该功能时灵时不灵，有时即使识别到了变化，用例也运行不起来）

Selector Playground

Cypress的selector playground其实也是debug的好助手，之所以单独提出来，是觉得它确实好用。
如果元素定位出错的话，你又不想使用developer tool定位元素，那么selector playground就是很好的帮手，只要使用箭头选中页面元素，就会自动帮你定位元素并生成cypress语句，直接在代码里使用即可。selector playground定位元素的优先级如下：data-cy、data-test、data-testid、id、class、tag、attributes、nth-child，这也是cypress推荐的定位元素的方法优先级排序。

以上就是TestRunner的一些常用功能介绍，有没有觉得cypress真的很易于的不够呢？反正笔者这么认为。