記錄、重播及評估使用者流程

Jecelyn Yeen

Sofia Emelianova

觀看下方影片，看看全新的「錄音工具」面板 (預先發布版功能)。

完成這個教學課程，瞭解如何使用「錄音工具」面板錄製、重播和評估使用者流程。

注意：這是 Chrome 97 的預先發布版功能。我們的團隊正積極努力開發這項功能，也想聽聽你的意見回饋，以便進一步改善這項功能。

如要進一步瞭解如何分享已記錄的使用者流程、編輯和執行步驟，請參閱錄音工具功能參考資料。

注意：這項功能僅適用於 Chrome，不適用於 Chromium。

開啟「錄音工具」面板

1. 開啟開發人員工具。

2. 依序點選「更多選項」圖示   >「更多工具」 >「錄音工具」。

   

   或者，使用「Command」選單開啟「錄音工具」面板。

   

簡介

我們會使用這個咖啡訂購示範頁面。結帳是購物網站間的常見使用者流程。

在下一節中，我們會逐步說明如何使用「錄音工具」面板錄製、重播及稽核下列結帳程序：

1. 將咖啡加入購物車。
2. 將另一杯咖啡加入購物車。
3. 前往購物車頁面。
4. 從購物車中移除一杯咖啡。
5. 開始結帳程序。
6. 填寫付款資料。
7. 結帳。

記錄使用者流程

1. 開啟這個示範頁面。按一下「Start new Record」按鈕即可開始錄製。
2. 在「錄製名稱」文字方塊中輸入「咖啡結帳」。
   注意：「選取器屬性」文字方塊和「要記錄的選取器類型」核取方塊為選用項目。在本教學課程中，請保留預設值。詳情請參閱「瞭解選取器」一文。
3. 按一下「開始新的錄製內容」按鈕。已開始錄製。面板顯示「正在錄製...」，表示正在錄影。
4. 按一下「Cappuccino」，將商品加入購物車。
5. 按一下「Americano」將商品加入購物車。請注意，「錄音工具」會顯示您目前執行的步驟。
6. 前往購物車頁面，並將 Americano 從購物車中移除。
   注意：如要移除選單頁面上的「Americano」，請將滑鼠遊標懸停在「總計」按鈕上，然後在彈出式選單中，按一下「Americano」旁的 -。不過，在完成錄製後，你必須手動新增懸停步驟，因為錄音工具不會自動擷取懸停事件。
7. 點選「總金額：$19.00 美元」按鈕即可開始結帳程序。
8. 在付款詳情表單中，填寫「姓名」和「電子郵件」文字方塊，然後勾選「我想收到訂單的最新資訊和促銷訊息」核取方塊。
9. 按一下「提交」按鈕，完成結帳程序。
   注意：即使在結束錄影前，你也可以手動編輯步驟及新增斷言。
10. 在「錄音工具」面板中，按一下 「結束錄製」按鈕即可結束錄製。

重播使用者流程

記錄使用者流程後，您可以按一下「重播」重播按鈕，重播該流程。

您可以在頁面上看到使用者流程重播次數。重播進度也會顯示在「錄音工具」面板中。

如果在錄製期間誤按錯誤，或是某些功能無法正常運作，可以偵錯使用者流程：減緩重播速度、設定中斷點，並逐步執行。

重點：重播使用者流程錄製時，「錄音工具」會等到元素在可視區域顯示或可供點擊，或嘗試將元素自動捲動至可視區域，再重新播放對應的步驟。

模擬速度緩慢的網路

你可以調整重播設定，模擬網路連線速度緩慢的情況。舉例來說，您可以展開「重播設定」，接著在「網路」下拉式選單中選取「慢速 3G」。

日後可能會支援更多設定。將所需的重播設定分享給我們！

評估使用者流程

您可以點選「評估成效」按鈕，評估使用者流程的成效。舉例來說，結帳是購物網站的重要使用者流程。透過「錄音工具」面板，你可以記錄一次結帳流程，並定期進行評估。

按一下「測量效能」按鈕會觸發重播使用者流程，然後在「效能」面板中開啟效能追蹤記錄。

瞭解如何透過「效能」面板分析網頁的執行階段效能。您可以勾選「效能」面板中的「網站體驗指標」核取方塊，查看網站體驗指標指標，找出改善使用者體驗的契機。

編輯步驟

以下逐步說明基本選項，在錄製的工作流程中編輯步驟。

如需編輯選項的完整清單，請參閱功能參考資料中的編輯步驟。

展開步驟

展開各個步驟，即可查看動作詳情。舉例來說，您可以展開 [點擊元素 "Cappuccino"] 步驟。

上述步驟會顯示兩個選取器。詳情請參閱「瞭解錄製內容的選取器」。

重播使用者流程時，錄音工具會嘗試依序查詢其中一個選取器和選取器的元素。舉例來說，如果錄音工具成功使用第一個選取器查詢元素，就會略過第二個選取器並繼續下一個步驟。

從步驟中新增及移除選取器

您可以新增或移除任何選取器。舉例來說，您可以移除 selector #2，因為這樣只需要 aria/Cappuccino。將滑鼠遊標懸停在「選取器 #2」上，然後按一下 - 即可移除。

透過單一步驟編輯選取器

您也可以編輯選取器。舉例來說，如果您想選取「Mocha」而非「Cappuccino」，您可以：

1. 將選取器值改為「aria/Mocha」。

   

   或者，您也可以按一下「選取」 按鈕，然後按一下頁面上的「Mocha」。

2. 接著重播流程，應選取「Mocha」，而非「Cappuccino」。

3. 請嘗試編輯其他步驟屬性，例如 type、target、value 等。

新增及移除步驟

也可以新增及移除步驟。當您想新增額外步驟或移除不小心新增的步驟時，這個方法就能派上用場。您可以進行編輯，而不必重新記錄使用者流程：

1. 在要編輯的步驟上按一下滑鼠右鍵，或按一下旁邊的三點圖示 。

   

2. 您可以選取「移除步驟」將其移除。舉例來說，「Mocha」步驟之後的「Scroll」事件並非必要。

3. 比如說，可以等到 9 杯咖啡出現在網頁上，之後再執行任何步驟。在「Mocha」步驟選單中，選取「Add step before」。

4. 在「Assert Element」(斷言元素) 中編輯新步驟，包含下列詳細資料：

   • 類型：waitForElement
   • 選取器 #1：.cup
   • 運算子：== (按一下 [新增運算子] 按鈕)
   • 計數：9 (按一下「add count」按鈕)

5. 立即重播流程，查看變更。

後續步驟

恭喜，您已完成教學課程！

如要進一步瞭解與錄音工具相關的其他功能和工作流程 (例如匯入和匯出)，請參閱錄音工具參考資料。