Table of Contents

19 ブラウザアイテム

19 ブラウザアイテム

概要

ブラウザーアイテムを使用すると、ブラウザーを使用して複雑なWebサイトやWebアプリケーションを監視できます。

ブラウザーアイテムのサポートは現在実験的なものです。

ブラウザーアイテムは、ユーザー定義のJavaScriptコードを実行し、HTTP/HTTPS経由でデータを取得することでデータを収集します。このアイテムは、クリック、テキスト入力、Webページのナビゲーション、その他のWebサイトやWebアプリケーションでのユーザー操作など、ブラウザー関連のアクションをシミュレートできます。

スクリプトに加えて、オプションでパラメーターのリスト（名前と値のペア）やタイムアウトを指定できます。

このアイテムは、W3C WebDriver標準を部分的に実装しており、Selenium ServerまたはプレーンなWebDriver（例：ChromeDriver）をWebテストエンドポイントとして使用します。アイテムを動作させるには、Zabbix サーバー/プロキシの設定ファイルでWebDriverURLパラメーターにエンドポイントを設定してください（ChromeDriverを使用する場合は、セキュリティに関する考慮事項を参照）。パフォーマンス向上のため、Webテスト環境用に専用サーバーの使用を検討してください。

ブラウザーアイテムのチェックは、Zabbixサーバーまたはプロキシのブラウザーポーラーによって実行および処理されます。必要に応じて、Zabbix サーバー/プロキシの設定ファイルでStartBrowserPollersパラメーターを使用して、ブラウザーポーラーの事前フォークインスタンス数を調整できます。

複雑なWebサイトやWebアプリケーションの監視には、Website by Browserテンプレートが標準テンプレートとして利用できます。

設定

アイテム設定フォームのタイプフィールドで「ブラウザー」を選択し、必要なフィールドに入力します。

すべての必須入力フィールドには赤いアスタリスクが付いています。

ブラウザーアイテムに固有の情報が必要なフィールドは次のとおりです。

フィールド	説明
キー	アイテムを識別するために使用される一意のキーを入力します。
パラメーター	スクリプトに渡す変数を属性と値のペアで指定します。ユーザーマクロがサポートされています。サポートされている組み込みマクロを確認するには、サポートされているマクロテーブルで「ブラウザータイプのアイテム」を検索してください。
スクリプト	パラメーターフィールドをクリックするか、その横の鉛筆アイコンをクリックすると開くモーダルエディターにJavaScriptコードを入力します。このコードはメトリック値を返すロジックを提供する必要があります。コードは、すべてのパラメーター、すべての追加JavaScriptオブジェクト、およびZabbixによって追加されたブラウザーアイテムJavaScriptオブジェクトにアクセスできます。参考: JavaScriptガイド。
タイムアウト	JavaScript実行のタイムアウト（1～600秒；これを超えるとエラーが返されます）。スクリプトによっては、タイムアウトが発生するまでに時間がかかる場合があります。タイムアウトパラメーターの詳細については、一般的なアイテム属性を参照してください。

例

Website by Browser テンプレートを使用してWebサイトを監視するためのZabbixのセットアップ方法の例については、BrowserアイテムでWebサイトを監視するを参照してください。

デフォルトスクリプト

以下のスクリプトは、次の処理を行います。

ブラウザーセッションを初期化します。
指定されたURLに移動します。
パフォーマンスエントリとセッション統計を収集し、JSON文字列として返します。

スクリプト フィールドに以下を入力します。

var browser = new Browser(Browser.chromeOptions());
       
       try {
           browser.navigate("http://example.com");
           browser.collectPerfEntries();
       }
       finally {
           return JSON.stringify(browser.getResult());
       }

カスタム機能でブラウザを初期化する

以下のスクリプトは:

スクリプト内で指定された順序で最初に一致するブラウザに基づいて、利用可能なブラウザのセッションを初期化します。
ページロード戦略や、Chrome、Firefox、Microsoft Edgeブラウザのヘッドレスモードなど、各ブラウザ固有のオプションを含むブラウザ機能を定義します。

