スクリプトを書かずに New Relic Synthetics の Scripted Browser を使う

TL;DR

Google Chrome の拡張機能「Selenium IDE」と「Synthetics Formatter for Selenium IDE」を使うとスクリプト自動生成が可能なため、自分でスクリプトを書かずに New Relic Synthetics の Scripted Browser を使うことができます。

はじめに

New Relic Synthetic Monitoring はお使いでしょうか？

New Relic というと APM (アプリケーションパフォーマンスモニタリング)の印象が強い方もいらっしゃるかもしれませんが、「Full Stack Observability」ということで、様々な監視観測が可能です。

「Synthetic Monitoring」はその多様な機能の1つで、いわゆる外形監視を行うためのツールとなっていますが、その中にも複数の監視方法が用意されています。

「Ping monitor」ではサクッと死活監視ができますし、「Broken links monitor」でリンク切れチェック、「Certificate check monitor」で SSL 証明書の期限チェックなんかもできたりします。

秀逸なのが「Simple browser monitors」で、WEB ページの URL を入れてあげるだけで、簡単にエンドユーザ側でのパフォーマンスを知ることができます。

Scripted Browser は強力

公式のドキュメントにも記載があるとおり、「Simple browser monitors」はあらかじめ構成済みの「Scripted browser monitors」です。

「Scripted browser monitors」では、名前の通りスクリプトを書くことで、非常に高い自由度でエンドユーザの操作を再現した観測ができます。Assert もできるので、E2E テスト的な使い方なんかもできそうです。

例えば閲覧にログインが必要なウェブページを監視したいとき、ログインページへの遷移～ユーザ情報入力～ログインボタン押下……といった複雑な操作を再現可能です。

ただ、スクリプトを書くのはちょっとハードルが高いと感じられる方もいらっしゃるかもしれません。

スクリプトは手書き不要

うれしいお知らせです。スクリプトを1から手書きする必要はありません。
Google Chrome の拡張機能を使えば、Google Chrome 上での操作を記録・スクリプト自動生成ができます。

使用する拡張機能は以下の2つです。

• Selenium IDE
  ブラウザ上での操作を記録するために使用
• Synthetics Formatter for Selenium IDE
  記録した操作を New Relic 用にエクスポートするため使用

実は、この方法は公式チャンネルの動画には記載があるのですが、ドキュメントに文章としては記載されていない気がします。

以下では、基本的には上記動画の手順に沿いながら、閲覧にログインが必要なページの監視を例に、手順を説明します。

監視対象例

今回の例では、以下のような操作を再現します。

1. ログイン URL に遷移
2. ID 欄に ID を入力
3. パスワード欄にパスワードを入力
4. ログインボタンをクリック

手順

ログイン情報を Secure Credentials へ保存

ログインパスワードなどセキュアな情報については、New Relic Synthetics の Secure Credentials 機能に保存しておきます。このようにすることで、スクリプト内へセキュアな情報をハードコーディングすることを避けられます。

1. New Relic へログインし、メニューから Synthetic Monitoring > Secure credentials を開きます。
   画面右上の「Create secure credential」を押下します。
   

2. Create secure credential ポップアップが開きます。各欄を入力していきましょう。

   • KEY に任意の名前を設定します。大文字アルファベット、数字、アンダースコアのみ使用可能です。例では EXAMPLE_LOGIN_PASSWORD としました。
     この名前は、後ほどスクリプト内で使用することになります。
   • VALUE には実際の値(パスワードなど)を指定します。
   • DESCRIPTION (説明)欄は任意です。

   入力したら、右下「Save」を押下して、保存します。
   

拡張機能のインストール

まだ以下の拡張機能を Google Chrome へインストールしていない場合は、インストールします。

• Selenium IDE
• Synthetics Formatter for Selenium IDE

1. それぞれのリンクを Google Chrome で開き、「Chrome に追加」ボタンを押下します。
   (画像は Selenium IDE の例ですが、Synthetics Formatter for Selenium IDE でもインストール手順は同じです。)
   

2. 確認画面が表示されるので、内容を確認し、「拡張機能を追加」ボタンを押下します。
   

Selenium IDE での操作の記録

1. (事前準備)
   今回は、監視対象 WEB サイトへのログイン操作を記録します。
   もしブラウザで対象 WEB サイトにログイン済みの場合は、ログイン操作を最初から記録するために、事前にログアウトしておきましょう。

2. Selenium IDE を起動します。
   デフォルトでは、Google Chrome ツールバーに「拡張機能」ボタンが表示されているかと思います。この中にある「Selenium IDE」を押下すると、Selenium IDE が起動します。
   

3. 「Create a new project」を押下します。
   

4. 任意のプロジェクト名を入力して、「OK」を押下します。
   

5. 画像のような画面になります。右上「REC」を押下します。
   

6. 起点となる URL を入力します。今回の場合はログイン画面の URL となります。
   

7. 「START RECORDING」を押下すると、新しいウィンドウで入力した URL が開かれます。
   このウィンドウで行った操作は、Selenium IDE に記録されます。
   右下に「Selenium IDE is recording」と表示されているのが目印です。
   

   実際に、ログイン操作を行います。
   UI をクリックしたり、UI へ入力したりすると、右下の「Selenium IDE is recording」表示が「Recorded xxxx」(xxxx は行った操作名)に一瞬だけ切り替わります。
   

8. 記録したい操作が一通り終わったら、「Selenium IDE」のウィンドウへ戻ります。
   画面右上の「⏹」ボタンを押下すると、記録を停止することができます。
   

   記録を停止すると、テスト名を入力する画面が表示されます。名前は入力してもかまいませんが、ここでは未入力のまま「LATER」を押下してもかまいません。

9. Selenium IDE 画面上部に、行った操作が記録されています。
   パスワードが見えてしまっていますね。この対策は後ほど行います。
   

10. 記録された操作がうまく動作することを確認してみます。
    Selenium IDE 画面上部の「▶」ボタンを押下すると、記録した操作が上から順に実行されます。
    

    うまく動作している場合、コマンドに✔がつき、ログにも「OK」が出力されます。
    

New Relic Synthetics 用にスクリプトをエクスポート

1. 画面左部で、テスト名(先ほど入力した場合はその名前、入力せず「LATER」とした場合は「Untitled」)にマウスオーバーすると三点のメニューボタンが表示されるので、押下します。
   
2. メニュー内の「Export」を押下します。
   
3. 展開された画面で、「New Relic Synthetics」を選択後、「EXPORT」を押下します。
   エクスポートしたファイルは、コンピュータにダウンロードされます。
   

スクリプトの微修正と New Relic への追加

1. ダウンロードしたスクリプトをお好みのエディタで開きます。

2. パスワードがハードコーディングされている箇所を修正します。
   以下の2か所にあるため注意してください。該当箇所がわからないときは、パスワードで検索するとわかりやすいと思います。

   • パスワードを入力するステップでのログ出力
     パスワードをログに出力する意味はない(危険)ので適当な文字に置き換えましょう。
     

   • パスワードを入力するステップで、パスワードを入力している箇所
     以下のようにパスワードを sendKeys している箇所があります(xxxxxxxx の部分が実際のパスワードになっている)。

     sendKeys("xxxxxxxx")
     

     パスワードの文字列部分を、事前に設定しておいた Secure Credential に置き換えましょう。
     $secure. につづけて、設定した Secure Credential 名を指定します。(EXAMPLE_LOGIN_PASSWORD の部分を、事前に設定した Secure Credential 名にしてください。)

     sendKeys($secure.EXAMPLE_LOGIN_PASSWORD)
     

     実際の例:
     

3. スクリプトの準備ができたので、New Relic に追加していきます。New Relic にログインし、メニューから Synthetic Monitoring > Monitors を開きます。
   画面右上の「Create monitor」を押下します。
   

4. 「Scripted browser」を押下します。
   

5. Name 欄にモニタ名を入力し、Period 欄で実行間隔(監視を実行する頻度)を選択します。
   選択後、「Select locations」ボタンを押下します。
   

6. New Relic Synthetics では、世界各地にあるロケーションから観測を行うことができます。
   つまり実際のエンドユーザに近い場所から、観測が行えるということです。
   この画面で観測を行いたいロケーションを1つ以上選択し、「Write script」を押下します。
   例では、東京のみを選択しました。
   

7. デフォルトで表示されたスクリプトをすべて削除し、先ほどエディタで微調整したスクリプトを全文コピー&ペーストします。
   画面下部「Validate」ボタンを押下して、スクリプトを試しに実行してみましょう。
   
   実行には少し時間がかかりますが、成功すると「Success」と表示され、画面下部では詳細な結果も閲覧できます。
   
   
   

8. 最後に、「Save monitor」を押下して保存したら完了です！
   

実行結果の確認方法

※本セクションでは、上記で作成したものとは別の Scripted Browser Monitor のスクリーンショットを使用している箇所があります。

• New Relic へログインし、メニューから Synthetic Monitoring > Monitors > 先ほど作成したモニタを開きます。
  
• サマリ画面が表示されます。
  時系列表示のため、どの時間帯に、どのようなパフォーマンスが劣化したか・どのドメインで劣化したか・どのような HTTP エラーが発生していたかなどが一目でわかります。
  
• 画面左部の Results メニューから、過去の実行履歴を確認できます。
  個々の実行履歴をクリックして開くと、それぞれのウォーターフォール表示やログなどといった詳細情報が確認可能です。
  
• Resources メニューでは、リソース単位でのダウンロード時間やサイズ等を確認できます。
  パフォーマンスの劣化などがあったときに、どのリソースが原因だったのかを簡単に特定できます。
  

おわりに

New Relic Synthetics の Scripted Browser は非常に強力なツールですが、スクリプトを書くというハードルが存在しています。しかし、スクリプトを自動生成することで、そのハードルをかなり下げることができるかと思います。

また多少はスクリプトを書くといった場合でも、1から書くのではなく自動生成されたものをベースに書くことで、少し楽をするといった使い方もできるかもしれません。

New Relic は使用中だが、まだ Scripted Browser を使ったことがないという方は、上述の通り簡単に使用することができるので、ぜひ試してみてください。

また New Relic 自体使ったことがないという方も、多少の制約はありますが全機能を無料で試すことができる(2023年12月時点)ので、一度体験してみてはいかがでしょうか。