Web ユーザエクスペリエンス監視 (WUX)

ウェブユーザエクスペリエンスモニタリング(User Experience Monitoring, UX Monitoring Pandora FMS の用語では、単に WUX) は、ユーザがウェブサイトやウェブアプリケーションをどのように操作しているかのデータをリアルタイムに収集、分析、評価するプロセスです。 その目的は、ユーザ体験を改善するために、パフォーマンス、ユーザビリティ、アクセシビリティの問題を検出することです。

Pandora FMS WUX は、この目的に特化したバックエンド(Selenium®)を使って、合成モニタリング(Synthetic Monitoring)を行います。 つまり、Pandora FMS は、リモートサイト(Google Chrome®, Mozilla Firefox®など)とやりとりするために実際のブラウザを利用します。

• 実際のユーザーが問題を経験する前に問題を検出します。 実際のユーザからリアルタイムの閲覧データを収集する（ウェブスクレーピング）。
• ロード時間、インタラクション、エラー、ユーザー行動などの指標を測定します（ウェブ分析）。
• 例 ページロード、レスポンスタイム、（ウェブの）スクリーンショット、異なるデバイスでのテスト、ロギングを必要とする複雑なアプリケーションのテスト、JavaScript®によるインタラクション、テキスト入力、あるフィールドから別のフィールドへ、あたかもユーザーが行ったかのようにデータを渡す、マウスクリック、待ち時間などの測定。

WEB サーバーは基本的な HTTP リクエストを使用し、セッションをシミュレートすることはできますが、実際のブラウザーではないため、JavaScript を実行したり、最新のブラウザーをエミュレートすることはできません。 シンプルなWEBテストであれば通常のWEBテストでも問題ありませんが、WUXはもっと強力です。

• エージェントベースのWUX（Seleniumバージョン2）、バージョン740まで。
• WUXはWUXサーバー（Selenium 3）で集中管理され、バージョン780まで。
• WUXはDiscovery PFMS (Selenium 4)のプラグインとして集中管理されています。

Discovery PFMSで集中管理されているWUXもSelenium 4をベースにしており、プラグインとしてエージェントから（オプションで）使用することができます。 WUXサーバーで動作したトランザクションファイル（.side）は、WUX Discovery PFMSで動作します。

WUX Server (Selenium 3)の使用方法に関する情報は、別館WUX monitoringにあります。

この Selenium 4 用プラグインの動作は、Pandora FMS 自動検出サーバを利用しています。 前述のように、以前は WUX サーバと呼ばれる専用サーバを使用していましたが、PFMS 自動検出を使用することも可能です。

名前の通り Selenium 4 を使用して実行できるようになりました。また、Selenium 3 トランザクションもサポートされています (以前は WUX サーバの環境で実行されていました)。

トランザクションの実行に関して、Selenium に接続するには 4 つの異なる方法があります。これについては、正しい操作を確実に行うために満たす必要のある要件とともに、以下で詳しく説明します。

主な要件は、プラグインを実行するサーバーがSelenium 4スタックに接続できること、そしてこのサーバーが監視するウェブサイトのURLと通信できることです。

このWUXプラグインには、各トランザクションで実行される4つの異なるSelenium接続メソッドがあるので、それぞれのケースで必要な実行モードに要件を調整する必要があります。

プラグインは、それが実行されているコンピュータ上で見つかったGoogle ChromeまたはMozilla Firefoxのドライバを使用します. デフォルトでは、これらのコンポーネントは以下のパスで検索されますが、必要に応じて別のパスを指定することもできます。

Google Chrome バイナリ:

/usr/share/pandora_server/util/selenium_headless_drivers/chrome/google-chrome

Chromedriver:

/usr/share/pandora_server/util/selenium_headless_drivers/chromedriver

Mozilla Firefox バイナリ:

/usr/share/pandora_server/util/selenium_headless_drivers/firefox/firefox

Geckodriver:

/usr/share/pandora_server/util/selenium_headless_drivers/geckodriver

このモードでブラウザを起動するには、そのブラウザ固有の依存関係もシステムにインストールされていなければならない。

• Mozilla Firefox: gtk3, alsa-lib, libX11-xcb.
• Google Chrome: nss, libdrm, mesa-libgbm.

プラグインは URL で示される Selenium 4 サーバーに接続するので、プラグインを実行しているサーバーから Selenium 4 サーバーのリスニングポート (デフォルトでは 4444 TCP) にアクセスする必要があります。

