このページは Cloud Translation API によって翻訳されました。

機能リファレンス

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

[新しい記録を追加] をタップします。+ アイコンをクリックして、新しい記録を追加できます。
すべての記録を表示する。プルダウンに、保存済みの録音のリストが表示されます。[N recording(s)] オプションを選択して、保存された録音のリストを開いて管理します。
録音をエクスポートする。スクリプトをさらにカスタマイズしたり、バグレポート用に共有したりするには、ユーザーフローを次のいずれかの形式でエクスポートします。
- JSON ファイルです。
- @puppeteer/replay スクリプト。
- Puppeteer スクリプト。
- Puppeteer（Firefox 用）スクリプト。
- Puppeteer（Lighthouse 分析を含む）。
形式の詳細については、ユーザーフローをエクスポートするをご覧ください。
録音をインポートする。JSON 形式のみ。
録音を削除する。選択した記録を削除します。

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

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

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

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

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

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

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
```

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

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

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

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

[Recorder] パネルの上部にある [Import] ボタンをクリックします。
記録されたユーザーフローの JSON ファイルを選択します。
[リプレイ] ボタンをクリックして、インポートしたユーザーフローを実行します。

外部ライブラリを使用して再生する

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

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

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

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

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

Testcafe で再現する。TestCafe を使用すると、ユーザーフローの JSON ファイルを再生し、これらの記録のテストレポートを生成できます。
Sauce Labs でもう一度プレイするJSON ファイルは Sauce Labs で saucectl を使用して再生できます。

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

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

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

リプレイを遅らせる

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

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

リプレイが遅い。

コードを検査する

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

[Recorder] パネルで録音を開きます。
手順リストの右上にある [コードを表示] をクリックします。
レコーダーには、手順とそのコードが並べて表示されます。
ステップにカーソルを合わせると、レコーダーによってそれぞれのコードが（拡張機能で提供されるコードを含む）あらゆる形式でハイライト表示されます。
形式のプルダウンリストを展開して、ユーザーフローのエクスポートに使用する形式を選択します。

3 つのデフォルト形式（JSON、@puppeteer/replay、Puppeteer スクリプト）のいずれか、または拡張機能で提供される形式にすることができます。
ステップのパラメータと値を編集して、録画のデバッグに進みます。コードビューは編集できませんが、左側のステップを変更すると、それに応じて更新されます。

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

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

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

ステップを編集

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

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

ステップを追加

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

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

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

アサーションを追加する

録画中に、HTML 属性や JavaScript プロパティなどをアサートできます。アサーションを追加するには:

録画を開始します（このデモページなど）。
[Add assertion] をクリックします。

レコーダーは、構成可能な waitForElement ステップを作成します。
このステップでセレクタを指定します。
ステップを構成します。ただし、waitForElement タイプは変更しないでください。たとえば、次のように指定できます。
- HTML 属性。[属性を追加] をクリックし、このページの要素で使用する属性の名前と値を入力します。例: data-test: <value>
- JavaScript プロパティ。[プロパティを追加] をクリックし、プロパティの名前と値を JSON 形式で入力します。例: {".innerText":"<text>"}
- ステップのその他のプロパティ。例: visible: true
残りのユーザーフローを記録して、録画を停止します。
[再生] をクリックします。アサーションが失敗すると、レコーダーはタイムアウト後にエラーを表示します。

このワークフローを実際に確認するには、次の動画をご覧ください。

ステップをコピーする

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

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

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

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

ステップを削除する

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

ステップを削除する。

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

設定されたビューポートとナビゲーション手順を含む録画。

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

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

構成手順

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

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

その他のプロパティは type 値に依存します。
type の下に、必須のプロパティを指定します。
対応するボタンをクリックして、オプションのタイプ固有のプロパティを追加して指定します。

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

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

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

ステップのプロパティ

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

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 ミリ秒）を超えたステップでリプレイが失敗することがあります。

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

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

[リプレイ設定] をクリックして、[タイムアウト] ボックスを編集できるようにします。
[タイムアウト] ボックスで、タイムアウト値をミリ秒単位で設定します。
[リプレイ] をクリックして、調整されたデフォルトのタイムアウトが動作していることを確認します。

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

ステップを展開し、[タイムアウトを追加] をクリックします。
timeout: <value> をクリックして、値をミリ秒単位で設定します。
[再生] をクリックして、タイムアウトが発生したステップを表示します。

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

セレクタについて

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

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

[セレクタ属性] テキストボックスに、カスタムテスト属性を入力します。レコーダーは、一般的なテスト属性のリストではなく、この属性を使用してセレクタを検出します。
[記録するセレクタの種類] チェックボックスで、自動的に検出するセレクタの種類を選択します。
- 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 セレクタ。
すべてのシャドウルート内にあるすべての要素間で一意のセレクタをピアスします。