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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

開啟「錄音工具」面板

  1. 開啟開發人員工具。

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

    選單內的錄音工具。

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

    在指令選單中顯示「錄音工具」指令。

簡介

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

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

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

記錄使用者流程

  1. 開啟這個示範頁面。按一下「Start new Record」按鈕即可開始錄製。
  2. 在「錄製名稱」文字方塊中輸入「咖啡結帳」。 開始新的錄音。
  3. 按一下「開始新的錄製內容」按鈕。已開始錄製。面板顯示「正在錄製...」，表示正在錄影。正在錄製。
  4. 按一下「Cappuccino」，將商品加入購物車。
  5. 按一下「Americano」將商品加入購物車。請注意，「錄音工具」會顯示您目前執行的步驟。「錄音工具」面板中的步驟。
  6. 前往購物車頁面，並將 Americano 從購物車中移除。
  7. 點選「總金額：$19.00 美元」按鈕即可開始結帳程序。
  8. 在付款詳情表單中，填寫「姓名」和「電子郵件」文字方塊，然後勾選「我想收到訂單的最新資訊和促銷訊息」核取方塊。 付款詳情表單。
  9. 按一下「提交」按鈕，完成結帳程序。
  10. 在「錄音工具」面板中，按一下 結束錄製功能。「結束錄製」按鈕即可結束錄製。

重播使用者流程

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

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

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

模擬速度緩慢的網路

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

重播設定。

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

評估使用者流程

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

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

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

效能面板。

編輯步驟

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

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

展開步驟

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

在錄音工具面板中，Cappuccino 元素已展開，顯示類型、目標、選取器、偏移 X 和位移 Y。

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

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

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

您可以新增或移除任何選取器。舉例來說，您可以移除 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」已新增名為 Assert Element 的新步驟，現在可以進行編輯。。

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

    • 類型：waitForElement
    • 選取器 #1：.cup
    • 運算子：== (按一下 [新增運算子] 按鈕)
    • 計數：9 (按一下「add count」按鈕) 咖啡結帳的新步驟已根據上述詳細資料更新。

  5. 再玩一次。立即重播流程，查看變更。

後續步驟

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

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