Table of Contents

19 Browser监控项

19 Browser监控项

概览

浏览器监控项允许使用浏览器监控复杂的网站和Web应用程序。

浏览器监控项的支持目前处于实验阶段。

浏览器监控项通过执行用户定义的JavaScript代码并通过HTTP/HTTPS检索数据来收集数据。此监控项可以模拟与浏览器相关的操作，如点击、输入文本、浏览网页，以及其他用户与网站或Web应用程序的交互。

除了脚本，还可以指定一个可选的参数列表（名称和值的对）和超时时间。

监控项部分实现了W3C WebDriver标准，使用Selenium Server或纯WebDriver（例如，ChromeDriver）作为Web测试端点。要使监控项工作，需在Zabbix server/proxy配置文件的WebDriverURL参数中设置端点（如果使用ChromeDriver，请参阅安全注意事项）。为了获得更好的性能，考虑使用专用服务器为Web测试环境。

浏览器监控项的检查由Zabbix server或proxy的浏览器轮询器执行和处理。如有必要，您可以在Zabbix server/proxy配置文件的StartBrowserPollers参数中调整预分叉的浏览器轮询器实例的数量。

对于监控复杂的网站和Web应用程序，Website by Browser模板作为开箱即用模板可用。

配置

在监控项配置表单的类型字段中，选择浏览器，然后填写所需的字段。

所有必填输入字段都标有红色星号。

对于浏览器监控项，需要特定信息的字段如下：

字段	描述
键	输入一个唯一的键，用于标识监控项。
参数	指定要传递给脚本的变量，作为属性和值对。支持用户宏。要查看支持的内置宏，请在支持的宏表中搜索“浏览器类型监控项”。
脚本	在点击参数字段或其旁边的铅笔图标时打开的模态编辑器中输入JavaScript代码。此代码必须提供返回指标值的逻辑。代码可以访问所有参数，所有附加JavaScript对象以及Zabbix添加的浏览器监控项JavaScript对象。另请参阅：JavaScript指南。
超时时间	JavaScript执行超时时间（1-600秒；超过此时间将返回错误）。请注意，根据脚本的不同，可能需要更长的时间才能触发超时。有关超时时间参数的更多信息，请参阅通用监控项属性。

示例

有关如何使用Website by Browser模板设置Zabbix以监控网站的示例，请参阅使用Browser监控项监控网站。

默认脚本

以下脚本：

初始化一个浏览器会话。
导航到指定的 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浏览器的无头模式。

在 Script 字段中，输入：

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 = [];
       
       // 要以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）客户端连接到机器的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 字符串返回。

脚本还使用了来自item 配置表单的参数：

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

在脚本字段中，输入：

var browser, result;
       
       browser = new Browser(Browser.chromeOptions());
       
       try {
           var params = JSON.parse(value); // 解析包含从 Zabbix 传递的参数的 JSON 字符串。
       
           browser.navigate(params.webURL);
           browser.collectPerfEntries("打开页面");
       
           var el = browser.findElement("xpath", "//input[@id='name']");
           if (el === null) {
               throw Error("无法找到名称输入框");
           }
           el.sendKeys(params.username);
       
           el = browser.findElement("xpath", "//input[@id='password']");
           if (el === null) {
               throw Error("无法找到密码输入框");
           }
           el.sendKeys(params.password);
       
           el = browser.findElement("xpath", "//button[@id='enter']");
           if (el === null) {
               throw Error("无法找到登录按钮");
           }
           el.click();
       
           browser.collectPerfEntries("登录");
       
           el = browser.findElement("link text", "Sign out");
           if (el === null) {
               throw Error("无法找到登出按钮");
           }
           el.click();
       
           browser.collectPerfEntries("登出");
       
           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字符串返回。

脚本还使用了来自item配置表单的参数：

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 Browser监控项

概览

配置

示例

默认脚本

使用自定义功能初始化浏览器

捕获屏幕截图

检查 Zabbix 登录

查找链接