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

Jecelyn Yeen

Sofia Emelianova

請觀看以下影片，瞭解全新的錄音工具面板 (預覽功能)。

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

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

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

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

開啟「錄音工具」面板

1. 開啟開發人員工具。

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

   

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

   

簡介

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

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

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

記錄使用者流程

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

重播使用者流程

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

您可以在頁面上看到使用者流程重播畫面。重播進度也會顯示在「錄影器」面板中。

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

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

模擬網路速度緩慢

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

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

評估使用者流程

如要評估使用者流程的成效，請按一下「評估成效」按鈕。舉例來說，結帳是購物網站的重要使用者流程。您可以使用「錄製器」面板，一次記錄結帳流程，並定期評估。

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

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

編輯步驟

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

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

展開步驟

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

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

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

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

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

編輯步驟中的選取器

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

1. 請改為將選取器值編輯為 aria/Mocha。

   

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

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

3. 嘗試編輯其他步驟屬性，例如類型、目標、值等。

新增及移除步驟

您也可以選擇新增或移除步驟。這項功能可讓您新增額外步驟，或移除不小心新增的步驟。您可以編輯使用者流程，而無需重新錄製：

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

   

2. 您可以選取「移除步驟」來移除步驟。舉例來說，您不必在 Mocha 步驟後加入 Scroll 事件。

3. 舉例來說，您想等到 9 杯咖啡顯示在頁面上後，再執行任何步驟。在 Mocha 步驟選單中，選取「Add step before」。

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

   • type：waitForElement
   • 選取器 #1：.cup
   • 運算子：== (按一下「add operator」按鈕)
   • count：9 (按一下「add count」按鈕)

5. 現在重播流程，即可查看變更內容。

後續步驟

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

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