Chrome DevTools Recorder を使用して Nightwatch テストを作成する

Chrome DevTools には最近、ユーザーのインタラクションフローを記録し、JSON または他の形式でエクスポートできる Recorder パネルが導入されました。

これらのユーザーフローを Nightwatch テストスクリプトに変換するには、次の手順に従います。

以下のセクションでは、Chrome Devtools Recorder を使い始め、ユーザーフローを Nightwatch にエクスポートする方法について説明します。

Chrome DevTools Recorder とは？

Chrome DevTools Recorder は、ブラウザで直接テストアクションを記録および再生し、JSON としてエクスポート（または e2e テストでエクスポート）し、テストパフォーマンスを測定できるツールです。DevTools Recorder について詳しく知りたい場合は、こちらを参照してください。

Coffee Cart ウェブサイトを使用して最初のテストを記録し、Nightwatch テストスクリプトとしてエクスポートします。

Chrome DevTools Recorder でテストを記録する

  • Coffee Cart ウェブサイトを開きます。これを最初のテストを記録するためのデモページとして使用します。

  • Chrome DevTools を開きます（ウェブページを右クリックして「検査」をクリックします）

  • 次に、Recorder パネルをクリックします

    Recorder-panel


  • 新しい記録を開始 ボタンをクリックして、テストの記録を開始します

    Start New Recording



  • 記録名を入力し、下部の 新しい記録を開始 ボタンをクリックします

  • ウェブサイトを操作して、コーヒーを追加し、カートをクリックしてみてください。「合計」を押し、支払い詳細を入力して「送信」ボタンをクリックします。

    User Action Gif


注意: ウェブページの切り替え、ボタンのクリック、ダブルクリックなど、ウェブページとのすべてのインタラクションは Recorder によって記録されます。

  • 記録が完了したら、レコーダーの「停止」ボタンをクリックします。

記録が完了すると、最初の自動記録スクリプトを実行する準備が整います。

いくつかのオプションがあります。

  1. 記録の再生 - 記録されたものを再生できます
  2. パフォーマンスパネルを使用したパフォーマンスの測定 - テストを再生し、DevTools の Recorder パネルの横にある Performance Insights パネルを開きます。記録されたテストとリソースのロードとレンダリングにかかった時間を使用して、ウェブサイトのパフォーマンスを分析できます。
  3. ステップの編集と追加 - テストステップを手動で編集できます。たとえば、セレクターを変更したい場合は、セレクターツールを使用したり、タイムアウトを追加したりできます。すべてコードを変更することなく行えます。

    Chrome DevTools Recorder



記録されたテストのエクスポート

Nightwatch テストスクリプトとしてすぐにエクスポートすることもできます。記録を Nightwatch テストスクリプトとしてエクスポートする方法は 2 つあります。

1. Nightwatch Recorder 拡張機能の使用

  • Chrome Webstore から拡張機能をダウンロードします。
  • 拡張機能をインストールし、DevTools で Recorder パネル を開きます
  • 保存した記録をクリックし、エクスポートボタン（下向き矢印ボタン）をクリックします
  • Nightwatch テストスクリプトとしてエクスポート オプションが表示されます

    Export Nightwatch Test


- オプションをクリックすると、現在の記録が Nightwatch テストに正常にエクスポートされます。- これで、Nightwatch で 最初のテストを実行できます


Run first test




2. @nightwatch/chrome-recorder ライブラリの使用

次の CLI コマンドで、JSON 記録を Nightwatch テストに変換できます。

npm install @nightwatch/chrome-recorder

npx @nightwatch/chrome-recorder

ツールは、Devtools 記録の場所を尋ね、指定されたディレクトリに出力を生成します。

CLI question image

ツールからの出力は「Nightwatch」フォルダーに書き込まれます。テストファイルを入手したら、CLI を使用して Nightwatch テストを実行できます。

問題を発見しましたか？お知らせください。

予期しない結果が生成される場合や、何かおかしいと思われる場合は、お知らせください。修正させていただきます。

参考資料