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. 檢查您正在互動的元素的狀態，以了解其互動性是否受到任何方式的阻礙

除錯愉快！