功能參考資料

參閱這份 Chrome 開發人員工具「Recorder」面板提供的完整功能參考資料，探索分享使用者流程、編輯流程和執行步驟的方式。

如要瞭解使用「錄音工具」面板的基本概念，請參閱「記錄、重播及評估使用者流程」一文。

瞭解及自訂快速鍵

使用快速鍵加快錄音工具的瀏覽速度。如需預設快速鍵的清單，請參閱「錄音工具面板鍵盤快速鍵」一文。

如要開啟列出所有快速鍵的提示，請在「錄音工具」中按一下右上角的「說明」。

如何自訂「錄音工具」快速鍵：

1. 開啟 設定 >捷徑。
2. 向下捲動至「錄音工具」部分。
3. 請按照「自訂捷徑」中的步驟操作。

編輯使用者流程

「錄音工具」面板頂端會顯示下列選項：

1. 新增錄音檔。按一下「+」圖示即可新增錄音。
2. 查看所有錄製內容。下拉式選單中會顯示已儲存的錄音檔清單。選取「[number] record(s)」選項，即可展開及管理已儲存的錄音檔清單。

3. 匯出錄音檔。如要進一步自訂指令碼，或分享指令碼以便使用錯誤報告，請以下列其中一種格式匯出使用者流程：

   • JSON 檔案
   • @puppeteer/replay 指令碼。
   • Puppeteer 指令碼。
   • Puppeteer (包含 Lighthouse 分析)。

   如要進一步瞭解格式，請參閱「匯出使用者流程」。

4. 匯入錄音檔。僅限 JSON 格式。

5. 刪除錄音檔。刪除所選錄音檔。

按一下錄音檔旁的編輯按鈕 ，也可以編輯錄音檔的名稱。

分享使用者流程

您可以在錄音工具中匯出及匯入使用者流程，這有助於回報錯誤，因為您可以分享重現錯誤的步驟記錄。你也可以匯出檔案，並透過外部程式庫重播。

匯出使用者流程

如何匯出使用者流程：

1. 開啟要匯出的使用者流程。
2. 按一下「錄音工具」面板頂端的「匯出」圖示 。
3. 從下拉式清單中選取以下其中一種格式：
   • JSON 檔案。將記錄下載為 JSON 檔案。
   • @puppeteer/replay.將錄製內容下載為 Puppeteer Replay 指令碼。
   • Puppeteer。將錄製內容下載為 Puppeteer 指令碼。
   • Puppeteer (包括 Lighthouse 分析)：將錄製內容下載為 Puppeteer 指令碼，並包含嵌入式 Lighthouse 分析。
   • 錄音工具匯出擴充功能提供的一或多個選項。
4. 儲存檔案。

您可使用各個預設匯出選項執行下列動作：

• JSON。編輯使用者可理解的 JSON 物件，然後將 JSON 檔案匯入回 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
  

  

安裝擴充功能，以自訂格式匯出

請參閱錄音工具擴充功能。

匯入使用者流程

如何匯入使用者流程：

1. 按一下「錄音工具」面板頂端的「匯入」按鈕 。
2. 選取含有記錄使用者流程的 JSON 檔案。
3. 按一下 「Replay」按鈕執行已匯入的使用者流程。

透過外部程式庫重播

Puppeteer Replay 是由 Chrome 開發人員工具團隊維護的開放原始碼程式庫。這項服務是以 Puppeteer 為基礎。這是一種指令列工具，可用來重播 JSON 檔案。

此外，您可以使用下列第三方程式庫轉換及重播 JSON 檔案。

將 JSON 使用者流程轉換為自訂指令碼：

• Cypress Chrome 錄音工具。可用於將使用者流程 JSON 檔案轉換為 Cypress 測試指令碼。請觀看這個示範，瞭解這項功能的實際運作情形。
• Chrome Music 錄音工具。可用來將使用者流程 JSON 檔案轉換為 Nightwatch 測試指令碼。
• CodeceptJS Chrome 錄音工具。可用於將使用者流程 JSON 檔案轉換為 CodeceptJS 測試指令碼。

重播 JSON 使用者流程：

• 再執行一次測試。您可以使用 TestCafe 重播使用者流程 JSON 檔案，並產生這些記錄的測試報告。
• 重播 Sauce Labs：您可以在 Sauce Labs 上使用 saucectl 重播 JSON 檔案。

，瞭解如何調查及移除這項存取權。

偵錯使用者流程

就像任何程式碼一樣，有時您必須對已記錄的使用者流程進行偵錯。

為協助您進行偵錯，「Recorder」面板可讓您放慢重播速度、設定中斷點、逐步完成執行作業，以及平行檢查各種格式的程式碼。

減慢重播速度

根據預設，錄音工具會盡快重播使用者流程。如要瞭解錄製內容，請減慢重播速度：

