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

Jecelyn Yeen

Sofia Emelianova

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

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

注意：這是 Chrome 97 的預先發布版功能。我們的團隊正積極開發這項功能，歡迎提供意見，協助我們進一步改善。

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

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

開啟「錄音工具」面板

1. 開啟開發人員工具。

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

   

   或者，也可以使用指令選單開啟錄影器面板。

   

簡介

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

在後續章節中，我們會逐步說明如何使用「錄製器」面板，記錄、重播及稽核下列結帳流程：

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

記錄使用者流程

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

重播使用者流程

錄製完使用者流程後，只要按一下 「Replay」按鈕，即可重播。

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

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

重點：重播使用者流程錄製內容時，Recorder 會等待元素在檢視區中顯示或可點選，或嘗試自動將元素捲動至檢視區，然後再重播對應步驟。

模擬網路速度緩慢

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

日後可能會支援更多設定。請與我們分享你想要的重播設定！

評估使用者流程

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

按一下「Measure performance」按鈕，系統會先觸發使用者流程的回放作業，然後在「Performance」面板中開啟效能追蹤記錄。

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

編輯步驟

接下來，我們將介紹編輯錄製工作流程內步驟的基本選項。

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

展開步驟

展開每個步驟即可查看操作的詳細資料。舉例來說，展開「點選元素 'Cappuccino'」步驟。

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

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

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

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

透過單一步驟編輯選取器

您也可以編輯selector。舉例來說，如果想選取「摩卡」而非「卡布奇諾」，可以：

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

   

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

2. 現在重播流程，系統應會選取 Mocha，而非 Cappuccino。

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

新增及移除步驟

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

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

   

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

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

4. 在「Assert Element」中，編輯新步驟的詳細資料：

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

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

後續步驟

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

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