到目前为止，我们只了解了如何处理测试用例，但尚未使用测试运行器。让我们来改变这一点，看看它如何帮助我们可视化测试并排查任何失败的测试用例。

---

测试运行器概览

如果你还记得在“安装 Cypress”这一课中，我们已向 package.json 文件添加了一个脚本，该脚本会为我们打开 Cypress 测试运行器。打开后，你将看到一个仪表板，显示所有集成测试。

让我们来看一下这张图片，并分析仪表板上的内容：

1. 在右侧角落的顶部，有一个“Support”（支持）和“Docs”（文档）按钮，可帮助我们快速导航至官方 Cypress 网站以获取更多帮助。
2. 在“Support”和“Docs”按钮下方，有一个下拉菜单，用于选择我们要用来运行测试用例的浏览器。默认使用 Electron，但 Cypress 也会自动检测系统中可用的浏览器供你使用。
3. 再往下，我们可以在测试运行器中直接创建新的 spec 文件。
4. 仍在右侧，点击按钮即可一次性运行所有集成测试。
5. 如果你想查找某个特定的 spec 文件却找不到，可以使用顶部的搜索栏，或按 “Ctrl” + “F” 进行搜索。
6. 从集成测试列表中，你可以点击任意 spec 文件来单独运行它。
7. 在右下角，Cypress 会在有新版本可用时提醒你。这里也可以访问更新日志。

“Runs” 标签页

如果我们切换到“Runs”标签页，就可以连接 Cypress 仪表板，查看记录的测试结果。

“Settings” 标签页

最后，我们有“Settings”（设置）标签页。在这里，我们可以查看配置设置，这些设置可以通过多种方式设定：

颜色代表不同来源的设置值：

• 透明：表示默认值
• 蓝色：通过 cypress.json 设置的值
• 黄色：通过 cypress.env.json 设置的值
• 绿色：通过环境变量设置的值
• 红色：通过 CLI 参数设置的值
• 紫色：通过插件设置的值

---

自动化浏览器

让我们来看看自动化浏览器。从“Tests”步骤中选择一个测试用例，点击它以打开自动化浏览器。我们就用本教程中一直创建的那个。

状态栏

在自动化浏览器的最上方，我们可以看到状态栏，从左到右显示以下内容：

• 一个返回所有测试用例的“Back”（返回）按钮。
• 已通过（绿色）、失败（红色）或跳过（灰色）的测试数量。
• 规范运行所花费的时间。
• 一个禁用自动滚动的按钮。
• 一个重新运行当前 spec 文件中所有测试的按钮。
• 地址栏显示正在测试的网站 URL，下方是屏幕尺寸。

我们还在地址栏旁边看到一个十字准星图标。点击它会打开选择器游乐场，你可以动态使用 cy.get 和 cy.contains 来选择页面上的不同元素，并快速复制选择器到你的测试用例中。

命令日志

命令日志将是我们的主要指标，用于观察测试的执行过程以及哪些步骤通过或失败。每个命令和断言都会在此列出，并附带一些额外信息，例如网络请求。

我们可以通过点击测试用例的名称来开启或关闭它。如果点击测试用例中的某个命令，它将在控制台中记录有关该命令的更多信息，包括：

• 命令名称。
• 它产生的元素。
• 找到的元素数量。
• 断言的实际值与期望值。

除了向控制台输出有用信息外，它还会带你回溯时间，以便检查命令执行时应用程序的状态。

应用预览

最后，我们有应用预览。在这里，我们可以实时查看命令的执行情况。如果我们选择命令日志中的某个命令，可以检查执行命令前后的应用程序状态。

我们还可以像平常一样使用 DevTools 来调试应用程序。结合使用命令日志重现精确的应用程序状态，Cypress 让我们能够克服所有障碍。