ブラウザアイテムを使用すると、ブラウザを使って複雑なウェブサイトやウェブアプリケーションを監視できます。
ブラウザアイテムのサポートは現在試験段階です。
ブラウザアイテムは、ユーザー定義の 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の設定例については、ブラウザアイテムを使用したウェブサイトの監視を参照してください。
以下のスクリプト:
Script フィールドに以下を入力します:
var browser = new Browser(Browser.chromeOptions());
try {
browser.navigate("http://example.com");
browser.collectPerfEntries();
}
finally {
return JSON.stringify(browser.getResult());
}
以下のスクリプト:
スクリプト フィールドに以下を入力します。
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"
}
]
}
});
デフォルトでは、ブラウザセッション(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);
テストがリモートサーバーまたはコンテナー内で実行されている場合は、Virtual Network Computing (VNC) クライアントを使用してマシンの VNC サーバーに接続できます。 これにより、ブラウザーの GUI をリモートから表示および操作できます。
以下のスクリプト:
このスクリプトは、アイテム設定フォーム のパラメータも使用します。
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);
}
以下のスクリプト:
このスクリプトは、アイテム設定フォーム のパラメータも使用します。
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);
}
以下のスクリプト:
このスクリプトは、アイテム設定フォームのパラメータも使用します。
スクリプト フィールドに以下を入力します。
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);
}