このプラグインは、ローカルドライバモードで指定されたドライバを含むイメージを使って実行するサーバ上でDockerコンテナを起動し、実機からの依存関係を抽象化します。

デフォルトでは、pandorafms/pandora_selenium_headlessイメージが使用され(実行毎に異なるイメージを指定することも可能です)、ドライバはDocker内で以下のパスで検索されます：

• Google Chrome バイナリ: /tmp/lib/chrome/google-chrome.
• Chromedriver: /tmp/lib/chromedriver.
• Mozilla Firefox バイナリ: /tmp/lib/firefox/firefox.
• Geckodriver: /tmp/lib/geckodriver.

プラグインはユーザー名とパスワードを使って SSH 経由でリモートサーバーに接続し、そのサーバー上でプラグイン自身のコピー (その時点でコピーされたもの) を local docker モードで実行します。 したがって、上記のモード要件に加えて、指定したポート (デフォルトでは 22 TCP) で指定した認証情報を使って SSH 経由でリモートサーバーに接続できるようにする必要があります。

SSH接続に指定されたユーザは、Dockerコンテナを起動し、一時ディレクトリにコピーされたファイルにアクセスするのに十分な権限を持っている必要があります。 リモートサーバーへのファイルのコピーには一時ディレクトリが使用されます（デフォルトでは /tmp ）が、実行ごとに異なるパスを指定することもできます。

すべての実行モードにおいて、必要に応じて、各取引にGoogle ChromeまたはMozilla Firefoxのプロファイルを使用することが可能である。 この機能を使用する場合、トランザクションを開始するサーバー (local または remote) にこれらのプロファイルへのパスが含まれていることを確認する必要があります。

Dockerの実行モード(local、remote)では、プロファイルフォルダへのパスを持っている必要があります。

また、各実行で示されたSIDEのメインURLへの接続統計を監視することも可能です。 そのためには、プラグインを起動するコンピュータに curl 実行ファイルがインストールされている必要があります。

Selenium 4 で WUX モニタリングを利用するためには、Pandora FMS ウェブコンソールのディスカバリセクションに .disco をインストールする必要があります。 これは、Manage disco packagesビューから、.disco タイプのファイルを選択して、Pandora FMS ライブラリからプラグインをダウンロードすることで実行できます：

これらのトランザクションを実行するには、Google ChromeまたはMozilla Firefoxブラウザで利用可能なSelenium IDE拡張機能を使用して事前に保存しておく必要があります。 拡張機能を開いた後、新しいプロジェクトに保存するか、既存のプロジェクトを開くか、新しいプロジェクトを作成するか、単に拡張機能を閉じるかを選択するよう求められます。

最初のオプションを選択すると、作成するプロジェクトに名前を付け、録画のベースURLを入力するよう求められます。

3つ目のオプションを選択した場合、プロジェクト名の入力のみが求められるため、過去の録画がない場合は、ベースとなるURLアドレスを手動で入力して録画を開始する必要があります。

以上の手順で拡張機能の準備ができたら、次にすることは、画面の右上にあるRECボタンをクリックすることです。 選択したブラウザに新しいウィンドウが開き、URLベースセクションに示されたページがロードされます。 この瞬間から、このウィンドウで実行されたアクションは Selenium IDE 拡張プロジェクト に保存されます。

トランザクション実行の後半でモニターするすべてのアクションが実行されたら、Stop recordingボタンをクリックします (RECボタンがあった場所)で録音を停止します。 トランザクションテストの名前を入力するプロンプトが表示されます。 複数のテストがある場合、後で Pandora FMS にロードする際に、順次実行されます。 プロジェクトの各テストに対して、新しいエージェントが作成されます。

その後、以下のようなビューが表示される：

必要であれば、フェーズセパレーター、コメント、待機コマンドなどのコマンドを手動で追加することも可能です (wait)。

セクションSIDEファイルのコマンドにサポートされているコマンドの完全なリストがあります。

これらのコマンドを現在の録音に追加するには、既存のコマンドのいずれかを右クリックし、Insert new commandオプションをクリックします：

これにより、クリックしたコマンドの上に空のコマンド行が挿入され、これを編集してコマンドを手動で追加することができます Insert new commandフィールドに希望のコマンドを入力するだけです：

例えば、フェーズ開始コマンドを使用する：

録画が終了し、使用したい追加コマンドの設定が完了したら、プラグイン実行の設定で使用できる .side ファイルを生成します。 これを行うには、Selenium IDE ウィンドウの右上にあるディスケットアイコンをクリックし、簡単に見つけられるパスにファイル名を付けて保存します。