1. 開啟 「重播」下拉式選單。
2. 選擇下列其中一個重播速度選項：
   • 正常 (預設)
   • 慢
   • 非常慢
   • 極慢

檢查程式碼

如何以多種格式檢查使用者流程的程式碼：

1. 在「錄音工具」面板中開啟錄音檔。
2. 按一下步驟清單右上角的「顯示程式碼」。
3. 「錄音工具」會並排顯示步驟和程式碼。
4. 將滑鼠遊標懸停在步驟上時，錄音工具會以任何格式醒目顯示各自的程式碼，包括擴充功能提供的程式碼。

5. 展開格式下拉式清單，選取用於匯出使用者流程的格式。

   

   這可以是三種預設格式之一 (JSON、@puppeteer/replay、Puppeteer 指令碼，或是擴充功能提供的格式)。

6. 接著編輯步驟參數和值，繼續偵錯記錄。程式碼檢視畫面無法編輯，但會隨著左側步驟變更而更新。

設定中斷點並逐步執行

如要設定中斷點並逐步執行，請按照下列步驟操作：

1. 將遊標懸停在錄音檔中任一步驟的 圓圈上。圓圈會變成 中斷點圖示。
2. 按一下 中斷點圖示，然後重播錄製內容。執行作業會在中斷點暫停。
3. 如要逐步執行，請在「Recorder」面板頂端的動作列中，按一下 「Execute one step」按鈕。
4. 如要停止重播，請點按 「取消重播」。

編輯步驟

如要編輯錄製步驟，您可以在錄製期間和結束後點選旁邊的 按鈕。

您也可以新增缺少的步驟，並移除意外記錄的步驟。

新增步驟

有時候，您可能需要手動新增步驟。舉例來說，錄音工具不會自動擷取 hover 事件，因為這項做法會汙染記錄，且並非所有這類事件都實用。不過，下拉式選單等 UI 元素只能在 hover 上顯示。您可以手動將 hover 步驟新增至需要這類元素的使用者流程。

若要手動新增步驟：

1. 請開啟這個示範頁面，並開始新的錄製作業。
2. 將滑鼠遊標懸停在可視區域中的元素上。畫面上彈出動作選單。
3. 從選單中選取動作並結束錄製。「錄音工具」只會擷取點擊事件。
4. 如要重播錄製內容，請按一下 「重播」。錄音工具無法存取選單中的元素，因此重播作業會在逾時後失敗。
5. 按一下「Click」(點擊) 步驟旁邊的 三點按鈕，然後選取「Add steps before」(在前面加上步驟)。
6. 展開新步驟。根據預設，它的類型是 waitForElement。按一下 type 旁的值，然後選取 hover。
7. 接下來，請為新步驟設定適當的選取器。按一下「選取」圖示 ，然後在彈出式選單外的 Hover over me! 元素中點選所需區域。選取器已設為「#clickable」。
8. 請嘗試重新播放錄製內容。加上新增的懸停步驟後，錄音工具即可成功重播流程。

新增斷言

在錄製過程中，您可以斷言 HTML 屬性和 JavaScript 屬性等。如何新增斷言：

1. 開始錄影，例如這個示範頁面。

2. 按一下「Add assertion」。

   

   「Recorder」會建立可設定的 waitForElement 步驟。

3. 為這個步驟指定選取器。

4. 設定步驟，但不要變更其 waitForElement 類型。舉例來說，您可以指定：

   • HTML 屬性。按一下「新增屬性」，然後輸入本頁元素要使用的屬性名稱和值。例如：data-test: <value>。
   • JavaScript 屬性。按一下「新增屬性」，然後以 JSON 格式輸入屬性名稱和值。例如：{".innerText":"<text>"}。
   • 其他步驟屬性。例如 visible: true。

5. 繼續記錄其餘的使用者流程，然後停止記錄。

6. 按一下「重播」圖示 。如果斷言失敗，錄音工具會在逾時後顯示錯誤。

請觀看以下影片，瞭解這項工作流程的實際運作情形。

複製步驟

除了匯出整個使用者流程，您還可以將單一步驟複製到剪貼簿：

1. 在要複製的步驟上按一下滑鼠右鍵，或按一下旁邊的三點圖示 。
2. 在下拉式選單中選取其中一個「複製為...」選項。

您可以複製各種格式的步驟：JSON、Puppeteer、@puppeteer/replay，以及擴充功能提供的格式。

移除步驟

如要移除意外記錄的步驟，請在步驟上按一下滑鼠右鍵，或按一下旁邊的 三點圖示，然後選取「移除步驟」。

此外，錄音工具會自動在每個錄音的開頭新增兩個步驟：

• 設定可視區域。可讓您控制可視區域的尺寸、縮放比例和其他屬性。
• 導航。設定網址，並在每次重播時自動重新整理頁面。

如要在不重新載入網頁的情況下執行網頁內自動化作業，請按照上述方式移除導覽步驟。

設定步驟

