功能參考資料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

參閱 Chrome 開發人員工具錄音工具面板的全方位功能參考資料，瞭解如何分享使用者流程、編輯流程和相關步驟。

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

瞭解和自訂快速鍵

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

如要在「Recorder」中開啟列出所有快速鍵的提示，請按一下右上角的 顯示快速鍵。「Show shortcuts」。

「顯示快速鍵」按鈕。

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

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

編輯使用者流程

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

「Recorder」面板頂端會顯示下列選項：

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

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

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

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

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

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

共用使用者流程

您可以在錄音工具中匯出及匯入使用者流程。這在回報錯誤時相當實用，因為您可以分享重現錯誤的步驟的確切記錄。您還可以使用外部程式庫匯出及重播檔案。

匯出使用者流程

如何匯出使用者流程：

  1. 開啟要匯出的使用者流程。
  2. 按一下「Recorder」面板頂端的 下載檔案。「Export」。 匯出格式選項。
  3. 從下拉式清單中選取下列任一格式：
    • JSON 檔案。將錄製內容下載為 JSON 檔案。
    • @puppeteer/replay。將錄製內容下載為 Puppeteer Replay 指令碼。
    • Puppeteer。將錄製內容下載為 Puppeteer 指令碼。
    • Puppeteer (包括 Lighthouse 分析)。將錄製內容下載為 Puppeteer 指令碼，並搭配內嵌的 Lighthouse 分析。
    • 錄音工具的匯出擴充功能提供的一或多個選項。
  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

    Lighthouse 報告已在 Chrome 中開啟，

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

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

匯入使用者流程

如何匯入使用者流程：

  1. 按一下「Recorder」面板頂端的「Import」上傳檔案。 按鈕。 匯入錄製的內容。
  2. 選取含有已記錄使用者流程的 JSON 檔案。
  3. 按一下 再玩一次。「Replay」按鈕，執行匯入的使用者流程。

使用外部程式庫重播

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

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

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

重播 JSON 使用者流程：

偵錯使用者流程

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

為協助您進行偵錯，Recorder 面板可讓您降低重播速度、設定中斷點、逐步執行執行作業，以及按照步驟同時檢查多種格式的程式碼。

請放慢重播速度

根據預設，錄音工具會盡快重播使用者流程。如要瞭解錄音檔會發生什麼事，你可以放慢重播速度：

  1. 開啟 再玩一次。「重播」下拉式選單。
  2. 選擇下列任一重播速度選項：
    • 一般 (預設)
    • 慢
    • 非常慢
    • 極慢

重播慢速。

檢查程式碼

如要檢查各種格式的使用者流程程式碼：

  1. 在「錄音工具」面板中開啟錄製內容。
  2. 按一下步驟清單右上角的「Show code」(顯示程式碼)。 顯示程式碼按鈕。
  3. 錄音工具並排顯示步驟和代碼。步驟及其程式碼並排顯示。
  4. 當您將滑鼠遊標懸停在步驟上時，錄音工具會以任何格式醒目顯示其程式碼，包括擴充功能提供的程式碼。

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

    格式下拉式清單。

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

  6. 接著請編輯步驟參數和值，繼續對錄製進行偵錯。程式碼檢視無法編輯，但當您變更左側步驟時，程式碼檢視畫面會隨之更新。

設定中斷點並逐步執行

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

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

編輯步驟

如要編輯錄音檔中的任何步驟，請在記錄期間和之後，按一下旁邊的「展開。」按鈕。

你也可以新增遺漏的步驟，並移除意外記錄的步驟。

新增步驟

有時候，您可能需要手動新增步驟。舉例來說，錄音工具不會自動擷取 hover 事件，因為這類事件對錄製的影響不利，且並非所有這類事件都實用。但是，下拉式選單等 UI 元素只能在 hover 上顯示。您可以在依附於這類元素的使用者流程中，手動新增 hover 步驟。

若要手動新增步驟：

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

新增斷言

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

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

  2. 按一下「新增斷言」。

    「Add assertion」按鈕。

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

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

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

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

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

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

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

複製步驟

您不必匯出整個使用者流程，只要將一個步驟複製到剪貼簿即可：

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

在下拉式選單中選取複製選項。

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

移除步驟

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

移除步驟。

此外，錄音工具會自動在每次開始錄製時新增兩個不同的步驟：

包含設定可視區域和導覽步驟的記錄。

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

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

設定步驟

如要設定步驟，請按照下列指示操作：

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

    其他屬性取決於 type 值。

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

    設定步驟，

  3. 按一下對應的按鈕，新增並指定類型專屬的屬性。

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

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

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

步驟屬性

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

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

  • 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 毫秒) 時，重播可能會失敗。

    如要避免這個問題，您可以一次調整每個步驟的預設逾時時間，或為特定步驟設定不同的逾時。特定步驟的逾時設定會覆寫預設值。

    一次調整每個步驟的預設逾時設定：

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

      重播設定。

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

    3. 按一下 再玩一次。「重播」，即可查看調整後的預設逾時的實際運作時間。

    如何覆寫特定步驟的預設逾時設定：

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

      新增逾時設定。

    2. 按一下 timeout: <value> 並設定值 (以毫秒為單位)。

      設定逾時值。

    3. 按一下 再玩一次。「重播」，查看逾時步驟。

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

    瞭解選取器

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

    正在設定新錄音。

    • 在「選取器屬性」文字方塊中，輸入自訂測試屬性。Recorder 會使用這個屬性偵測選取器，而不是常見測試屬性清單。

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

      • 核取方塊。 CSS。語法選取器。
      • 核取方塊。「ARIA」。語意選取器。
      • 核取方塊。「文字」。不重複文字最短的選取器 (如有)。
      • 核取方塊。「XPath」。XPath使用 XML 路徑語言的選取器。
      • 核取方塊。「Pierce」。與 CSS 供應商類似的選取器，但可以阻塞 shadow 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 選取器。