機能リファレンス

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Chrome DevTools の [Recorder] パネルの包括的な機能リファレンスで、ユーザーフローを共有する方法、ユーザーフローとそのステップを編集する方法をご覧ください。

[Recorder]（レコーダー）パネルの基本的な操作については、ユーザーフローを記録、再生、測定するをご覧ください。

ショートカットの詳細とカスタマイズ

ショートカットを使用して、レコーダーをすばやく操作できます。デフォルトのショートカットの一覧については、[レコーダー] パネルのキーボード ショートカットをご覧ください。

レコーダーにすべてのショートカットを一覧表示するヒントを表示するには、右上の [ショートカットを表示] をクリックします。

[ショートカットを表示] ボタン。

レコーダーのショートカットをカスタマイズするには:

  1. 設定] をタップします。 [設定] > [ショートカット] を開きます。
  2. [レコーダー] セクションまでスクロールします。
  3. ショートカットをカスタマイズする手順を行います。

ユーザーフローを編集する

DevTools の [Recorder] パネルのヘッダーにプルダウン メニューがあり、編集するユーザーフローを選択できます。

[Recorder] パネルの上部には、次のオプションがあります。

  1. 新しい録音を追加する追加する。+ アイコンをクリックして新しい録音を追加します。
  2. すべての記録を表示する展開する。。プルダウンに、保存済みの録音のリストが表示されます。[[number] recording(s)]（[数字] 件の記録）を選択して、保存した記録のリストを展開、管理できます。 すべての録音を表示します。

  3. 録音をエクスポートするファイルのダウンロード。。スクリプトをさらにカスタマイズしたり、バグレポート用に共有したりするには、ユーザーフローを次のいずれかの形式でエクスポートします。

    形式の詳細については、ユーザーフローをエクスポートするをご覧ください。

  4. 録音をインポートするファイルをアップロード] をクリックします。。JSON 形式のみ。

  5. 録音を削除する削除] をタップします。。選択した録音を削除します。

録音の名前を編集するには、録音の横にある編集ボタン 編集] をクリックします。 をクリックします。

ユーザーフローを共有する

ユーザーフローは、レコーダーでエクスポートとインポートを行うことができます。これは、バグを再現する手順の正確な記録を共有できるため、バグレポートに役立ちます。エクスポートして外部ライブラリで再生することもできます。

ユーザーフローをエクスポートする

ユーザーフローをエクスポートするには:

  1. エクスポートするユーザーフローを表示します。
  2. [Recorder] パネルの上部にある ファイルのダウンロード。 [Export] をクリックします。 エクスポートのファイル形式オプション。
  3. プルダウン リストから次のいずれかの形式を選択します。
    • JSON ファイル。録音を JSON ファイルとしてダウンロードします。
    • @puppeteer/replay.録画を Puppeteer Replay スクリプトとしてダウンロードします。
    • Puppeteer。録画を Puppeteer スクリプトとしてダウンロードします。
    • Puppeteer（Lighthouse 分析を含む）。この録画を、Lighthouse 分析が埋め込まれた Puppeteer スクリプトとしてダウンロードします。
    • レコーダーのエクスポート拡張機能が提供する 1 つ以上のオプション。
  4. ファイルを保存します。

デフォルトのエクスポート オプションごとに、次のことができます。

  • JSON。人が読める形式の JSON オブジェクトを編集し、JSON ファイルをレコーダーにimportします。
  • @puppeteer/replay。Puppeteer Replay ライブラリを使用して、スクリプトを再生します。@puppeteer/replay スクリプトとしてエクスポートする場合、ステップは JSON オブジェクトのままになります。このオプションは、CI / CD パイプラインと統合しながら、ステップを JSON として柔軟に編集し、後で変換して Recorder にインポートする場合に最適です。
  • Puppeteer スクリプト。Puppeteer でスクリプトを再生します。手順は JavaScript に変換されるため、手順のループなど、よりきめ細かいカスタマイズを行うことができます。ただし、このスクリプトをレコーダーにインポートし直すことはできません。

  • Puppeteer（Lighthouse 分析を含む）。このエクスポート オプションは前のオプションと同じですが、Lighthouse 分析を生成するコードが含まれています。

    スクリプトを実行して、flow.report.html ファイルの出力を確認します。

    # npm i puppeteer lighthouse
node your_export.js

    Chrome で Lighthouse レポートが開きます。

拡張機能をインストールしてカスタム形式でエクスポートする

レコーダーの拡張機能をご覧ください。

ユーザーフローをインポートする

