功能參考資料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

如要瞭解如何使用「錄製器」面板，請參閱「錄製、重播及評估使用者流程」一文。

瞭解及自訂快速鍵

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

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

「顯示快速鍵」按鈕。

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

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

編輯使用者流程

開發人員工具「Recorder」面板的標頭設有下拉式選單，可讓您選取要編輯的使用者流程。

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

  1. 新增錄音檔加入訂單。按一下「+」圖示，即可新增錄音。
  2. 查看所有錄製內容展開更多內容。。下拉式選單會顯示已儲存的錄音清單。選取「N Record(s)」(N 個錄音檔) 選項，展開及管理已儲存的錄音清單。查看所有錄製內容。

  3. 匯出錄音檔檔案下載。。如要進一步自訂指令碼，或將其分享以回報錯誤，您可以使用下列任一格式匯出使用者流程：

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

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

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

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

分享使用者流程

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

匯出使用者流程

如要匯出使用者流程，請按照下列步驟操作：

  1. 開啟要匯出的使用者流程。

  2. 按一下「錄音工具」面板頂端的「下載」圖示。

    「Export」選單中的格式選項清單。

  3. 從下拉式清單中選取下列其中一種格式：

    • JSON 檔案。以 JSON 檔案格式下載錄音。
    • @puppeteer/replay。將錄製內容下載為 Puppeteer Replay 指令碼。
    • Puppeteer。將錄製內容下載為 Puppeteer 指令碼。
    • Puppeteer (適用於 Firefox)。將錄製內容下載為 Firefox 的 Puppeteer 指令碼。
    • Puppeteer (包括 Lighthouse 分析)：將錄製內容下載為 Puppeteer 指令碼，並包含嵌入式 Lighthouse 分析。
    • 錄音機的「Export extensions」提供的一或多個選項。

  4. 儲存檔案。

您可以對每個預設匯出選項執行下列操作：

  • JSON。編輯人類可讀的 JSON 物件，然後匯入 JSON 檔案至錄製器。
  • @puppeteer/replay。使用 Puppeteer Replay 程式庫重播指令碼。以 @puppeteer/replay 指令碼匯出時，步驟仍會是 JSON 物件。如果您想整合 CI/CD 管道，但仍保有以 JSON 格式編輯步驟，之後再轉換及匯入回錄音工具，這個選項就非常適合。
  • Puppeteer 指令碼。使用 Puppeteer 重播指令碼。由於步驟會轉換為 JavaScript，您可以進行更精細的自訂，例如將步驟設為循環。請注意，您無法將這個指令碼重新匯入錄音工具中。
  • Puppeteer (適用於 Firefox)。您可以透過 WebDriver BiDi 支援功能，在 Chrome 和 Firefox 上執行這個 Puppeteer 指令碼。

  • Puppeteer (包括 Lighthouse 分析)：這個匯出選項與前一個選項相同，但包含可產生 Lighthouse 分析的程式碼。

    執行指令碼，並查看 flow.report.html 檔案中的輸出內容：

    # npm i puppeteer lighthouse
node your_export.js

    Lighthouse 報告已在 Chrome 中開啟。

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

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

匯入使用者流程

如何匯入使用者流程：

  1. 按一下「錄影器」面板頂端的「匯入」按鈕 。。 匯入錄製內容。
  2. 選取含有記錄使用者流程的 JSON 檔案。
  3. 按一下 重播。「Replay」按鈕，執行匯入的使用者流程。

透過外部程式庫重播

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

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

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

重播 JSON 使用者流程：

偵錯使用者流程

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

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

減慢重播速度

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

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

慢速重播。

檢查程式碼

如要檢查使用者流程的程式碼，可採用多種格式：

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

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

    格式下拉式清單。

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

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

設定中斷點並逐步執行

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

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

編輯步驟

無論是在錄製期間或之後，只要點選錄製步驟旁的 展開。 按鈕，即可編輯任何步驟。

你也可以新增缺少的步驟，並移除誤記錄的步驟。

新增步驟

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

若要手動新增步驟：

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

新增斷言

在錄製期間，您可以斷言 HTML 屬性和 JavaScript 屬性等。如要新增斷言，請按照下列步驟操作：

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

  2. 按一下「Add assertion」。

    「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. 按一下對應的按鈕，即可新增選用的類型專屬屬性並加以指定。

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

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

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

步驟屬性

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

其他常見的屬性可用於大多數步驟類型，包括：

  • 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 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. 按一下「Replay settings」，即可編輯「Timeout」方塊。

      重播設定。

    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 值。

    自動產生的 CSS 類別和隨機名稱。

    在這種情況下，您可以使用 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 選取器。