Table of Contents

19 ブラウザアイテム

19 ブラウザアイテム

概要

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

ブラウザアイテムのサポートは現在試験段階です。

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

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

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

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

複雑なウェブサイトやウェブアプリケーションを監視する場合は、Website by Browser テンプレートがすぐに使用できるテンプレートとして提供されています。

設定

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

必須入力フィールドには赤いアスタリスクがあります。

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

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

例

Website by Browser テンプレートを使用してウェブサイトを監視するためのZabbixの設定例については、ブラウザアイテムを使用したウェブサイトの監視を参照してください。

デフォルトのスクリプト

以下のスクリプト:

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

Script フィールドに以下を入力します:

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

Copy

✔ Copied

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

以下のスクリプト:

スクリプト内で指定された順序で最初に一致するブラウザに基づいて、利用可能なブラウザのブラウザセッションを初期化します。
ページ読み込み戦略や、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"
                   }
               ]
           }
       });

Copy

✔ Copied

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

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

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

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

var opts = Browser.chromeOptions();
       opts.capabilities.alwaysMatch['goog:chromeOptions'].args = [];
       
       // Firefox セッションを GUI で初期化するには、以下の行のコメントを解除します。
       // 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);

Copy

✔ Copied

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

スクリーンショット取得

以下のスクリプト：

ブラウザセッションを初期化します。
ブラウザのビューポートサイズを設定し、スクリーンショットのサイズを決定します。（パラメータとして指定します。下記参照）
URL に移動します。（パラメータとして指定します。下記参照）
セッション統計情報を収集し、スクリーンショットをキャプチャして、収集済みの統計情報に追加します。
エラーメッセージとスクリーンショットをキャプチャすることでエラーを処理します。
収集した結果を JSON 文字列として返します。

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

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

Script フィールドに以下を入力します。

var browser, result;
       
       var browser = new Browser(Browser.chromeOptions());
       
       try {
           var params = JSON.parse(value); // Parse the JSON string containing parameters passed from Zabbix.
       
           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);
       }

Copy

✔ Copied

Zabbix ログインの確認

以下のスクリプト：

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

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

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

Script フィールドに以下を入力します。

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);
       }

Copy

✔ Copied

リンクの検索

以下のスクリプト：

ブラウザセッションを初期化します。
配列から重複要素を削除する関数を定義します（手順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);  // Parse the JSON string containing parameters passed from Zabbix.
       
           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);
       }

Copy

✔ Copied

Documentation

19 ブラウザアイテム

概要

設定

例

デフォルトのスクリプト

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

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

スクリーンショット取得

Zabbix ログインの確認

リンクの検索