功能參考資料

在 Chrome 開發人員工具「錄製器」面板的完整功能參考資料中，瞭解如何分享使用者流程、編輯流程和流程步驟。

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

瞭解及自訂快速鍵

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

如要在 錄音器中開啟提示，列出所有捷徑，請按一下右上角的「說明」「顯示捷徑」。

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

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

編輯使用者流程

在「錄影器」面板頂端，您可以使用下列選項：

1. 新增錄音檔。按一下「+」圖示，即可新增錄音。
2. 查看所有錄影。下拉式選單中會顯示已儲存的錄音檔清單。選取「[數字] 個錄音檔」選項，即可展開並管理已儲存的錄音檔清單。

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

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

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

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

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

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

共用使用者流程

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

匯出使用者流程

如何匯出使用者流程：

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

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

• 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
  

  

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

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

匯入使用者流程

如何匯入使用者流程：

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

透過外部程式庫重播

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

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

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

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

重播 JSON 使用者流程：

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

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

偵錯使用者流程

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

為了協助您進行偵錯，錄製器面板可讓您放慢重播速度、設定中斷點、逐步執行，並在步驟執行期間並行檢查各種格式的程式碼。

放慢重播速度

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

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. 從選單中選取動作並結束錄製。Recorder 只會擷取點擊事件。
4. 如要重播錄製內容，請按一下 「重播」。由於 Recorder 無法存取選單中的元素，因此在逾時後重播作業會失敗。
5. 按一下「點選」步驟旁邊的 三點按鈕，然後選取「新增前置步驟」。
6. 展開新步驟。預設為 waitForElement 類型。按一下 type 旁的值，然後選取 hover。
7. 接著，為新步驟設定適當的選取器。按一下 「選取」，然後點選 Hover over me! 元素中彈出式選單以外的區域。選取器已設為「#clickable」。
8. 請再試一次。新增了懸停步驟後，Recorder 便可成功重播流程。

新增斷言

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

1. 開始錄影，例如在這個示範網頁上。

2. 按一下「Add assertion」。

   

   錄製器會建立可設定的 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 中的第 1 個 (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 選取器類似，但可穿透陰影 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 選取器屬性，錄製器會依下列順序尋找選取器：

• 如果指定：
  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 選取器。