.sideファイルが生成されたら、それを開いてみると、実際はJSONファイルであることがわかる。 このJSONフォーマットの内容は、プラグイン設定のTest setupステップのSelenium IDE JSONボックスにコピー＆ペーストしなければなりません。

Pandora FMS ウェブコンソールのディスカバリツールから録画を実行するには、アプリケーションメニューから Selenium 4 を使ってタスクを作成します (Management → Discovery → Applications):

タスクには名前を指定し、グループを割り当てる必要があります。 説明を追加したり、インターバル時間や実行タイプなどの他の重要なパラメーターを変更することも可能である：

次のステップでは、以下のパラメータが表示されます：

これらによって、トランザクションがどのウェブブラウザで実行されるかを指定するだけでなく、前述の4つの利用可能な実行モードから1つを選択することができる。 互換性のために、Selenium IDEでトランザクションが保存されたのと同じブラウザであることを推奨します。

実行のタイプが指定されると、どのオプションが選択されたかに応じて、異なる設定オプションが表示される。

デフォルトでは使用する画像が表示されているので、別の画像を使用したい場合以外は何も記入しないでください。 トランザクションの実行において特定のユーザーのプロファイルを使用する必要がある場合は、そのユーザーを指定する必要があります。 また、使用するブラウザープロファイルのパスを指定することもできます。

タスクを実行するリモートサーバーにSSHで接続するために必要なデータを指定する必要がある。 接続データには、IPアドレスまたはFQDN、SSHポート、アクセス認証情報が必要です。

テンポラリパスは実行に必要なファイルをホストし、それ以外のフィールドはローカルDockerの実行と同じです。

このタイプの実行では、Pandora FMS ライブラリからダウンロードできる、実行に必要なドライバのパスを指定できます。

トークンについては、一番下にある：

• Virtual display: 仮想デスクトップを使用する実行に使用する。 指定しない場合、タスクを実行するサーバーには物理デスクトップ（モニター）が接続されている必要がある。
• Headless driver: 非デスクトップ環境に適したこのモードで実行するために使用されるブラウザのため。

両方のトークンにチェックを入れておくことをお勧めします。

4番目のモードでは、リモートドライバへの接続URLを指定する必要があります。 userパラメータとprofileパラメータの動作は前述と同じです。

接続モードを選択した後、タスク構成を確定する前に最後のステップを設定しなければならない。

安全でない証明書の受け入れや、時間統計の監視を指定することも可能である。 また、トランザクションが実行される画面解像度、グローバル・タイムアウト時間、記録コマンド間の待ち時間など、その他の設定パラメータもある。

最後に、トランザクションの記録のステップで示したように、.sideフォーマットのJSONコンテンツを、Selenium IDE JSON最後のフィールドに入力する必要があります。

タスクが設定された後、数秒後に自動的に実行されるが、最初のステップでタスクがどのように設定されたかに応じて、タスクを強制的に手動で実行する必要がある。

実行が終了すると、タスクからどのエージェントが作成されたか、どのエージェントがテストエージェントに属するか、それぞれのタイプがいくつあるかを示すサマリビューを確認することができます。

この例の場合、Selenium プロジェクトは Selenium 4 と名付けられ、Test 1 と Test 2 という 2 つの異なるテストがあります。 タスク構成中にオプションMonitor time statisticsがチェックされた場合、パフォーマンスデータをホストするプロジェクト名でエージェントが作成されます。

一方、記録されたトランザクションのエージェントも、テストごとに 1 つずつ作成される。 この場合、Test 1とTest 2という名前のエージェントが2つ存在することになる：

実行後、エージェントはトランザクションデータとともに作成され、このトランザクショ ンの実行のためのモジュールを含む。 パフォーマンスデータを持つエージェントには、この情報のためのモジュールと、Monitor time statisticsオプションが、タスク設定の最後のステップであらかじめ有効になっている必要があります。

テストエージェントに追加されるモジュールは、少なくとも以下の3つである：

1. Global status: テストが正しく完了したか、ある時点で失敗したかを示す。
2. Global time: これは、テスト完了までに要した秒数を示す数値モジュールである。
3. Last error screenshot: テストが失敗した場合、失敗が発生したときにブラウザに表示されたスクリーンショットがこのモジュールに保存される。

トランザクションにフェーズが設定されている場合、各フェーズのステータスと時間を示すモジュールが、以前のものに加えて作成される。 Global time、各フェーズのタイムモジュールの合計である必要はないことを知っておくことが重要である。 Global time、ブラウザが開いたり閉じたりするのに使われる時間も含まれるからです。