ユーザーフローをインポートするには:

  1. [Recorder] パネルの上部にある [Import] ファイルをアップロード] をクリックします。 ボタンをクリックします。 録音をインポートします。
  2. 記録されたユーザーフローの JSON ファイルを選択します。
  3. もう一回見る。 [リプレイ] ボタンをクリックして、インポートしたユーザーフローを実行します。

外部ライブラリを使用したリプレイ

Puppeteer Replay は、Chrome DevTools チームが管理するオープンソース ライブラリです。Puppeteer 上に構築されています。これはコマンドライン ツールで、JSON ファイルを再生できます。

また、次のサードパーティ ライブラリを使用して JSON ファイルを変換して再生することもできます。

JSON ユーザーフローをカスタム スクリプトに変換します。

  • Cypress Chrome Recorder。これを使用して、ユーザーフロー JSON ファイルを Cypress テスト スクリプトに変換できます。こちらのデモで動作を確認できます。
  • Nightwatch Chrome Recorder。これを使用して、ユーザーフローの JSON ファイルを Nightwatch のテスト スクリプトに変換できます。
  • CodeceptJS Chrome Recorder。これを使用して、ユーザーフローの JSON ファイルを CodeceptJS のテスト スクリプトに変換できます。

JSON ユーザーフローを再生する:

ユーザーフローをデバッグする

他のコードと同様に、記録されたユーザーフローをデバッグしなければならない場合があります。

デバッグに役立つように、[レコーダー] パネルでは、再生速度を遅くしたり、ブレークポイントを設定したり、実行をステップ実行したり、ステップと並行してさまざまな形式でコードを検査したりできます。

リプレイを遅らせる

デフォルトでは、レコーダーはユーザーフローをできるだけ速く再生します。再生速度を遅くすると、録画中の状況を把握できます。

  1. [もう一回見る。リプレイ] プルダウン メニューを開きます。
  2. 次のいずれかの再生速度オプションを選択します。
    • 標準（デフォルト）
    • 低速
    • 非常に遅い
    • 非常に遅い

リプレイが遅い。

コードを検査する

さまざまな形式のユーザーフローのコードを検査するには:

  1. [Recorder] パネルで録音を開きます。
  2. 手順リストの右上にある [コードを表示] をクリックします。 [コードを表示] ボタン。
  3. レコーダーには、ステップとそのコードが横並びで表示されます。 手順とそのコードの並列ビュー。
  4. ステップにカーソルを合わせると、レコーダーによってそれぞれのコードが（拡張機能で提供されるコードを含む）あらゆる形式でハイライト表示されます。

  5. 形式のプルダウン リストを展開して、ユーザーフローのエクスポートに使用する形式を選択します。

    フォーマットのプルダウン リスト。

    3 つのデフォルト形式（JSON、@puppeteer/replay、Puppeteer スクリプト）のいずれか、または拡張機能で提供される形式にすることができます。

  6. ステップのパラメータと値を編集して、録画のデバッグに進みます。コードビューは編集できませんが、左側のステップを変更すると、コードビューが更新されます。

ブレークポイントを設定してステップ実行する

次の手順でブレークポイントを設定して実行します。

  1. 録画内のステップの横にある ステップ。 の円にカーソルを合わせます。円が ブレークポイント。 ブレークポイント アイコンに変わります。
  2. ブレークポイント。 ブレークポイント アイコンをクリックして、記録を再生します。実行はブレークポイントで一時停止します。 実行を一時停止します。
  3. 実行をステップ実行するには、[レコーダー] パネルの上部にあるアクションバーの 1 つのステップを実行します。 [1 ステップを実行] ボタンをクリックします。
  4. リプレイを停止するには、一時停止する。 [リプレイをキャンセル] をクリックします。

ステップを編集する

録音中のステップも録音後のステップも、その横にある 展開する。 ボタンをクリックして編集できます。

記録されていない歩数を追加したり、誤って記録された歩数を削除したりすることもできます。

ステップを追加する

場合によっては、手順を手動で追加する必要があります。たとえば、レコーダーは hover イベントを自動的にキャプチャしません。これは、録音が汚染され、そのようなイベントがすべて有用ではないためです。ただし、プルダウン メニューなどの UI 要素は hover にのみ表示できます。このような要素に依存するユーザーフローに hover ステップを手動で追加できます。