スクリプト フィールドに以下を入力します:

var browser = new Browser({
           "capabilities":{
               "firstMatch":[
                   {
                       "browserName":"chrome",
                       "pageLoadStrategy":"normal",
                       "goog:chromeOptions":{
                           "args":[
                               "--headless=new"
                           ]
                       }
                   },
                   {
                       "browserName":"firefox",
                       "pageLoadStrategy":"normal",
                       "moz:firefoxOptions":{
                           "args":[
                               "--headless"
                           ]
                       }
                   },
                   {
                       "browserName":"MicrosoftEdge",
                       "pageLoadStrategy":"normal",
                       "ms:edgeOptions":{
                           "args":[
                               "--headless=new"
                           ]
                       }
                   },
                   {
                       "browserName":"safari",
                       "pageLoadStrategy":"normal"
                   }
               ]
           }
       });

GUIでブラウザを初期化する

デフォルトでは、ブラウザセッション（Safariを除く）はヘッドレスモードで初期化されます。つまり、ブラウザのグラフィカルユーザーインターフェース（GUI）は表示されません。

以下のスクリプトは、GUIを有効にしたブラウザセッションを初期化します。

WebDriverがブラウザのバイナリを見つけられない場合は、パスを手動で指定できます。

var opts = Browser.chromeOptions();
       opts.capabilities.alwaysMatch['goog:chromeOptions'].args = [];
       
       // GUIでFirefoxセッションを初期化するには、以下の行のコメントを外してください。
       // var opts = Browser.firefoxOptions();
       // opts.capabilities.alwaysMatch['moz:firefoxOptions'].binary = 'usr/bin/firefox';
       // opts.capabilities.alwaysMatch['moz:firefoxOptions'].args = [];
       
       // GUIでMicrosoft Edgeセッションを初期化するには、以下の行のコメントを外してください。
       // var opts = Browser.edgeOptions();
       // opts.capabilities.alwaysMatch['ms:edgeOptions'].binary = 'usr/bin/microsoft-edge';
       // opts.capabilities.alwaysMatch['ms:edgeOptions'].args = [];
       
       var browser = new Browser(opts);

テストがリモートサーバーやコンテナで実行されている場合は、VNC（Virtual Network Computing）クライアントを使用してマシンのVNCサーバーに接続できます。これにより、ブラウザのGUIをリモートで表示および操作できます。

スクリーンショットを撮る

以下のスクリプトは:

ブラウザセッションを初期化します。
ブラウザのビューポートサイズを設定してスクリーンショットのサイズを決定します（パラメータで指定、下記参照）。
URLに移動します（パラメータで指定、下記参照）。
セッション統計情報を収集し、スクリーンショットを撮影して収集した統計情報に追加します。
エラーが発生した場合は、エラーメッセージとスクリーンショットを取得します。
収集した結果をJSON文字列として返します。

このスクリプトは、アイテム設定フォームからのパラメータも使用します:

webURL - http://example.com
width - 1920
height - 1080

スクリプト フィールドに以下を入力します:

var browser, result;
       
       var browser = new Browser(Browser.chromeOptions());
       
       try {
           var params = JSON.parse(value); // Zabbixから渡されたパラメータを含むJSON文字列を解析します。
       
           browser.setScreenSize(Number(params.width), Number(params.height))
       
           browser.navigate(params.webURL);
       
           result = browser.getResult();
           result.screenshot = browser.getScreenshot();
       }
       catch (err) {
           if (!(err instanceof BrowserError)) {
               browser.setError(err.message);
           }
           result = browser.getResult();
           result.error.screenshot = browser.getScreenshot();
       }
       finally {
           return JSON.stringify(result);
       }

Zabbixログインのチェック

以下のスクリプトは、

ブラウザセッションを初期化します。
ページに移動します（パラメータで指定、下記参照）。
ユーザー名とパスワードを入力します（パラメータで指定、下記参照）。
ログインボタンを見つけてクリックします。
ログアウトボタンを見つけてクリックします。
ログイン前後およびログアウト後のパフォーマンスデータを収集します。
エラーが発生した場合、エラーメッセージとスクリーンショットを取得します。
収集した結果をJSON文字列として返します。

また、アイテム設定フォームのパラメータも使用します。

webURL - http://{HOST.CONN}/index.php
username - {$USERNAME}
password - {$PASSWORD}

スクリプト フィールドには、以下を入力します。

var browser, result;
       
       browser = new Browser(Browser.chromeOptions());
       
       try {
           var params = JSON.parse(value); // Parse the JSON string containing parameters passed from Zabbix.
       
           browser.navigate(params.webURL);
           browser.collectPerfEntries("open page");
       
           var el = browser.findElement("xpath", "//input[@id='name']");
           if (el === null) {
               throw Error("cannot find name input field");
           }
           el.sendKeys(params.username);
       
           el = browser.findElement("xpath", "//input[@id='password']");
           if (el === null) {
               throw Error("cannot find password input field");
           }
           el.sendKeys(params.password);
       
           el = browser.findElement("xpath", "//button[@id='enter']");
           if (el === null) {
               throw Error("cannot find login button");
           }
           el.click();
       
           browser.collectPerfEntries("login");
       
           el = browser.findElement("link text", "Sign out");
           if (el === null) {
               throw Error("cannot find logout button");
           }
           el.click();
       
           browser.collectPerfEntries("logout");
       
           result = browser.getResult();
       }
       catch (err) {
           if (!(err instanceof BrowserError)) {
               browser.setError(err.message);
           }
           result = browser.getResult();
           result.error.screenshot = browser.getScreenshot();
       }
       finally {
           return JSON.stringify(result);
       }

リンクの検索

以下のスクリプトは:

ブラウザセッションを初期化します。
配列から重複要素を削除する関数を定義します（ステップ5を参照）。
ページに移動します（パラメータで指定、下記参照）。
ページ上のリンクを検索します。
リンクの重複を削除し、一意にします。
"http"で始まるリンクのみを抽出します。
抽出したリンクを特定の構造にフォーマットします。
エラーが発生した場合、エラーメッセージとスクリーンショットを取得します。
収集した結果をJSON文字列として返します。

また、アイテム設定フォームのパラメータも使用します:

scheme - {$WEBSITE.SCHEME}
domain - {$WEBSITE.DOMAIN}
path - {$WEBSITE.PATH}

スクリプト フィールドに以下を入力します:

var browser, result;
       
       browser = new Browser(Browser.chromeOptions());
       
       try {
           var params = JSON.parse(value);  // Zabbixから渡されたパラメータを含むJSON文字列を解析します。
       
           function uniq(a) {
               return a.sort().filter(function (item, pos, ary) {
                   return !pos || item != ary[pos - 1];
               });
           }
       
           browser.navigate(params.scheme + '://' + params.domain + params.path);
       
           var el = browser.findElements("link text", "");
           var links = [];
           for (var n = 0; n < el.length; n++) {
               links.push(el[n].getAttribute('href'));
           }
       
           links = uniq(links);
       
           result = [];
           for (i = 0; i < links.length; i++) {
               if (links[i].match(/^http.*/)) {
                   var row = {};
                   row["{#URL}"] = links[i];
                   result.push(row);
               }
           }
       }
       catch (err) {
           if (!(err instanceof BrowserError)) {
               browser.setError(err.message);
           }
           result = browser.getResult();
           result.error.screenshot = browser.getScreenshot();
       }
       finally {
           return JSON.stringify(result);
       }

Documentation

19 ブラウザアイテム

概要

設定

例

デフォルトスクリプト

カスタム機能でブラウザを初期化する

GUIでブラウザを初期化する

スクリーンショットを撮る

Zabbixログインのチェック

リンクの検索