參閱 Chrome 開發人員工具錄音工具面板的全方位功能參考資料,瞭解如何分享使用者流程、編輯流程和相關步驟。
如要瞭解「錄音工具」面板的使用基本概念,請參閱「記錄、重播及評估使用者流程」。
瞭解和自訂快速鍵
使用快速鍵快速瀏覽錄音工具。如需預設快速鍵的清單,請參閱錄音工具面板鍵盤快速鍵。
如要開啟列出所有快速鍵的提示,請在「Recorder」中點選右上角的「help」。
如何自訂「錄音工具」快速鍵:
- 開啟 「設定」 >「捷徑」。
- 向下捲動至「錄音工具」部分。
- 按照「自訂捷徑」一文的步驟操作。
編輯使用者流程
「Recorder」面板頂端會顯示下列選項:
- 新增錄製內容。按一下「+」+圖示新增錄音檔。
- 查看所有錄製內容。下拉式選單中會顯示已儲存的錄音檔清單。選取「[數量] 個錄製內容」選項,即可展開及管理已儲存的錄音檔清單。
匯出錄音檔。如要進一步自訂指令碼或分享指令碼以便回報錯誤,您可以將使用者流程匯出為下列其中一種格式:
- JSON 檔案。
- @puppeteer/replay 指令碼。
- Puppeteer 指令碼。
- Puppeteer (包括 Lighthouse 分析)。
如要進一步瞭解格式,請參閱「匯出使用者流程」。
匯入錄音檔。僅限 JSON 格式。
刪除錄音檔。刪除所選錄音。
您也可以按一下錄音檔旁邊的編輯按鈕 ,編輯錄音檔的名稱。
共用使用者流程
您可以在錄音工具中匯出及匯入使用者流程。這在回報錯誤時相當實用,因為您可以分享重現錯誤的步驟的確切記錄。您還可以使用外部程式庫匯出及重播檔案。
匯出使用者流程
如何匯出使用者流程:
- 開啟要匯出的使用者流程。
- 按一下「Recorder」面板頂端的 「Export」。
- 從下拉式清單中選取下列任一格式:
- JSON 檔案。將錄製內容下載為 JSON 檔案。
- @puppeteer/replay。將錄製內容下載為 Puppeteer Replay 指令碼。
- Puppeteer。將錄製內容下載為 Puppeteer 指令碼。
- Puppeteer (包括 Lighthouse 分析)。將錄製內容下載為 Puppeteer 指令碼,並搭配內嵌的 Lighthouse 分析。
- 錄音工具的匯出擴充功能提供的一或多個選項。
- 儲存檔案。
您可以利用各個預設匯出選項執行下列操作:
- JSON。編輯人類可讀的 JSON 物件,然後將 JSON 檔案import回 Recorder。
- @puppeteer/replay。使用 Puppeteer Replay 程式庫重播指令碼。以 @puppeteer/replay 指令碼匯出時,步驟仍會保持 JSON 物件。如果您想與 CI/CD 管道整合,但仍保有以 JSON 格式編輯這些步驟,之後轉換並匯入回錄音工具,就很適合使用這個選項。
- Puppeteer 指令碼。使用 Puppeteer 重播指令碼。系統會將這些步驟轉換成 JavaScript,因此您可以進行更精細的自訂,例如循環執行相關步驟。不過請注意,您無法將這段指令碼重新匯入至錄音工具。
Puppeteer (包括 Lighthouse 分析)。這個匯出選項與舊版相同,但包含會產生 Lighthouse 分析的程式碼。
執行指令碼,並查看
flow.report.html
檔案中的輸出內容:# npm i puppeteer lighthouse node your_export.js
安裝擴充功能,以自訂格式匯出
請參閱「錄音工具擴充功能」。
匯入使用者流程
如何匯入使用者流程:
- 按一下「Recorder」面板頂端的「Import」 按鈕。
- 選取含有已記錄使用者流程的 JSON 檔案。
- 按一下 「Replay」按鈕,執行匯入的使用者流程。
使用外部程式庫重播
Puppeteer Replay 是由 Chrome 開發人員工具團隊維護的開放原始碼程式庫。以 Puppeteer 為基礎。這是指令列工具,您可以用它重播 JSON 檔案。
除此之外,您可以透過下列第三方程式庫轉換及重播 JSON 檔案。
將 JSON 使用者流程轉換為自訂指令碼:
- Cypress Chrome 錄音工具。您可以使用此指令碼將使用者流程 JSON 檔案轉換為 Cypress 測試指令碼。請觀看這個示範影片,瞭解實際運作方式。
- Nightwatch Chrome 錄音工具。可用來將使用者流程 JSON 檔案轉換為 Nightwatch 測試指令碼。
- CodeceptJS Chrome 錄音工具。可用來將使用者流程 JSON 檔案轉換為 CodeceptJS 測試指令碼。
重播 JSON 使用者流程:
- 使用 Testcafe 重播。您可以使用 TestCafe 重播使用者流程 JSON 檔案,並產生這些記錄的測試報告。
- 透過 Sauce Labs 重玩。您可以在 Sauce Labs 中使用 saucectl 重播 JSON 檔案。
偵錯使用者流程
就像任何程式碼一樣,有時您必須對記錄的使用者流程進行偵錯。
為協助您進行偵錯,Recorder 面板可讓您降低重播速度、設定中斷點、逐步執行執行作業,以及按照步驟同時檢查多種格式的程式碼。
請放慢重播速度
根據預設,錄音工具會盡快重播使用者流程。如要瞭解錄音檔會發生什麼事,你可以放慢重播速度:
- 開啟 「重播」下拉式選單。
- 選擇下列任一重播速度選項:
- 一般 (預設)
- 慢
- 非常慢
- 極慢
檢查程式碼
如要檢查各種格式的使用者流程程式碼:
- 在「錄音工具」面板中開啟錄製內容。
- 按一下步驟清單右上角的「Show code」(顯示程式碼)。
- 錄音工具並排顯示步驟和代碼。
- 當您將滑鼠遊標懸停在步驟上時,錄音工具會以任何格式醒目顯示其程式碼,包括擴充功能提供的程式碼。
展開格式下拉式清單,選取用於匯出使用者流程的格式。
這可以是三種預設格式之一:JSON、@puppeteer/replay、Puppeteer 指令碼或擴充功能提供的格式。
接著請編輯步驟參數和值,繼續對錄製進行偵錯。程式碼檢視無法編輯,但當您變更左側步驟時,程式碼檢視畫面會隨之更新。
設定中斷點並逐步執行
如要設定中斷點並逐步執行,請按照下列步驟操作:
- 在錄音檔中,將滑鼠遊標懸停在任何步驟旁的 圓圈上。圓圈會變成 中斷點圖示。
- 按一下 中斷點圖示,然後重播錄製內容。執行作業會在中斷點暫停。
- 如要逐步執行這項作業,請按一下「Recorder」面板頂端動作列中的 「Execute one step」按鈕。
- 如要停止重播,請按一下 「取消重播」。
編輯步驟
如要編輯錄音檔中的任何步驟,請在記錄期間和之後,按一下旁邊的「」按鈕。
新增步驟
有時候,您可能需要手動新增步驟。舉例來說,錄音工具不會自動擷取 hover
事件,因為這類事件對錄製的影響不利,且並非所有這類事件都實用。但是,下拉式選單等 UI 元素只能在 hover
上顯示。您可以在依附於這類元素的使用者流程中,手動新增 hover
步驟。
若要手動新增步驟:
- 開啟這個示範頁面,並開始新的錄製內容。
- 將滑鼠遊標懸停在可視區域內的元素上。畫面上會彈出動作選單。
- 從選單中選擇所需動作,並結束錄音。錄音工具只會擷取點擊事件。
- 按一下「重播」圖示 ,即可嘗試重播錄製內容。逾時後,重播就會失敗,因為 Recorder 無法存取選單中的元素。
- 按一下「Click」步驟旁的 三點按鈕,然後選取「Add step before」(先加入步驟)。
- 展開新步驟。它預設為
waitForElement
類型。按一下type
旁邊的值,然後選取hover
。 - 接著,為新步驟設定合適的選取器。按一下 「選取」,然後在彈出式選單外的
Hover over me!
元素上按一下所需區域。選取器設定為#clickable
。 - 請嘗試重新播放錄製內容。新增懸停步驟後,Recorder 即可成功重播流程。
新增斷言
記錄期間,您可以斷言,例如 HTML 屬性和 JavaScript 屬性。如何新增斷言:
- 開始錄製,例如這個示範頁面。
按一下「新增斷言」。
Recorder 會建立可設定的
waitForElement
步驟。為這個步驟指定選取器。
設定步驟,但不要變更其
waitForElement
類型。舉例來說,您可以指定:- HTML 屬性:按一下「新增屬性」,然後輸入本頁元素要使用的屬性名稱和值。例如:
data-test: <value>
。 - JavaScript 屬性。按一下「新增屬性」,並以 JSON 格式輸入屬性的名稱和值。例如:
{".innerText":"<text>"}
。 - 其他步驟屬性。例如
visible: true
。
- HTML 屬性:按一下「新增屬性」,然後輸入本頁元素要使用的屬性名稱和值。例如:
繼續記錄其餘的使用者流程,然後停止記錄。
按一下「Replay」圖示 。如果斷言失敗,錄音工具會在逾時後顯示錯誤。
請觀看下方影片,瞭解這個工作流程的實際運作情形。
複製步驟
您不必匯出整個使用者流程,只要將一個步驟複製到剪貼簿即可:
- 在要複製的步驟上按一下滑鼠右鍵,或是按一下旁邊的 三點圖示。
- 在下拉式選單中選取其中一個「複製為...」選項。
您可以複製多種格式的步驟,包括 JSON、Puppeteer、@puppeteer/replay,以及擴充功能提供的步驟。
移除步驟
如要移除不小心記錄的步驟,請在步驟上按一下滑鼠右鍵,或是按一下旁邊的 三點圖示,然後選取「移除步驟」。
此外,錄音工具會自動在每次開始錄製時新增兩個不同的步驟:
- 設定可視區域。以及控制可視區域的尺寸、縮放及其他屬性。
- 導航。設定網址,並在每次重播時自動重新整理頁面。
如要在不重新載入網頁的情況下執行網頁內自動化動作,請按照上述步驟移除導覽步驟。
設定步驟
如要設定步驟,請按照下列指示操作:
指定類型:
click
、doubleClick
、hover
、(輸入)change
、keyUp
、keyDown
、scroll
、close
、navigate
(非頁面)、waitForElement
、waitForExpression
或setViewport
。其他屬性取決於
type
值。在
type
下方指定必要屬性。按一下對應的按鈕,新增並指定類型專屬的屬性。
如需可用屬性清單,請參閱「步驟屬性」。
如要移除選用屬性,請按一下該屬性旁邊的 「Remove」(移除) 按鈕。
如要在陣列屬性中新增或移除元素,請按一下該元素旁邊的「+」+或「-」+按鈕。
步驟屬性
每個步驟都可以包含下列選用屬性:
target
:Chrome 開發人員工具通訊協定 (CDP) 目標的網址,預設的main
關鍵字會參照目前的網頁。- 目前只能是單一
navigation
事件的assertedEvents
大多數步驟類型可用的其他常見屬性如下:
frame
:一種從零開始的索引陣列,用於識別可巢狀結構的 iframe。例如,您可以將主要目標的第二個 (1) iframe 中第一個 (0) iframe 視為[1, 0]
。timeout
:執行步驟前要等待的毫秒數。詳情請參閱調整步數的逾時設定。selectors
:選取器陣列。詳情請參閱「瞭解選取器」一文。
類型專屬的屬性包括:
類型 | 屬性 | 必要 | 說明 |
click doubleClick |
offsetX offsetY |
根據元素內容方塊的左上角 (以像素為單位) | |
click doubleClick |
button |
指標按鈕:主要 | 輔助 | 第二 | 返回 | 快轉 | |
change |
value |
最終值 | |
keyDown keyUp |
key |
金鑰名稱 | |
scroll |
x y |
絕對捲動的 x 和 y 位置 (以像素為單位),預設值為 0 | |
navigate |
url |
目標網址 | |
waitForElement |
operator |
>= | == (預設) | <= | |
waitForElement |
count |
由選取器識別的元素數量 | |
waitForElement |
attributes |
HTML 屬性和其值 | |
waitForElement |
properties |
JavaScript 屬性及其值 (JSON 格式) | |
waitForElement |
visible |
布林值。如果元素位於 DOM 且可見 (不含 display: none 或 visibility: hidden ) 中,則為「true」 |
|
waitForElement waitForExpression |
asserted events |
目前只有「type: navigation 」可以指定標題和網址 |
|
waitForElement waitForExpression |
timeout |
等待時間上限 (毫秒) | |
waitForExpression |
expression |
解析為 true 的 JavaScript 運算式 | |
setViewport |
width height |
可視區域的寬度和高度 (以像素為單位) | |
setViewport |
deviceScaleFactor |
與裝置像素比率 (DPR) 類似,預設 1 | |
setViewport |
isMobile hasTouch isLandscape |
布林值標記,用於指定是否要: |
有兩種屬性會導致重播內容暫停:
waitForElement
屬性會讓步驟等待該步驟出現 (或不存在) 由選取器識別的多個元素。例如,下面步驟會等待符合.my-class
選取器的頁面元素少於三個。"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
waitForExpression
屬性會讓步驟等待 JavaScript 運算式解析為 true。舉例來說,下列步驟會暫停兩秒,然後解析為 true,以便繼續重播。"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
調整步數的逾時設定
如果網頁含有緩慢的網路要求或動畫冗長,則當步驟超過預設逾時 (5000
毫秒) 時,重播可能會失敗。
如要避免這個問題,您可以一次調整每個步驟的預設逾時時間,或為特定步驟設定不同的逾時。特定步驟的逾時設定會覆寫預設值。
一次調整每個步驟的預設逾時設定:
如何覆寫特定步驟的預設逾時設定:
展開步驟,然後按一下「新增逾時」。
按一下
timeout: <value>
並設定值 (以毫秒為單位)。
如要移除步驟覆寫的逾時覆寫設定,請按一下該步驟旁邊的「刪除」按鈕 。
瞭解選取器
開始錄製新內容時,您可以設定下列項目:
- 在「選取器屬性」文字方塊中,輸入自訂測試屬性。Recorder 會使用這個屬性偵測選取器,而不是常見測試屬性清單。
在「要記錄的選取器類型」一組核取方塊中,選擇要自動偵測的選取器類型:
- CSS。語法選取器。
- 「ARIA」。語意選取器。
- 「文字」。不重複文字最短的選取器 (如有)。
- 「XPath」。XPath使用 XML 路徑語言的選取器。
- 「Pierce」。與 CSS 供應商類似的選取器,但可以阻塞 shadow DOM。
常見的測試選取器
如果是簡單的網頁,id
屬性和 CSS class
屬性就足以讓錄音工具偵測選取器。不過,不一定都是這樣,原因如下:
- 您的網頁可能會使用變動的動態類別或 ID。
- 由於程式碼或架構變更,選取器可能會無法運作。
舉例來說,如果應用程式採用新式 JavaScript 架構 (例如 React、Angular、Vue) 和 CSS 架構,系統可能會自動產生 CSS class
值。
在這種情況下,您可以使用 data-*
屬性來建立更具彈性的測試。目前已有部分常見的 data-*
選取器用於自動化作業,錄音工具也支援這些格式。
如果您的網站定義了下列常見的測試選取器,錄音工具會先自動偵測並使用這些選取器:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
舉例來說,請檢查這個示範頁面的「Cappuccino」元素,並查看測試屬性:
記下「Cappuccino」的點擊記錄,然後展開記錄中的對應步驟,然後查看偵測到的選取器:
自訂錄製內容的選取器
如果常見的測試選取器不符合您的需求,您可以自訂錄製工具的選取器。
舉例來說,這個示範頁面使用 data-automate
屬性做為選取器。開始新的錄製作業,並輸入 data-automate
做為選取器屬性。
填入電子郵件地址,然後觀察選取器值 ([data-automate=email-address]
)。
選取器優先順序
錄音工具會依據您指定了自訂 CSS 選取器屬性,按照以下順序尋找選取器:
- 視需要指定以下項目:
- 包含自訂 CSS 屬性的 CSS 選取器。
- XPath 選取器。
- ARIA 選取器 (如有找到)。
- 找到不重複文字時,含不重複文字的選取器。
- 如未指定:
- ARIA 選取器 (如有找到)。
- 優先順序如下的 CSS 選取器:
- 最常用於測試的屬性:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- ID 屬性,例如
<div id="some_ID">
。 - 一般 CSS 選取器。
- 最常用於測試的屬性:
- XPath 選取器。
- 零件選取器。
- 找到不重複文字時,含不重複文字的選取器。
可能有多個一般 CSS、XPath 和 Pierce 選取器。錄音工具會擷取: