Chrome DevTools の [Recorder] パネルの包括的な機能リファレンスでは、ユーザーフローの共有、編集、編集の方法について説明します。
[レコーダー] パネルの基本的な操作については、ユーザーフローを記録、再生、測定するをご覧ください。
ショートカットについて学び、カスタマイズする
ショートカットを使用すると、レコーダーをすばやく操作できます。デフォルトのショートカットの一覧については、レコーダー パネルのキーボード ショートカットをご覧ください。
すべてのショートカットを一覧表示するヒントをレコーダーで開くには、右上にある [help Show shortcuts] をクリックします。
レコーダーのショートカットをカスタマイズするには:
- [設定] > [ショートカット] を開きます。
- [レコーダー] セクションまで下にスクロールします。
- ショートカットをカスタマイズするの手順に沿って操作します。
ユーザーフローの編集
[Recorder] パネルの上部には、次のオプションがあります。
- 新しい録音を追加します。+ アイコンをクリックして、新しい録音を追加します。
- すべての録音を表示プルダウンに、保存した録音のリストが表示されます。[[number] recording(s)] オプションを選択すると、保存した録音のリストを展開して管理できます。
録音をエクスポートします。スクリプトをさらにカスタマイズしたり、バグレポート用に共有したりするには、ユーザーフローを次のいずれかの形式でエクスポートします。
- JSON ファイル。
- @puppeteer/replay スクリプトを使用します。
- Puppeteer スクリプト。
- Puppeteer(Lighthouse 分析を含む)。
形式の詳細については、ユーザーフローをエクスポートするをご覧ください。
録音を��ンポートします。JSON 形式のみ。
録音を削除します。選択した録音を削除します。
録音の名前を編集するには、録音の名前の横にある編集ボタン をクリックします。
ユーザーフローを共有する
レコーダーでは、ユーザーフローのエクスポートとインポートを行うことができます。これは、バグを再現する手順の正確な記録を共有できるため、バグレポートに役立ちます。外部ライブラリを使用して、エクスポートして再生することもできます。
ユーザーフローをエクスポートする
ユーザーフローをエクスポートするには:
- エクスポートするユーザーフローを開きます。
- [Recorder] パネルの上部にある [Export] をクリックします。
- プルダウン リストから次のいずれかの形式を選択します。
- JSON ファイル。録音を JSON ファイルとしてダウンロードします。
- @puppeteer/replay。録画を Puppeteer リプレイ スクリプトとしてダウンロードします。
- Puppeteer。録画を Puppeteer スクリプトとしてダウンロードします。
- Puppeteer(Lighthouse 分析を含む)。録画を、Lighthouse 分析が埋め込まれた Puppeteer スクリプトとしてダウンロードします。
- レコーダーのエクスポート拡張機能に用意されている 1 つ以上のオプション。
- ファイルを保存します。
デフォルトのエクスポート オプションでは、次のことができます。
- 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
拡張機能をインストールしてカスタム形式でエクスポートする
レコーダーの拡張機能をご覧ください。
ユーザーフローをインポートする
ユーザーフローをインポートするには:
- [Recorder] パネルの上部にあるインポート ボタン をクリックします。
- 記録されたユーザーフローを含む JSON ファイルを選択します。
- [Replay] ボタンをクリックして、インポートしたユーザーフローを実行します。
外部ライブラリを使用して再生する
Puppeteer Replay は、Chrome DevTools チームが管理するオープンソース ライブラリです。Puppeteer 上に構築されています。これはコマンドライン ツールで、JSON ファイルを再生することができます。
それとは別に、次のサードパーティ ライブラリを使用して JSON ファイルを変換して再生することもできます。
JSON ユーザーフローをカスタム スクリプトに変換します。
- Cypress Chrome レコーダー。これを使用して、ユーザーフローの JSON ファイルを Cypress テスト スクリプトに変換できます。実際の動作については、こちらのデモをご覧ください。
- Nightwatch Chrome のレコーダー。これを使用して、ユーザーフローの JSON ファイルを Nightwatch テスト スクリプトに変換できます。
- CodeceptJS Chrome レコーダー。これを使用して、ユーザーフローの JSON ファイルを CodeceptJS テスト スクリプトに変換できます。
JSON ユーザーフローを再生します。
- Testcafe でリプレイTestCafe を使用すると、ユーザーフローの JSON ファイルを再生し、これらの記録のテストレポートを生成できます。
- Sauce Labs でもう一度プレイsaucectl を使用して、Sauce Labs で JSON ファイルを再生することができます。
ユーザーフローをデバッグする
他のコードと同様に、記録されたユーザーフローのデバッグが必要になることがあります。
[Recorder] パネルでは、リプレイの速度を下げ、ブレークポイントを設定し、実行をステップ実行し、ステップと並行してさまざまな形式のコードを検査できます。
リプレイを遅らせる
デフォルトでは、レコーダーは可能な限り速くユーザーフローをリプレイします。録画中の状況を把握するには、再生速度を遅くします。
- [再生] プルダウン メニューを開きます。
- リプレイ速度のオプションを選択します。
- 標準(デフォルト)
- 低速
- 非常に遅い
- 非常に遅い
コードを検査する
さまざまな形式でユーザーフローのコードを調べるには:
- [Recorder] パネルで録音を開きます。
- 手順リストの右上にある [コードを表示] をクリックします。
- [レコーダー] では、ステップとそのコードが並んで表示されます。
- ステップにカーソルを合わせると、レコーダーによって、拡張機能のコードも含め、あらゆる形式で該当するコードがハイライト表示されます。
形式のプルダウン リストを展開して、ユーザーフローのエクスポートに使用する形式を選択します。
これは、3 つのデフォルト形式(JSON、@puppeteer/replay、Puppeteer スクリプト、または拡張機能によって提供されている形式)のいずれかになります。
ステップのパラメータと値を編集して、記録のデバッグに進みます。コードビューは編集できませんが、左側のステップに変更を加えるとそれに応じて更新されます。
ブレークポイントを設定してステップごとに実行する
ブレークポイントを設定してステップごとに実行する手順は次のとおりです。
- 録音内のステップの横にある の円にカーソルを合わせます。円が ブレークポイント アイコンに変わります。
- ブレークポイント アイコンをクリックして、記録を再生します。実行はブレークポイントで一時停止します。
- ステップを順に実行するには、[Recorder] パネルの上部にあるアクションバーの [ Execute one step] ボタンをクリックします。
- リプレイを停止するには、 [リプレイをキャンセル] をクリックします。
ステップを編集
録画中の任意のステップは、録画中と録画後に、その横にある ボタンをクリックすると編集できます。
足りない歩数を追加したり、誤って記録した歩数を削除したりすることもできます。
ステップを追加する
場合によっては、ステップを手動で追加する必要があります。たとえば、レコーダーは hover
イベントを自動的にキャプチャしません。これは、録画に汚染されるためです。このようなイベントすべてが有用とは限らないためです。ただし、プルダウン メニューなどの UI 要素は hover
にのみ表示されます。このような要素に依存するユーザーフローに、hover
ステップを手動で追加できます。
手動でステップを追加するには:
- このデモ��ージを開き、新しい録画を開始します。
- ビューポートの要素にカーソルを合わせます。操作メニューが表示されます。
- メニューから操作を選択して、録画を終了します。レコーダーがクリック イベントのみをキャプチャします。
- [再生] をクリックして、録画を再生してみます。レコーダーがメニュー内の要素にアクセスできないため、タイムアウト後にリプレイが失敗します。
- [クリック] ステップの横にある のその他アイコンをクリックし、[前にステップを追加] を選択します。
- 新しいステップを開きます。デフォルトでは、
waitForElement
型です。type
の横にある値をクリックして、[hover
] を選択します。 - 次に、新しいステップに適したセレクタを設定します。 [選択] をクリックし、
Hover over me!
要素のポップアップ メニュー以外の領域をクリックします。セレクタは#clickable
に設定されています。 - 録音をもう一度再生してみます。カーソルを合わせるステップが追加されると、レコーダーでフ���ーが正常にリプレイされます。
アサーションを追加する
記録中に、HTML 属性や JavaScript プロパティなどのアサーションを行うことができます。アサーションを追加するには:
- こちらのデモページなどで録画を開始します。
[Add assertion] をクリックします。
レコーダーにより、構成可能な
waitForElement
ステップが作成されます。このステップのセレクタを指定します。
ステップを構成します。ただし、
waitForElement
タイプは変更しないでください。たとえば、次の項目を指定できます。- HTML 属性。[属性を追加] をクリックし、このページの要素で使用する属性の名前と値を入力します。例:
data-test: <value>
- JavaScript プロパティ。[プロパティを追加] をクリックし、プロパティの名前と値を JSON 形式で入力します。例:
{".innerText":"<text>"}
- その他のステップのプロパティ。例:
visible: true
- HTML 属性。[属性を追加] をクリックし、このページの要素で使用する属性の名前と値を入力します。例:
残りのユーザーフローの録画に進み、録画を停止します。
[ 再生] をクリックします。アサーションが失敗した場合、タイムアウト後にレコーダーにエラーが表示されます。
このワークフローの実際の動作については、次の動画をご覧ください。
ステップをコピー
ユーザーフロー全体をエクスポートする代わりに、1 つのステップをクリップボードにコピーできます。
- コピーするステップを右クリックするか、その横にあるその他アイコン をクリックします。
- プルダウン メニュー���、[Copy as ...] オプションのいずれかを選択します。
JSON、Puppeteer、@puppeteer/replay、拡張機能によって提供される形式など、さまざまな形式でステップをコピーできます。
ステップを削除
誤って記録したステップを削除するには、ステップを右クリックするか、その横にあるその他アイコン をクリックして [ステップを削除] を選択します。
また、レコーダーでは、各録音の先頭に次の 2 つのステップが自動的に追加されます。
- ビューポートを設定します。ビューポートのサイズ、スケーリング、その他のプロパティを制御できます。
- ナビURL を設定し、リプレイごとにページを自動的に更新します。
ページを再読み込みせずにページ内自動化を行うには、上記のナビゲーション ステップを削除します。
ステップを構成する
ステップを構成するには:
タイプ(
click
、doubleClick
、hover
、(入力)change
、keyUp
、keyDown
、scroll
、close
、navigate
(ページ単位)、waitForElement
、waitForExpression
、setViewport
)を指定します。他のプロパティは
type
値に依存します。type
の下で必須プロパティを指定します。対応するボタンをクリックして、オプションのタイプ固有のプロパティを追加し、指定します。
使用可能なプロパティのリストについては、ステップのプロパティをご覧ください。
オプションのプロパティを削除するには、その横にある [削除] ボタンをクリックします。
配列��ロパティに要素���追加したり、配列プロパティから要素を削除したりするには、要素の横にある [+] ボタンまたは [-] ボタンをクリックします。
ステップのプロパティ
各ステップには、次のオプションのプロパティを指定できます。
target
- Chrome DevTools プロトコル(CDP)ターゲットの URL。デフォルトのmain
キーワードは現在のページを参照します。assertedEvents
(現時点では 1 つのnavigation
イベントのみ可能)
ほとんどのステップタイプで使用できるその他の一般的なプロパティは次のとおりです。
frame
- ネスト可能な iframe を識別するゼロベースのインデックスの配列。たとえば、メイン ターゲットの 2 番目の iframe 内にある 1 番目の 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 |
ターゲット 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 のみですが、タイトルと 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 パス言語を使用するセレクタ。
- Pierce。CSS のセレクタと似ていますが、Shadow DOM を突破できます。
一般的なテストセレクタ
単純なウェブページの場合、レコーダーがセレクタを検出するには id
属性と CSS の class
属性で十分です。ただし、以下の理由により、必ずしもそうなるとは限りません。
- 動的クラスや変更される ID がウェブページで使用されることがあります。
- コードまたはフレームワークの変更が原因で、セレクタが破損する場合があります。
たとえば、最新の JavaScript フレームワーク(React、Angular、Vue など)や CSS フレームワークで開発されたアプリケーションの場合、CSS の class
値が自動生成される場合があります。
このような場合は、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 セレクタ属性を指定しているかどうかに応じて、次の順序でセレクタを検索します。
- 指定する場合:
- カスタム CSS 属性を含む CSS セレクタです。
- XPath セレクタ。
- ARIA セレクタ(見つかった場合)。
- 見つかった一意のテキストが最も短いセレクタ。
- 指定しない場合:
- ARIA セレクタ(見つかった場合)。
- 次の優先度の CSS セレクタ:
- テストに使用される最も一般的な属性は次のとおりです。
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- ID 属性(例:
<div id="some_ID">
)。 - 標準の CSS セレクタ。
- テストに使用される最も一般的な属性は次のとおりです。
- XPath セレクタ。
- セレクタをピアスします。
- 見つかった一意のテキストが最も短いセレクタ。
通常の CSS、XPath、Pierce セレクタを複数指定することができます。レコーダーは以下をキャプチャします。
- 各ルートレベル(存在する場合はネストされたシャドウホスト)の通常の CSS セレクタと XPath セレクタ。
- すべてのシャドウルート内のすべての要素で一意のピアス セレクタを使用する。