使用 Chrome DevTools 錄製器建立 Nightwatch 測試

Chrome DevTools 最近推出了一個 錄製器面板，讓使用者可以錄製他們的互動流程，並將其匯出為 JSON 或其他格式。

若要將這些使用者流程轉換為 Nightwatch 測試腳本，請依照下列步驟操作

以下章節將協助您開始使用 Chrome Devtools 錄製器，並將使用者流程匯出至 Nightwatch。

什麼是 Chrome DevTools 錄製器？

Chrome DevTools 錄製器是一種工具，可讓您直接在瀏覽器中錄製和重播測試動作，並將它們匯出為 JSON (或在 e2e 測試中匯出)，並測量測試效能。如果您想了解更多關於 DevTools 錄製器的資訊，您可以在這裡閱讀所有相關資訊。

我們將使用 Coffee Cart 網站來錄製我們的第一個測試，並將其匯出為 Nightwatch 測試腳本。

使用 Chrome DevTools 錄製器錄製測試

  • 開啟 Coffee Cart 網站。我們將以此作為示範頁面來錄製我們的第一個測試。

  • 開啟 Chrome DevTools (您可以右鍵點擊網頁並點擊檢查)

  • 現在，點擊 錄製器 面板

    Recorder-panel


  • 點擊 開始新的錄製 按鈕以開始錄製測試

    Start New Recording



  • 輸入您的錄製名稱，然後點擊底部的 開始新的錄製 按鈕

  • 在網站上隨意操作，嘗試新增一些咖啡，然後點擊購物車。按下總計，填寫付款詳細資訊，然後點擊提交按鈕。

    User Action Gif


請記住：錄製器將會記錄與網頁的每次互動，例如切換網頁、點擊按鈕、雙擊等等。

  • 完成錄製後，點擊錄製器中的停止錄製按鈕。

錄製完成後，我們第一個自動化錄製腳本即可執行。

我們有許多選項可供選擇

  1. 重播錄製 - 您可以播放所錄製的內容
  2. 使用效能面板測量效能 - 它會重播測試，並在 DevTools 中的 錄製器 面板旁邊開啟 效能洞察 面板。我們可以使用我們錄製的測試來分析網站的效能，以及載入和轉譯資源所花費的時間。
  3. 編輯並新增步驟 - 我們可以手動編輯我們的測試步驟。例如，如果我們要變更選擇器，我們有一個選擇器工具或新增逾時，而無需變更程式碼。

    Chrome DevTools Recorder



匯出錄製的測試

您也可以立即將其匯出為 Nightwatch 測試腳本。您可以使用兩種方式將錄製匯出為 Nightwatch 測試腳本

1. 使用 Nightwatch 錄製器擴充功能

  • 從 Chrome Webstore 下載擴充功能。
  • 安裝擴充功能並在 DevTools 中開啟 錄製器面板
  • 點擊您儲存的錄製，然後點擊匯出按鈕（向下箭頭按鈕）
  • 您將看到 匯出為 Nightwatch 測試腳本 選項

    Export Nightwatch Test


- 當您點擊該選項時，您已成功將您目前的錄製匯出至 Nightwatch 測試。- 現在您可以使用 Nightwatch 執行您的第一個測試


Run first test




2. 使用 @nightwatch/chrome-recorder 程式庫

您可以使用下列 CLI 命令將 JSON 錄製轉換為 Nightwatch 測試。

npm install @nightwatch/chrome-recorder

npx @nightwatch/chrome-recorder

該工具會要求您提供 Devtools 錄製位置，並將結果輸出至指定的目錄。

CLI question image

該工具的輸出將寫入 "Nightwatch" 資料夾。一旦我們有了測試檔案，我們就可以使用 CLI 執行 Nightwatch 測試。

發現問題？請告訴我們。

如果您發現任何產生非預期結果的情況或有任何不對勁的地方，請告訴我們，以便我們可以清理它們。

參考