如要設定步驟：

1. 請指定類型：click、doubleClick、hover、(輸入) change、keyUp、keyDown、scroll、close、navigate (指向頁面)、waitForElement、waitForExpression 或 setViewport。

   其他屬性取決於 type 值。

2. 請在 type 下方指定必要屬性。

   

3. 按一下對應的按鈕，即可加入並指定各種選用屬性。

如需可用屬性清單，請參閱步驟屬性。

如要移除選用屬性，請按一下旁邊的 「移除」按鈕。

如要在陣列屬性中新增或移除元素，請按一下元素旁邊的「+」或「-」按鈕。

步驟屬性

每個步驟都可以使用下列選用屬性：

• target：Chrome 開發人員工具通訊協定 (CDP) 目標的網址，預設的 main 關鍵字是指目前的網頁。
• assertedEvents，目前只能是單一 navigation 事件

大部分步驟類型可用的其他常見屬性如下：

• frame：這個索引陣列是以零為基準的索引陣列，用於識別可嵌入的 iframe。舉例來說，您可以將主要目標的第二個 (1) iframe 中的第一個 (0) iframe 識別為 [1, 0]。
• timeout：執行步驟前等待的毫秒數。詳情請參閱「調整步驟逾時」。
• selectors：選取器陣列。詳情請參閱「瞭解選取器」一文。

類型專屬的屬性如下：

類型	屬性	必填	說明
click doubleClick	offsetX offsetY		相對於元素內容方塊的左上角 (像素)
click doubleClick	button		指標按鈕：primary |輔助 |秒 |返回 |轉寄
change	value		最終值
keyDown keyUp	key		金鑰名稱
scroll	x y		絕對捲動 x 和 y 位置 (以像素為單位)，預設為 0
navigate	url		目標網址
waitForElement	operator		>= |== (預設) |<=
waitForElement	count		可由選取器識別的元素數量
waitForElement	attributes		HTML 屬性及其值
waitForElement	properties		JSON 屬性及其值
waitForElement	visible		布林值。如果元素位於 DOM 且可見 (沒有 display: none 或 visibility: hidden)，則為「是」
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 毫秒)，重播作業可能會失敗。

如要避免這個問題，您可以一次調整每個步驟的預設逾時時間，或針對特定步驟設定個別逾時。特定步驟的逾時時間會覆寫預設動作。

如要一次調整每個步驟的預設逾時時間，請按照下列步驟操作：

1. 按一下「重播設定」，將「逾時」方塊設為可編輯。

   

2. 在「逾時」方塊中設定逾時值 (以毫秒為單位)。

3. 按一下 「重播」，即可查看調整後的預設逾時時間。

如要覆寫特定步驟的預設逾時時間，請按照下列步驟操作：

1. 展開步驟，然後按一下「新增逾時」。

   

2. 按一下 timeout: <value>，然後設定以毫秒為單位的值。

   

3. 按一下 「重播」，即可查看逾時的執行步驟。

如要移除步驟的逾時覆寫設定，請按一下該步驟旁邊的「刪除」按鈕 。

瞭解選取器

開始新的錄製內容時，您可以設定下列設定：

• 在「選取器屬性」文字方塊中，輸入自訂測試屬性。錄音工具會使用這項屬性來偵測選取器，而非常見測試屬性清單。

• 在「要記錄的選取器類型」這組核取方塊中，選擇要自動偵測的選取器類型：

  • 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」的次數，然後展開記錄中的對應步驟，並查看偵測到的選取器：

自訂錄製內容的選取器

如果常用的測試選取器沒有適合您，您可以自訂記錄選取器。

舉例來說，這個示範頁面會使用 data-automate 屬性做為選取器。開始新的錄製內容，並輸入 data-automate 做為選取器屬性。

填入電子郵件地址，並觀察選取器值 ([data-automate=email-address])。

選取器優先順序

「Recorder」會根據您是否指定自訂 CSS 選取器屬性，以下列順序尋找選取器：

• 視需要指定：
  1. 包含自訂 CSS 屬性的 CSS 選取器。
  2. XPath 選取器。
  3. 如果有 ARIA 選取器，
  4. 包含不重複文字最少 (如有) 的選取器。
• 如未指定：
  1. 如果有 ARIA 選取器，
  2. 具備下列優先順序的 CSS 選取器：
     1. 最常用於測試的屬性：
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. ID 屬性，例如 <div id="some_ID">。
     3. 一般 CSS 選取器。
  3. XPath 選取器。
  4. 肩選取器。
  5. 包含不重複文字最少 (如有) 的選取器。

您可以設定多個一般 CSS、XPath 和 Pierce 選取器。錄音工具會擷取下列項目：

• 在每個根層級一般的 CSS 和 XPath 選取器，也就是巢狀「陰影主機」 (如果有的話)。
• 在所有陰影根層級「內部」的所有元素中，不重複的 Pierce 選取器。