WEB自动化-07-Cypress Test Runner

7 Test Runner

7.1 概述

    Test Runner是Cypress非常重要一个组件，其主要作用为运行测试、更改配置、将运行的测试结果写入控制台等等。

    打开Cypress Test Runner的方式如下所示：

npm run cypress open
或
npx cypress open

    打开Cypress后，点击其中一个测试文件，运行完成测试后，截图如下所示：

0603TestRunner预览图.png

    Cypress的Test Runner主要组成可以查看前面4.9相应的介绍。

7.2 常用功能

    本节将介绍一下Test Runner中非常实用的功能，如下所示：

7.2.1 在IDE中打开文件

    在测试状态菜单下面点击链接，即可使用默认的IDE打开测试用例文件。

0604使用默认IDE打开文件.png

    如果想要更改该功能，可以在Cypress主界面进行更改，如下所示：

0605更改文件打开选项.png

7.2.2 命令日志

    左侧下方即为可视化的命令日志窗口，会显示所有测试集和测试用例等。单击时，可以显示每个Cypress命令、断言、Hook等，如下所示：

0606命令日志窗口.png

7.2.3 时光穿梭功能

    当鼠标在每个命令或断言悬停时，将会在右键应用程序预览窗口还原出命令执行时的状态（即时间穿梭功能）。

0607时光穿梭机功能.gif

Cypress默认仅保存50个快照和命令的时光穿梭功能。如果需要更多的时光穿梭功能数量，可以通过修改配置项numTestsKeptInMemory

7.2.4 在命令上点击

    在每个命令、断言、错误上点击时，可以在Console窗口上显示一些额外的信息。

0608在Command上单击.png

7.2.5 查看错误

    当在运行出现错误时，Cypress会显示一些错误的信息，主要有以下几个部分

• 1、错误名称

    显示错误类型，如断言错误、Cypress错误等

• 2、错误信息

    显示错误的详细信息，信息的多少取决错误类型。还会附加一些示例、如何解决错误的建议等

• 3、更多信息

    在部分错误信息中，会显示更多信息，点击该链接，可以跳转到Cypress文档页面。

• 4、产生错误的文件名

    产生错误的代码文件名

• 5、产生错误的代码片断

    在这里会显示产生错误的代码行及相应的代码片断

• 6、查看堆栈跟踪

    单击下拉箭头，可以查看详细堆栈信息，点击蓝色字体链接，可以使用默认IDE打开文件

• 7、打印信息至Console按钮

    点击Print to console按钮，可将全部错误信息输出打印至开发工具Console中。

0609Cypress错误信息窗口.png

7.2.5 元素辅助定位功能

    通过该功能可以快速定位元素。如下所示：

0324元素辅助定位器.png

7.3 其他功能

7.3.1 编辑定位器

    当使用该功能时，在输入不同的元素选择器，会立即在页面中显示匹配到所有元素。

0610元素辅助定位-编辑.gif

7.3.2 切换至contains

    通过切换至contains，可以快速搜索匹配当前页面中包含所输入的文本元素，如果能匹配到多个项，则仅选中第一个。

0611切换至Contains.gif

7.3.3 使用快捷键

    在Test Runner页面可以使用快捷键，来快速实现一些功能，如下所示：

快捷键	功能
r	运行所有测试
s	停止测试
f	返回Cypress窗口

0612TestRunner快捷键.png