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

## TL;DR
Google Chrome の拡張機能「[Selenium IDE](https://chromewebstore.google.com/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd)」と「[Synthetics Formatter for Selenium IDE](https://chromewebstore.google.com/detail/synthetics-formatter-for/agedeoibceidbaeajbehgiejlekicbfd)」を使うとスクリプト自動生成が可能なため、自分でスクリプトを書かずに 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 を入れてあげるだけで、簡単にエンドユーザ側でのパフォーマンスを知ることができます。

![Simple Browser の結果例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/29fdafbe-3fb3-100e-d866-03b0f5db71e3.png "Simple Browser の結果例")

## Scripted Browser は強力
[公式のドキュメント](https://docs.newrelic.com/docs/synthetics/synthetic-monitoring/using-monitors/intro-synthetic-monitoring/)にも記載があるとおり、「Simple browser monitors」はあらかじめ構成済みの「Scripted browser monitors」です。

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

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

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

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

使用する拡張機能は以下の2つです。
- [Selenium IDE](https://chromewebstore.google.com/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd)
    ブラウザ上での操作を記録するために使用
- [Synthetics Formatter for Selenium IDE](https://chromewebstore.google.com/detail/synthetics-formatter-for/agedeoibceidbaeajbehgiejlekicbfd)
    記録した操作を New Relic 用にエクスポートするため使用

実は、この方法は[公式チャンネルの動画](https://www.youtube.com/watch?v=Y0BCF-MSX44)には記載があるのですが、ドキュメントに文章としては記載されていない気がします。

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

### 監視対象例
今回の例では、以下のような操作を再現します。
1. ログイン URL に遷移
1. ID 欄に ID を入力
1. パスワード欄にパスワードを入力
1. ログインボタンをクリック

![example.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/c8be46d1-f31e-b0e5-3384-7005ca2011ae.gif)

### 手順
#### ログイン情報を Secure Credentials へ保存
ログインパスワードなどセキュアな情報については、New Relic Synthetics の Secure Credentials 機能に保存しておきます。このようにすることで、スクリプト内へセキュアな情報をハードコーディングすることを避けられます。
1. New Relic へログインし、メニューから Synthetic Monitoring > Secure credentials を開きます。
    画面右上の「Create secure credential」を押下します。
    ![Secure credentials](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/537e81e9-5542-ce27-3cde-3bd7ba0850fc.png)

1. Create secure credential ポップアップが開きます。各欄を入力していきましょう。
    - KEY に任意の名前を設定します。大文字アルファベット、数字、アンダースコアのみ使用可能です。例では `EXAMPLE_LOGIN_PASSWORD` としました。
        この名前は、後ほどスクリプト内で使用することになります。
    - VALUE には実際の値(パスワードなど)を指定します。
    - DESCRIPTION (説明)欄は任意です。

    入力したら、右下「Save」を押下して、保存します。
    ![Create secure credential](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/0745f94b-5833-8098-eb21-dbb5eeb7d886.png)

#### 拡張機能のインストール
まだ以下の拡張機能を Google Chrome へインストールしていない場合は、インストールします。
- [Selenium IDE](https://chromewebstore.google.com/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd)
- [Synthetics Formatter for Selenium IDE](https://chromewebstore.google.com/detail/synthetics-formatter-for/agedeoibceidbaeajbehgiejlekicbfd)

1. それぞれのリンクを Google Chrome で開き、「Chrome に追加」ボタンを押下します。
    (画像は Selenium IDE の例ですが、Synthetics Formatter for Selenium IDE でもインストール手順は同じです。)
    ![Chrome ウェブストア](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/ffecc356-c952-f228-7028-8cb745abcc7d.png)
    
1. 確認画面が表示されるので、内容を確認し、「拡張機能を追加」ボタンを押下します。
    ![確認画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/13a876db-3289-b591-a327-74aae74c98d7.png)

#### Selenium IDE での操作の記録
1. (事前準備)
    今回は、監視対象 WEB サイトへのログイン操作を記録します。
    もしブラウザで対象 WEB サイトにログイン済みの場合は、ログイン操作を最初から記録するために、事前にログアウトしておきましょう。
1. Selenium IDE を起動します。
    デフォルトでは、Google Chrome ツールバーに「拡張機能」ボタンが表示されているかと思います。この中にある「Selenium IDE」を押下すると、Selenium IDE が起動します。
    ![起動](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/625c6bc5-eb73-4696-88e6-2192662d6a25.png)
1. 「Create a new project」を押下します。
    ![Selenium IDE 起動後画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/94576e3f-2eea-739a-239c-052206fc2522.png)
1. 任意のプロジェクト名を入力して、「OK」を押下します。
    ![プロジェクト名入力画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/d6414b7d-94f8-b747-77b9-a960bb172c04.png)
1. 画像のような画面になります。右上「REC」を押下します。
    ![Selenium IDE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/d23beedd-3327-4593-cce2-e139725fe6c2.png)
1. 起点となる URL を入力します。今回の場合はログイン画面の URL となります。
    ![URL 入力画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/f5664d88-6de4-ab0a-a9c7-97a4c06bae3a.png)
1. 「START RECORDING」を押下すると、新しいウィンドウで入力した URL が開かれます。
    このウィンドウで行った操作は、Selenium IDE に記録されます。
    右下に「Selenium IDE is recording」と表示されているのが目印です。
    ![Selenium IDE is recording](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/6fbdfaac-644b-81f2-69ee-fd3ca950de97.png)

    実際に、ログイン操作を行います。
    UI をクリックしたり、UI へ入力したりすると、右下の「Selenium IDE is recording」表示が「Recorded xxxx」(xxxx は行った操作名)に一瞬だけ切り替わります。
    ![Recorded Click](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/2e8ab819-af58-a536-aba1-65e1b7c79257.png)

1. 記録したい操作が一通り終わったら、「Selenium IDE」のウィンドウへ戻ります。
    画面右上の「⏹」ボタンを押下すると、記録を停止することができます。
    ![記録停止](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/da9c156d-0c69-2d1f-92ee-de03a1356a0d.png)
    
    記録を停止すると、テスト名を入力する画面が表示されます。名前は入力してもかまいませんが、ここでは未入力のまま「LATER」を押下してもかまいません。

1. Selenium IDE 画面上部に、行った操作が記録されています。
    パスワードが見えてしまっていますね。この対策は後ほど行います。
    ![操作が記録されている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/e0afd058-0861-b611-5593-595c580dd2d3.png)

1. 記録された操作がうまく動作することを確認してみます。
    Selenium IDE 画面上部の「▶」ボタンを押下すると、記録した操作が上から順に実行されます。
    ![実行](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/4db94b5f-c7c6-ea74-f7c5-8f29ea6b009b.png)

    うまく動作している場合、コマンドに✔がつき、ログにも「OK」が出力されます。
    ![結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/dc014b48-c8bb-5c8f-0a61-7ab70bc991d7.png)

#### New Relic Synthetics 用にスクリプトをエクスポート
1. 画面左部で、テスト名(先ほど入力した場合はその名前、入力せず「LATER」とした場合は「Untitled」)にマウスオーバーすると三点のメニューボタンが表示されるので、押下します。
    ![メニュー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/a5fd54d8-c556-68d7-882b-3b3ec942ba53.png)
1. メニュー内の「Export」を押下します。
    ![「Export」を押下](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/b32e78cd-ffd4-a41b-6c0f-2253761a1da2.png)
1. 展開された画面で、「New Relic Synthetics」を選択後、「EXPORT」を押下します。
     エクスポートしたファイルは、コンピュータにダウンロードされます。
    ![「New Relic Synthetics」を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/d53ea483-0f4e-a5ea-cb1c-47e338633029.png)

#### スクリプトの微修正と New Relic への追加
1. ダウンロードしたスクリプトをお好みのエディタで開きます。
1. パスワードがハードコーディングされている箇所を修正します。
    以下の2か所にあるため注意してください。該当箇所がわからないときは、パスワードで検索するとわかりやすいと思います。
    - パスワードを入力するステップでのログ出力
        パスワードをログに出力する意味はない(危険)ので適当な文字に置き換えましょう。
        ![見せられないよ！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/5f741c31-9e30-e084-a6ef-eaac7672c119.png)


    - パスワードを入力するステップで、パスワードを入力している箇所
        以下のようにパスワードを `sendKeys` している箇所があります(`xxxxxxxx` の部分が実際のパスワードになっている)。
        ```js
        sendKeys("xxxxxxxx")
        ```
        パスワードの文字列部分を、事前に設定しておいた Secure Credential に置き換えましょう。
        `$secure.` につづけて、設定した Secure Credential 名を指定します。(`EXAMPLE_LOGIN_PASSWORD` の部分を、事前に設定した Secure Credential 名にしてください。)
        ```js
        sendKeys($secure.EXAMPLE_LOGIN_PASSWORD)
        ```
        実際の例:
        ![実際の例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/05f960c8-25db-c2e1-3e64-af81321643d5.png)

        
1. スクリプトの準備ができたので、New Relic に追加していきます。New Relic にログインし、メニューから Synthetic Monitoring > Monitors を開きます。
    画面右上の「Create monitor」を押下します。
    ![Create monitor](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/297a9a18-290d-eae6-911b-a469495cf84d.png)
1. 「Scripted browser」を押下します。
    ![Monitor 選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/2273102d-1f30-af1d-1a47-b73b00d3b4fb.png)
1. Name 欄にモニタ名を入力し、Period 欄で実行間隔(監視を実行する頻度)を選択します。
    選択後、「Select locations」ボタンを押下します。
    ![Configure monitor](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/443ce5f4-a45e-d75b-12be-63c82d60bdd9.png)
1. New Relic Synthetics では、世界各地にあるロケーションから観測を行うことができます。
    つまり実際のエンドユーザに近い場所から、観測が行えるということです。
    この画面で観測を行いたいロケーションを1つ以上選択し、「Write script」を押下します。
    例では、東京のみを選択しました。
    ![Select locations](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/e8f20914-a79c-b8f1-000e-208cd5576285.png)
1. デフォルトで表示されたスクリプトをすべて削除し、先ほどエディタで微調整したスクリプトを全文コピー&ペーストします。
    画面下部「Validate」ボタンを押下して、スクリプトを試しに実行してみましょう。
    ![Validate](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/d92c2015-aee9-054c-6cd6-4f38ca9e2181.png)
    実行には少し時間がかかりますが、成功すると「Success」と表示され、画面下部では詳細な結果も閲覧できます。
    ![結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/801748d9-c052-3f79-3b7e-cd611a15593d.png)
    ![Waterfall](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/29bf2c9b-dcd6-59d1-588d-599d19eafd0e.png)
    ![ログ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/00739a15-f70e-a504-5813-808311d367f5.png)
1. 最後に、「Save monitor」を押下して保存したら完了です！
    ![Save](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/2cb7e3cb-2a47-be1b-ba1d-409ea45d1cd5.png)

### 実行結果の確認方法
※本セクションでは、上記で作成したものとは別の Scripted Browser Monitor のスクリーンショットを使用している箇所があります。
- New Relic へログインし、メニューから Synthetic Monitoring > Monitors > 先ほど作成したモニタを開きます。
    ![Monitors](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/19f1471f-e957-04db-05a6-834340d9819a.png)
- サマリ画面が表示されます。
    時系列表示のため、どの時間帯に、どのようなパフォーマンスが劣化したか・どのドメインで劣化したか・どのような HTTP エラーが発生していたかなどが一目でわかります。
    ![サマリ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/cfd928f2-62f9-5fa1-5714-cf56e2dea0bd.png)
- 画面左部の Results メニューから、過去の実行履歴を確認できます。
    個々の実行履歴をクリックして開くと、それぞれのウォーターフォール表示やログなどといった詳細情報が確認可能です。
    ![実行履歴](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/735705da-71f3-2a67-0673-e359051b3aa8.png)
- Resources メニューでは、リソース単位でのダウンロード時間やサイズ等を確認できます。
    パフォーマンスの劣化などがあったときに、どのリソースが原因だったのかを簡単に特定できます。
    ![リソース](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632015/5c99fd96-1ed1-c2a2-b27c-4a2c02e16e90.png)

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

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

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

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