パフォーマンス・データに関しては、サイトに到達するまでの各操作にかかった時間をミリ秒単位で示している。 この場合、以下のようになる：

• URL stat DNS: URLのDNS解決にかかる時間。
• URL stat TSSL: SSL接続の確立にかかる時間。
• URL stat TST: 最初のバイトを受信するまでの時間。
• URL stat TT: URLへのアクセスにかかる総トランザクション時間。
• URL stat TTC: TCP接続時間。
• URL stat TTCP: 接続がデータ転送可能になるまでの時間。
• URL status: URLへの接続が可能かどうかを監視する。

エージェントには、WUX データ専用のビューもあります。 それは、右上のタブで見つけることができます：

ダッシュボード用のウィジェットに加え、WUXモジュールに特化したウィジェットが用意されています：

上記の録画は単純な録画です。 録画が異なるフェーズに分割されるように設定されている場合は、WUXデータビューでも区別されます：

ウィジェットも同じだ：

最後に、ウェブからデータをキャプチャすることも可能である（webscrapping）。

手動で実行するには、Pandora FMS サーバ自体に Selenium 4 プラグインをホストする エンドポイント を設定して実行し、それぞれに対して XML ファイルを生成して、それぞれに対応するモジュールを持つ異なるエージェントを設定できます。

これを行うために、Selenium 4 プラグインは、プラグインファイルへのパスと必要な設定ファイルを示すことができるように、エージェントプラグインとして 絶対パス を使って設定することができます。

Selenium 4を使用してエージェントプラグインを設定するために使用できるテンプレートは次のようになります：

タスクのコンフィギュレーション・ファイルとマシンにロードされた.SIDEファイルは、あらかじめ手作業でコンフィギュレーションする必要があることを考慮に入れることが重要である。

設定ファイルを準備するには、“パラメータと設定 “セクションに進み、記入するデータテンプレートが配置されています。 .SIDE ファイルの場合、Selenium IDE 拡張機能によって生成されたファイルをコピーするだけで十分です。

-xパラメーターは、後で処理するXML形式の実行データを生成するため、適用することが重要である。 ディスカバリーによるデフォルトの実行の場合、受信するデータ形式はJSONである：

必要に応じて、Pandora FMS と同じサーバにインストールされていないエンドポイントからプラグインを実行することも可能です。そのためには、エンドポイントをホストしているサーバにプラグインの .disk パッケージをローカルにダウンロードし、名前を .zip に変更して内容を解凍し、バイナリと動作に必要なその他のファイルにアクセスできるようにする必要があります。

また、-x パラメータで XML 形式のデータを送信し、-S パラメータで XML を受信する Tentacle サーバの IP アドレスとポートを指定します。 実行は以下のようになります：

このタイプの実行で生成されるXMLは、それぞれ異なるエージェントに対応するため、プラグインが実行されているエージェント内でモジュールがホストされないことを覚えておくことが重要です。

設定ファイル (--conf)

{
"worker_mode" : "<local | remote>",
"run_mode" : "<driver | docker>",
"browser" : "<chrome | firefox>",
"driver_url" : "http://<selenium_ip>:<selenium_port>/wd/hub",
"ssh_address" : "<ssh_ip>",
"ssh_port" : "<ssh_port>",
"ssh_user" : "<ssh_user>",
"ssh_password" : "<ssh_password>",
"ssh_password_encrypt" : "<1 | 0>",
"ssh_temp_folder" : "<ssh_temp_folder_path>",
"docker_image": "<docker_image>",
"chromedriver_path": "<chromedriver_path>",
"chrome_binary_path": "<chrome_binary_path>",
"chrome_user_data_dir" : "<chrome_user_data_dir>",
"chrome_profile" : "<chrome_profile>",
"geckodriver_path": "<geckodriver_path>",
"firefox_binary_path": "<firefox_binary_path>",
"firefox_profile" : "<firefox_profile>",
"accept_insecure_certs" : "<1 | 0>",
"monitor_stats" : "<1 | 0>",
"browser_width" : "<width>",
"browser_height" : "<height>",
"global_timeout" : "<seconds>",
"wait_between_commands" : "<seconds>"
}

コンフィギュレーションの各要素：

例えば、こうだ：

