测试运行器——Cypress的“可视化调试利器”
写测试时最头疼的就是“用例失败了，但不知道哪里错了”。Cypress的测试运行器（Test Runner）就像一个“实时监控屏”，不仅能展示测试步骤，还能帮你回溯每一步的页面状态，调试效率直接翻倍。这一章咱们就好好聊聊这个工具怎么用。
一、Test Runner长啥样？
启动Cypress后，无论是用cypress open打开图形界面，还是运行单个用例，都会看到Test Runner的主界面，主要分这几个部分：
- 测试状态区：顶部显示当前运行的用例数、成功/失败数，以及总耗时。
- 命令日志区：左侧列出测试的每一步操作（比如
visit访问页面、get定位元素），绿色对勾表示成功，红色叉号表示失败。 - 应用预览区：右侧实时展示被测页面的状态，和浏览器页面一模一样。
- 辅助工具栏：右上角可以切换浏览器、调整视窗大小，还有个“元素定位器”按钮（长得像个瞄准镜）。
二、核心功能：让调试事半功倍
Test Runner的功能远不止“展示步骤”这么简单，这些隐藏技能你一定要会：
1. 时间穿梭：回到任意步骤的页面状态
这是Cypress最惊艳的功能之一。鼠标悬停在左侧命令日志的任意步骤上，右侧预览区会立刻切换到该步骤执行时的页面状态。比如定位元素失败时，悬停在get命令上，就能看到当时页面上这个元素到底长啥样，是不是被隐藏了、有没有加载出来。
再也不用靠“猜”来排查问题了，哪一步错了，直接“穿越回去”看现场。
2. 元素定位辅助：自动推荐最佳定位器
点击右上角的“元素定位器”按钮（瞄准镜图标），再点击页面上的任意元素，Test Runner会自动生成几个定位方式（比如data-cy、id、class），并告诉你哪个最稳定。
比如点击登录按钮，它可能推荐[data-cy=login-btn]或#login，避免你写出容易失效的定位器（比如依赖动态生成的class）。
3. 实时监控与热重载
写用例时，只要保存代码，Test Runner会自动重新运行受影响的用例，不用手动点击“重新运行”。比如改了登录用例的断言，保存后它会立刻重新跑一次，几秒钟就能看到结果，比传统工具省一半时间。
4. 详细日志与错误提示
测试失败时，命令日志会用红色标出错误步骤，并显示具体原因。比如“元素没找到”会告诉你选择器是什么，当时页面上有哪些元素匹配；“断言失败”会显示预期结果和实际结果，甚至会把页面截图附在日志里。
点击错误步骤，还能在浏览器控制台看到更详细的堆栈信息，帮你快速定位代码问题。
三、自定义配置：让Test Runner更顺手
Test Runner的一些默认行为可以调整，比如元素定位的优先级、视窗大小等：
1. 调整元素定位策略
默认情况下，Cypress优先用data-cy、data-test这类属性定位，如果你项目里习惯用id，可以在cypress/support/index.js里改配置：
// 让id的优先级高于class
Cypress.SelectorPlayground.defaults({
selectorPriority: ['id', 'class', 'attributes']
})
2. 扩展功能：安装插件
比如cypress-skip-and-only-ui插件，可以在Test Runner里直接点击按钮“跳过用例”或“只跑这个用例”，不用改代码。安装后每个用例后面会多出三个按钮，调试时特别方便。
安装步骤：
npm install cypress-skip-and-only-ui --save-dev
然后在cypress/support/index.js里引入：
require('cypress-skip-and-only-ui/support')
