19 ブラウザアイテム

概要

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

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

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

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

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

設定

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

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

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

例

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

デフォルトスクリプト

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

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

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

var browser = new Browser(Browser.chromeOptions());

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

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

以下のスクリプトは:

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

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

以下のスクリプトは:

1. ブラウザセッションを初期化します。
2. ブラウザのビューポートサイズを設定してスクリーンショットのサイズを決定します（パラメータで指定、下記参照）。
3. URLに移動します（パラメータで指定、下記参照）。
4. セッション統計情報を収集し、スクリーンショットを撮影して収集した統計情報に追加します。
5. エラーが発生した場合は、エラーメッセージとスクリーンショットを取得します。
6. 収集した結果を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ログインのチェック

以下のスクリプトは、

1. ブラウザセッションを初期化します。
2. ページに移動します（パラメータで指定、下記参照）。
3. ユーザー名とパスワードを入力します（パラメータで指定、下記参照）。
4. ログインボタンを見つけてクリックします。
5. ログアウトボタンを見つけてクリックします。
6. ログイン前後およびログアウト後のパフォーマンスデータを収集します。
7. エラーが発生した場合、エラーメッセージとスクリーンショットを取得します。
8. 収集した結果を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);
}

リンクの検索

以下のスクリプトは:

1. ブラウザセッションを初期化します。
2. 配列から重複要素を削除する関数を定義します（ステップ5を参照）。
3. ページに移動します（パラメータで指定、下記参照）。
4. ページ上のリンクを検索します。
5. リンクの重複を削除し、一意にします。
6. "http"で始まるリンクのみを抽出します。
7. 抽出したリンクを特定の構造にフォーマットします。
8. エラーが発生した場合、エラーメッセージとスクリーンショットを取得します。
9. 収集した結果を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);
}