{
    "worker_mode" : "local",
    "run_mode" : "driver",
    "browser" : "chrome",
    "driver_url" : "",
    "ssh_address" : "",
    "ssh_port" : "",
    "ssh_user" : "",
    "ssh_password" : "",
    "ssh_password_encrypt" : "",
    "ssh_temp_folder" : "",
    "docker_image": "",
    "chromedriver_path": "",
    "chrome_binary_path": "",
    "chrome_user_data_dir" : "",
    "chrome_profile" : "",
    "geckodriver_path": "",
    "firefox_binary_path": "",
    "firefox_profile" : "",
    "accept_insecure_certs" : "0",
    "monitor_stats" : "1",
    "browser_width" : "1920",
    "browser_height" : "1080",
    "global_timeout" : "10",
    "wait_between_commands" : "0.2"
}

追加のモジュールを生成するために、次のカスタムコマンドを設定できます (すべてのカスタムコマンドは // で始まる必要があります)。

プラグインで実行可能なSIDEファイルのコマンドは以下の通りです（使用方法についてはSelenium IDEのドキュメントを参照してください）：

Pandora FMSでウェブスクラッピングを行うことは、複雑なトランザクションのパフォーマンスや結果を測定するために設計されたものですが、実現可能です。

ウェブスクレイピングとは、ウェブサイトから情報を自動で抽出する技術である。 手作業でデータを収集する代わりに、プログラムやスクリプトを使ってウェブページを閲覧し、関連する情報を特定してデータベースや構造化ファイルに保存する。

最も簡単な方法は、Web ページ ID から直接値を取得する方法（Selenium コンソール拡張のインスペクタを使用し、それを Pandora FMS に渡す）か、正規表現を使って 生 で HTML データを処理する方法です。 どちらの場合も、Selenium トランザクションに追加のコマンドを導入する必要があります。

例えば、ウェブスクラッパーとして使用し、Amazon Store®の商品の評価数を読み取り、値のキャプチャを使用して変数に格納します：

これはREVIEWという変数にTEXTという型として格納される。 そして、その変数の値を表示するための追加コマンドechoが作成される：

ここでは、Seleniumエクステンションによって生成された.sideコードの最後の2つのステップを見ることができる：

{
  "id": "55546183-fc2f-45b5-af7e-2ff27464798f",
  "comment": "",
  "command": "storeText",
  "target": "css=.a-spacing-medium > .a-size-base",
  "targets": [
    [
      "css=.a-spacing-medium > .a-size-base",
      "css:finder"
    ],
    [
      "xpath=//div[@id='cm_cr_dp_d_rating_histogram']/div[3]/span",
      "xpath:idRelative"
    ],
    [
      "xpath=//span/div/div/div/div/div/div[3]/span",
      "xpath:position"
    ]
  ],
  "value": "REVIEW"
}

{
  "id": "69cd3cea-5981-4011-bb3d-88a1b58dc18e",
  "comment": "",
  "command": "echo",
  "target": "${REVIEW}",
  "targets": [],
  "value": ""
}

この方法の欠点は、テキスト文字列として保存されることである。ID（この場合はspan）を使うことで、そのIDのタグの間はすべて保存されるからである。

より “洗練された “方法で値を取得したい場合は、正規表現を使用したparseメソッドを使用してテキストを処理する必要があります：

• この場合、Pandora FMS で数値が取得され、数値モジュールに変換されます。
• .sideのソースコードとして、作成されたコマンドはこのようなコードに変換される。 二重引用符のような文字がどのようにエスケープ " または \ 文字になるかに注意することが重要である。
• これを行うには、HTMLインスペクタを使って、値を取得したいコード領域を分析する必要がある：

タグの間にあるものを探す：

<span id="acrCustomerReviewText" class="a-size-base">''

そして

</span>

正規表現を適用すると次のようになる：

<span id="acrCustomerReviewText" class="a-size-base">(\d+) valoraciones</span>

これは、Selenium シーケンスの最後に「ダミー」コマンドを作成し（//でコメント）、getValueコマンドを使用して、AMZ_001、generic_dataタイプ（つまり、数値）、およびエスケープされた regexp を提供するモジュールを作成することによって行わなければなりません：

{
  "id": "ae557b25-b096-4d6e-baa7-f7219ac16e04",
  "comment": "",
  "command": [
    "//getValue;AMZ_001;generic_data;",
    "<span id=\"acrCustomerReviewText\"",
    " class=\"a-size-base\">(\\d+) valoraciones</span>"
  ],
  "target": "",
  "targets": [],
  "value": ""
}

実行後は、従来の Pandora FMS データが返され、アラートを適用したり、グラフやレポートに含めたりすることができます。

技術補足資料「WUX サーバと Selenium 3 を使用した WUX 監視」に記載しています。

Pandora FMS ドキュメント一覧に戻る