DOM 历史记录

概述

此功能将帮助您以视觉方式重现测试的执行过程。如果启用了跟踪模式，Nightwatch 会在每一步之后捕获 HTML DOM 快照。这些 HTML DOM 快照可以直接在 HTML 报告中查看。您甚至可以在执行特定步骤时检查元素。这将帮助您更好地调试测试。

在本指南中，您将学习

1. 如何启用 DOM 历史记录
2. 如何查看 DOM 历史记录
3. 如何使用 DOM 历史记录进行调试

启用 DOM 历史记录

启用 DOM 历史记录非常简单。只需使用 `--trace` 标志运行 Nightwatch 测试。

例如

npx nightwatch --trace

或

npx nightwatch <path to test file/folder> --trace

当您使用 `--trace` 标志运行测试时，Nightwatch 会在每个可能修改应用程序的步骤之后捕获被测应用程序的 DOM 快照。不会为无法修改应用程序行为的步骤捕获快照。例如，断言无法修改底层 HTML，因此不会为此类步骤捕获快照。

查看 DOM 历史记录

在上一节中，您学习了如何启用 Nightwatch 捕获 HTML DOM 快照历史记录。为了调试，主要部分是查看和分析测试执行不同步骤的 DOM 快照历史记录。

步骤

1. 测试执行完成后，只需通过复制粘贴报告文件路径在浏览器中打开报告。
2. 从左侧面板中选择一个失败的测试/钩子。
3. 选择测试/钩子后，步骤将显示在“测试详细信息”选项卡下。
4. 单击一个步骤，查看该步骤执行后 DOM 快照的外观。

单击不同的步骤将更新右侧面板中的 HTML DOM 快照，以便可以使用开发者工具对其进行检查。

使用 DOM 历史记录进行调试

让我们了解一下这在调试测试错误时如何有用。当测试出错时，报告将准确地指出测试中哪个步骤失败了。为了调试，我们建议您检查失败的步骤以及之前的步骤。

由于 HTML 快照嵌入到浏览器本身的报告中，因此您可以轻松地使用开发者工具检查快照，如下所示

检查先前步骤中的 DOM 快照可以帮助调试问题。如果先前的快照与您的预期不同，则可能需要修改先前的步骤。如果先前的快照看起来正确，则可以

1. 验证所使用的选择器是否与 DOM 快照一致
2. 检查您正在交互的元素的状态，以了解其可交互性是否受到任何阻碍

祝您调试愉快！