請觀看下方影片,快速瞭解全新的「錄音工具」面板 (預先發布版功能)。
完成本教學課程,瞭解如何使用「錄音工具」面板錄製、重播及評估使用者流程。
如要進一步瞭解如何分享記錄的使用者流程、編輯這些流程和相關步驟,請參閱錄音工具功能參考資料。
開啟「錄音工具」面板
簡介
我們會使用這個咖啡訂購示範網頁。結帳是一般使用者在購物網站上的流程。
在後續章節中,我們會逐步說明如何透過「Recorder」面板記錄、重播及稽核下列結帳流程:
- 將咖啡加入購物車。
- 將另一杯咖啡加入購物車。
- 前往購物車頁面。
- 從購物車中取出一杯咖啡。
- 啟動結帳程序。
- 填寫付款資料。
- 結帳。
記錄使用者流程
- 開啟這個示範頁面。按一下「Start new record」按鈕開始錄製。
- 在「錄製名稱」文字方塊中輸入「咖啡結帳」。
詳情請參閱「瞭解選取器」一文。 1. 按一下「Start a new record」按鈕。已開始錄製。面板顯示「Recording...」,表示正在錄影。 1. 點按「Cappuccino」即可將商品加入購物車。 1. 按一下「Americano」即可將該商品加入購物車。請注意,「錄音工具」會顯示您到目前為止執行的步驟。 1. 前往購物車頁面,將「Americano」從購物車中移除。
1. 按一下「總計:$19.00」按鈕,啟動結帳程序。 1. 在付款詳情表單中,填寫「姓名」和「電子郵件」文字方塊,並勾選「我想收到訂單更新和促銷訊息」核取方塊。 1. 按一下「提交」按鈕完成結帳程序。 1. 在「錄音工具」面板中,按一下「結束錄製」圖示 即可結束錄製。重播使用者流程
記錄使用者流程後,您可以按一下「重播」按鈕重播。
您可以在頁面上看到使用者流程重播。重播進度也會顯示在「Recorder」面板中。
如果您在錄製時誤點,或者發生故障,可以偵錯使用者流程:減緩重播速度、設定中斷點,並逐步執行。
模擬速度緩慢的網路
調整重播設定即可模擬速度緩慢的網路連線。舉例來說,展開「重播設定」,然後在「網路」下拉式選單中選取「慢 3G」。
未來可能會支援更多設定。將您想要的重播設定告訴我們!
評估使用者流程
如要評估使用者流程的成效,請按一下「評估成效」按鈕。舉例來說,結帳是購物網站的重要使用者流程。透過「錄音工具」面板,您可以記錄一次結帳流程,並定期評估。
按一下「評估效能」按鈕會先觸發使用者流程的重播,然後在「效能」面板中開啟效能追蹤記錄。
瞭解如何透過「效能」面板分析網頁的執行階段效能。您可以在「成效」面板中啟用網站體驗指標核取方塊,然後查看網站體驗指標指標,找出改善使用者體驗的機會。
編輯步驟
以下將逐步介紹編輯已記錄工作流程中各個步驟的基本選項。
如需完整的編輯選項清單,請參閱功能參考資料中的「編輯步驟」一節。
展開步驟
展開每個步驟即可查看動作詳情。例如,展開「點擊元素 Cappuccino」步驟。
上述步驟會顯示兩個選取器。詳情請參閱「瞭解錄製內容的選取器」。
重播使用者流程時,Recorder 會嘗試依照序列的其中一個選取器查詢元素。舉例來說,如果 Recorder 成功使用第一個選取器查詢元素,就會略過第二個選取器並繼續下一個步驟。
從步驟中新增及移除選取器
您可以新增或移除任何選取器。舉例來說,您可以移除選取器 2,因為在這種情況中只需使用 aria/Cappuccino
。將滑鼠遊標懸停在選取器 2 上,然後按一下 -
即可移除。
逐一編輯選取器
您也可以編輯 selector。舉例來說,如要選取「Mocha」而非「Cappuccino」,您可以採取下列做法:
請將選取器值改為「aria/Mocha」。
或者,也可以按一下「選取」按鈕 ,然後按一下頁面上的「Mocha」。
現在重播流程,應選取「Mocha」,而非「Cappuccino」。
請嘗試編輯其他步驟屬性,例如 type、target、value 等。
新增及移除步驟
您也可以選擇新增及移除步驟。如果您想新增額外步驟,或是移除不小心加入的步驟,這個方法就能派上用場。您可以直接編輯使用者流程,不必重新記錄使用者流程:
在要編輯的步驟上按一下滑鼠右鍵,或是按一下旁邊的 三點圖示。
您可以選取「移除步驟」將其移除。舉例來說,您不需要在「Mocha」步驟後使用 Scroll 事件。
假設您要等到 9 杯咖啡出現在頁面上,再執行任何步驟。在「Mocha」步驟選單中,選取「在前面新增步驟」。
在「Assert Element」中編輯新步驟,加入下列詳細資料:
- 類型:waitForElement
- 選取器 #1:.cup
- 運算子:== (按一下 [新增運算子] 按鈕)
- 計數:9 (按一下「add count」按鈕)
立即重播流程來查看變更。
後續步驟
恭喜,您已完成教學課程!
如要進一步瞭解與錄音工具相關的其他功能和工作流程 (例如匯入和匯出),請參閱錄音工具功能參考資料。