ステップを手動で追加するには:

  1. このデモページを開いて、新しい録音を開始します。 録画を開始してホバーイベントをキャプチャします。
  2. ビューポートの要素にカーソルを合わせます。操作メニューがポップアップ表示されます。 要素にカーソルを合わせる。
  3. メニューからアクションを選択し、録画を終了します。レコーダーはクリック イベントのみをキャプチャします。 アクションをクリックして録画を終了する。
  4. [再生する。 再生] をクリックして、録音を再生してみてください。レコーダーがメニューの要素にアクセスできないため、タイムアウト後にリプレイが失敗します。 リプレイに失敗しました。
  5. [クリック] ステップの横にある 3 つの点のボタン。 その他ボタンをクリックし、[前にステップを追加] を選択します。 [クリック] の前にステップを追加する。
  6. 新しいステップを開きます。デフォルトでは、waitForElement タイプです。type の横にある値をクリックし、hover を選択します。ホバーを選択する。
  7. 次に、新しいステップに適切なセレクタを設定します。選択する [選択] をクリックし、Hover over me! 要素のポップアップ メニューの外側にある領域をクリックします。セレクタは #clickable に設定されています。セレクタを設定する。
  8. 録音をもう一度再生してみます。ホバー ステップを追加すると、レコーダーでフローが正常に再生されます。 再生成功。

アサーションを追加する

記録中に、たとえば HTML 属性や JavaScript のプロパティをアサートできます。アサーションを追加するには:

  1. たとえば、こちらのデモページから録画を開始します。

  2. [Add assertion] をクリックします。

    [アサーションを追加] ボタン。

    レコーダーは、構成可能な waitForElement ステップを作成します。

  3. このステップでセレクタを指定します。

  4. ステップを構成しますが、waitForElement タイプは変更しません。たとえば、次のように指定できます。

    • HTML 属性。[属性を追加] をクリックし、このページの要素が使用する属性の名前と値を入力します。例: data-test: <value>
    • JavaScript プロパティ。[プロパティを追加] をクリックし、プロパティの名前と値を JSON 形式で入力します。例: {".innerText":"<text>"}
    • その他のステップ プロパティ。例: visible: true

  5. 残りのユーザーフローを記録して、録画を停止します。

  6. もう一回見る。 [リプレイ] をクリックします。アサーションが失敗すると、タイムアウト後にレコーダーでエラーが表示されます。

このワークフローの動作については、次の動画をご覧ください。

ステップをコピーする

ユーザーフローの全体をエクスポートする代わりに、1 つのステップをクリップボードにコピーできます。

  1. コピーするステップを右クリックするか、その横にある その他メニュー。 その他アイコンをクリックします。
  2. プルダウン メニューで [Copy as ...] オプションのいずれかを選択します。

プルダウン メニューからコピー オプションを選択します。

ステップは、JSON、Puppeteer、@puppeteer/replay、extensions で提供される形式など、さまざまな形式でコピーできます。

ステップを削除

誤って記録されたステップを削除するには、ステップを右クリックするか、その隣にあるその他アイコン その他メニュー。 をクリックして [Remove step] を選択します。

ステップを削除します。

また、レコーダーでは、すべての録画の開始時に次の 2 つのステップが自動的に追加されます。

ビューポートとナビゲーション ステップが設定された記録。

  • ビューポートを設定する。ビューポートのサイズ、スケーリング、その他のプロパティを制御できます。
  • ナビURL を設定し、再生ごとにページを自動的に更新します。

ページを再読み込みせずにページ内の自動化を実行するには、上記のナビゲーション ステップを削除します。

ステップを構成する

ステップを構成するには:

  1. タイプを指定します。click、doubleClick、hover、（入力）change、keyUp、keyDown、scroll、close、navigate（ページに対して）、waitForElement、waitForExpression、setViewport のいずれかを指定します。

    他のプロパティは type 値に依存します。

  2. type の下に、必須のプロパティを指定します。

    ステップを構成します。

  3. 対応するボタンをクリックして、オプションのタイプ固有のプロパティを追加し、指定します。

使用可能なプロパティの一覧については、ステップのプロパティをご覧ください。

オプションのプロパティを削除するには、そのプロパティの横にある [削除] をタップします。 削除] ボタンをクリックします。

配列プロパティに要素を追加または削除するには、要素の横にある [+] ボタンまたは [-] ボタンをクリックします。

ステップのプロパティ

各ステップには、次のオプションのプロパティを指定できます。

  • target - Chrome DevTools Protocol（CDP）ターゲットの URL。デフォルトの main キーワードは現在のページを参照します。
  • assertedEvents - 現在、1 つの navigation イベントにのみ存在できる

ほとんどのステップタイプで使用できるその他の一般的なプロパティは次のとおりです。

  • frame - ネスト可能な iframe を識別するゼロベースのインデックスの配列。たとえば、メイン ターゲットの 2 番目の iframe（1）の内側にある最初の iframe（0）を [1, 0] として識別できます。
  • timeout - ステップを実行する前に待機する時間（ミリ秒単位）。詳細については、ステップのタイムアウトを調整するをご覧ください。
  • selectors - セレクタの配列。詳細については、セレクタについてをご覧ください。

