使用Cypress进行UI测试（三）CI助手DashBoard

你有没有过这样的苦恼，在CI上运行测试的时候，总是没办法第一时间测试运行的结果，即使可以，也是通过打印的日志，但是对于UI测试来说，我们更希望可以形象化的看到运行结果，所以我们会借助截图、录像等等来可视化运行结果。但截图、录像也只能在所有测试运行完成后拿得到，那么如果CI运行也可以像在本地一样有TestRunner实时的展示结果和snapshot，那该有多好。Cypress的dashboard就是来解决这一问题的，它可以实时的展示CI运行的结果，就像在本地运行测试用例一样。本文就会详细介绍Cypress dashboard的应用。
注：本文不借助任何CI工具，只会演示本地运行测试用例，在danshboard展示结果的过程

使用github账号登陆dashboard

使用dashboard的前提是需要有一个GitHub账号，并且将测试源码推到GitHub。如小下图，使用GitHub账号登陆dashboard

配置需要被记录的项目

登陆后，点击配置project，然后填写测试源码所在的GitHub项目名称


配置完成后，会生成projectId写入cypress.json，并且生成一个key，以后运行用例的时候填写该key即可将运行结果记录到dashboard。

dashboard展示运行结果

配置好之后，在本地运行:

cypress run --record --key [yourKey]

运行之后可以在【Runs】这个tab页下面看到运行记录，点击前往dashboard可以看到实时的运行结果，而且失败的用例还可以看到具体的失败原因、截图、录屏等等，而且保存多条运行记录。如下图：
简直吹爆这个功能，这里演示的是在本地运行用例，如果是在CI运行，然后在dashboard实时显示结果，简直太棒了，可以减少很多排查错误的时间。笔者的项目代码不能存在github而痛失该功能，心痛。。。