機能リファレンス

Sofia Emelianova
Sofia Emelianova
Jecelyn Yeen
Jecelyn Yeen

Chrome DevTools の [Recorder] パネルの包括的な機能リファレンスでは、ユーザーフローの共有、編集、およびその手順について説明します。

[Recorder] パネルの基本的な使い方については、ユーザーフローの記録、再生、測定をご覧ください。

ショートカットの使い方とカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. エクスポートするユーザーフローを開きます。

  2. [Recorder] パネルの上部にある [] [Export] をクリックします。

    [エクスポート] メニューの書式設定オプションのリスト。

  3. プルダウン リストから次のいずれかの形式を選択します。

    • JSON ファイル。録音を JSON ファイルとしてダウンロードします。
    • @puppeteer/replay録画を Puppeteer Replay スクリプトとしてダウンロードします。
    • Puppeteer。録画を Puppeteer スクリプトとしてダウンロードします。
    • Puppeteer（Firefox 用）。録画を Firefox 用 Puppeteer スクリプトとしてダウンロードします。
    • Puppeteer（Lighthouse 分析を含む）。Lighthouse 分析が埋め込まれた Puppeteer スクリプトとして録画をダウンロードします。
    • レコーダーの [拡張機能をエクスポート] で提供される 1 つ以上のオプション。

  4. ファイルを保存します。

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

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

  • 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 のユーザーフローを再生する:

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

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

[Recorder] パネルでは、リプレイの遅さ、ブレークポイントの設定、実行のステップスルー、さまざまな形式のコードの検査をステップと並行して行うことができるため、デバッグに役立ちます。

リプレイを遅らせる

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

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

リプレイが遅い。

コードを検査する

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

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

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

    形式のプルダウン リスト。

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

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

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

ブレークポイントを設定してステップ実行する手順は次のとおりです。

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

ステップを編集

記録中のステップの横にある 展開する。 ボタンをクリックすると、記録中でも終了後でも、記録内の任意のステップを編集できます。

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

ステップを追加

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

手順を手動で追加するには:

  1. こちらのデモページを開き、新しい録画を開始します。 録画を開始してホバー イベントをキャプチャします。
  2. ビューポート内の要素にカーソルを合わせます。操作メニューがポップアップ表示されます。 要素にカーソルを合わせます。
  3. メニューから操作を選択して録画を終了します。レコーダーはクリック イベントのみをキャプチャします。 アクションをクリックして録画を終了する。
  4. 再生する。 [リプレイ] をクリックして、録音を再生してみます。レコーダーがメニューの要素にアクセスできないため、タイムアウト後にリプレイが失敗します。 リプレイが失敗します。
  5. [Click] ステップの横にあるその他アイコン その他アイコン。 をクリックし、[Add step before] を選択します。 クリックの前にステップを追加する。
  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. プルダウン メニューで [次の名前でコピー...] のいずれかのオプションを選択します。

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

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

ステップを削除する

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

ステップを削除する。

また、レコーダーでは、すべての録画の開始時に次の 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: 単一の navigation イベントのみ。

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

  • frame - ネスト可能な iframe を識別するゼロベースのインデックスの配列。たとえば、メイン ターゲットの 2 番目（1）の iframe 内の 1 番目（0）の iframe を [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 >= | ==（デフォルト）| <=
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 Path Language を使用するセレクタ。
      • チェックボックス。 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 セレクタ。
    • すべてのシャドウルート内にあるすべての要素間で一意のセレクタをピアスします。