タイプ固有のプロパティは次のとおりです。

タイプ プロパティ 必須 説明
click
doubleClick		 offsetX
offsetY		 大丈夫。 要素のコンテンツ ボックスの左上を基準とする（ピクセル単位）
click
doubleClick		 button ポインタボタン: メイン |補助 |第 2 |戻る |転送
change value 大丈夫。 最終値
keyDown
keyUp		 key 大丈夫。 キー名
scroll x
y		 絶対スクロールの x 位置と y 位置（ピクセル単位、デフォルトは 0）
navigate url 大丈夫。 ターゲット URL
waitForElement operator >= |==（デフォルト）|&lt;=
waitForElement count セレクタによって識別された要素の数
waitForElement attributes HTML 属性とその値
waitForElement properties JavaScript のプロパティと JSON での値
waitForElement visible ブール値。要素が DOM 内にあり、表示されている場合は true（display: none または visibility: hidden がない場合）
waitForElement
waitForExpression		 asserted events 現時点では type: navigation のみですが、タイトルと URL を指定できます
waitForElement
waitForExpression		 timeout 最大待機時間（ミリ秒）
waitForExpression expression 大丈夫。 true に解決される JavaScript 式
setViewport width
height		 大丈夫。 ビューポートの幅と高さ（ピクセル単位）
setViewport deviceScaleFactor 大丈夫。 デバイス ピクセル比（DPR）に似ています。デフォルトは 1
setViewport isMobile
hasTouch
isLandscape		 大丈夫。 次のいずれかを指定するブール値のフラグ:
  • メタタグを考慮する
  • タッチイベントをサポートする
  • 横表示で表示する
    		•

    リプレイを一時停止させるプロパティが 2 つあります。

    • waitForElement プロパティは、セレクタによって識別される多数の要素が存在する（または存在しない）ステップを待機させます。たとえば、次のステップでは、セレクター .my-class に一致する要素がページに 3 つ未満になるまで待ちます。

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • waitForExpression プロパティを使用すると、JavaScript 式が true に解決されるまでステップが待機します。たとえば、次のステップは 2 秒間一時停止した後、true に解決され、再生が続行されます。

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    ステップのタイムアウトを調整する

    ページのネットワーク リクエストが遅い場合やアニメーションが長い場合、デフォルトのタイムアウト（5000 ミリ秒）を超えるステップで、リプレイが失敗することがあります。

    この問題を回避するには、各ステップのデフォルトのタイムアウトを一度に調整するか、特定のステップに個別のタイムアウトを設定します。特定のステップのタイムアウトによって、デフォルトが上書きされます。

    各ステップのデフォルトのタイムアウトを一度に調整するには:

    1. [リプレイ設定] をクリックして、[タイムアウト] ボックスを編集可能にします。

      リプレイの設定。

    2. [タイムアウト] ボックスで、タイムアウト値をミリ秒単位で設定します。

    3. もう一回見る。 [再生] をクリックして、調整されたデフォルトのタイムアウトを実際に確認します。

    特定のステップのデフォルトのタイムアウトを上書きするには:

    1. ステップを展開して、[タイムアウトを追加] をクリックします。

      タイムアウトを追加します。

    2. timeout: <value> をクリックして、値をミリ秒単位で設定します。

      タイムアウト値を設定します。

    3. 再生する。 [再生] をクリックして、タイムアウトが発生したステップを表示します。

    ステップのタイムアウトのオーバーライドを削除するには、その横にある [削除] 削除] をタップします。 ボタンをクリックします。

    セレクタについて

    新しい録画を開始するときに、次の項目を構成できます。

    新しい録画を設定します。

    • [セレクタの属性] テキスト ボックスにカスタムテスト属性を入力します。レコーダーは、一般的なテスト属性のリストではなく、この属性を使用してセレクタを検出します。

    • [記録するセレクタの種類] チェックボックスで、自動的に検出するセレクタの種類を選択します。

      • チェックボックス。 CSS。構文セレクタ。
      • チェックボックス。 ARIA。セマンティック セレクタ。
      • チェックボックス。 テキスト。固有のテキストが最も短いセレクタ（利用可能な場合）。
      • チェックボックス。 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 セレクタ: <ph type="x-smartling-placeholder">
          </ph>
        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 セレクタ。
    • すべてのシャドウルート内にあるすべての要素間で一意のセレクタをピアスします。