モニタリングプラスのシナリオ監視機能を使ってみよう！

2017.02.23
技術ブログ

Web監視ツールのモニタリングプラスで、ウェブサイトのシナリオ監視をしてみました。
自社でウェブサービスやECサイトを運営しているという方は是非お試しください。

シナリオ監視ではどんなことが出来るの？

画面遷移を指定し、登録した画面遷移が正常に行われたか、移動した先のページで指定した文言が正しく表示されるか(チェック指定時) を確認することが出来る機能です。また、表示されるまでに何秒かかるかを定期的に確認することができ、ユーザー感覚でサイトのスピードチェックをすることができます。ログイン処理や、フォームの投稿などを監視することも可能です。
ウェブサービスや、クラウド（ASP）サービスのシナリオ監視（テスト）にも役立ちます。

前提・準備

モニタリングプラスの有料プラン（キャンペーン中は無料）にあらかじめ登録しておきます。
登録がまだの方はこちらから登録してください。
※シナリオ監視機能が使えるのは、スタンダードプラン・ビジネスプランのみ
Firefoxがインストールされてない方は、こちらからダウンロードしておいてください。
シナリオ設定ファイルを作成するには、SeleniumというFirefox専用のプラグインを使用します。
Firefoxブラウザに最新版のSeleniumIDEをプラグインとして登録してください。

Seleniumとは・・・
ブラウザ上での動作（フォームへの入力、マウスでリンクをクリックしたなど）を自動で記録し、再現を行う自動テストツールです。
シナリオ設定ファイルは、Seleniumの自動記録機能を用いて作成します。

Seleniumの設定方法

FireFoxを起動して、最新版のSeleniumIDEをインストールします。
https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/
SeleniumIDEのアイコンが増えるのでクリックします。
下記のような画面が表示されれば準備完了です。

シナリオ設定ファイルを作成

シナリオ設定ファイルとは・・・
「どのURLから監視をスタートし、どこをクリックして次の画面に遷移するか」といった画面遷移に関する情報を記録したものです。

今回は例として、「Wordpressサイトに正しくログインできるか」をチェックするシナリオ設定ファイルの作り方をご紹介します。

Firefoxでシナリオ監視したいサイトを開きます。
※この時、Seleniumはまだ開きません。
該当のページを開いたら、Seleniumを起動します。
FirefoxのメニューからSeleniumを選択しましょう。
Seleniumが立ち上がり、BaseURLに今開いているページのURLが表示されているのを確認しましょう。
右上の、赤いレコードボタンをクリックします。
以降の操作はSeleniumが自動で記録していきます。
途中で目的外の動作を行ってしまうと、その動作も記録されてしまうのでご注意ください。
ブラウザ側でID/PWを入力し、ログインしましょう
ログインするためにID/PWを入力し、ログインを行います。
ブラウザで入力した内容は、Seleniumが自動的に記録します。
ログイン処理がSeleniumに記録されます。
Seleniumに以下ように記録されていればOKです。
画面が正しく遷移するか実験をしてみましょう。
再度右上の赤いボタンを押して、レコードモードをオフにましょう。
その後、緑の再生ボタンを押します。正しく記録されていれば、先ほどのログイン処理が再現実行されます。
ファイルを保存して、シナリオ設定ファイルの完成です。
メニューから保存を選び、適宜分かりやすい名前を付けて保存をしてください。
ファイルはhtml形式で保存されます。
以上で、シナリオ設定ファイルの完成です！

シナリオ監視を追加する

シナリオ設定ファイルができたところで、モニタリングプラスにシナリオ監視を追加してみます。

ダッシュボードのシナリオ監視部分で、[シナリオ監視を追加する＋］ボタンをクリックします。
設定ウィザードが表示されるので、シナリオ設定ファイルをアップロードします。
User-Agentを指定します。（User-Agent指定とは…監視元のブラウザの種類を指定する）
［このシナリオを登録する］をクリックします。
［このシナリオを登録する］をクリックすると、自動的に『2．シナリオ名を登録する』にシナリオ名が入力されますが、任意のシナリオ名が指定できますので、一目でわかりやすい名前に変更すると良いでしょう。
下にスクロールすると、『３．シナリオ設定の整合性チェックを設定する』が出てくるので、画面遷移が正しく行われたかを確認する方法を、各動作ごとにチェックボタンで設定し、[次へ]をクリックします。
『４．監視ポイントの設定』が表示されるので、監視元のポイントを指定します。
監視元ポイントは2か所まで設定可能です。
チェックをつけたら、[次へ]をクリックします。
『５．アラート検知時の通知先設定』が表示されるので、アラートの通知先メールアドレスを入力します。
アラートが不要な場合は、空欄のままで次へ進みます。後から設定変更も可能です。
入力が完了したら、[確認画面へ]をクリックします。
『入力内容の確認』が表示されますので、設定内容を確認して、OKであれば[この内容で設定する］をクリックします。
ウィザードが終了し、ダッシュボードに完了のメッセージが表示されました。
シナリオ監視の項目が増えています。シナリオ監視の追加が完了しました！

※スパナマークをクリックすると、シナリオの設定ができますので、監視間隔の調整などを設定してください。
30分後・・・監視結果が表示されました。

100となっている部分をクリックすると、以下のように詳細が表示されました。
グラフはまだ設定したばかりで不格好ですが、ちゃんと監視できているようです。

まとめ

シナリオ監視はどうしても、ブラウザやプラグインなどのインストールが必要になってしまいますが、それはどのシナリオ監視サービスも同じです。1回インストールしてしまえば、シナリオ設定ファイルの作成はシナリオ通りにブラウザを操作するだけで簡単なので、思い立ったらすぐ作成できますね♪
また、モニタリングプラスの方での設定はウィザードなので、簡単にあっという間に設定が完了しました。
安価でお手軽にシナリオ監視ができるのが、モニタリングプラスのいいところです。