17 브라우저 항목

개요

브라우저 아이템은 브라우저를 사용하여 복잡한 웹사이트와 웹 애플리케이션을 모니터링할 수 있게 해줍니다.

브라우저 아이템은 사용자 정의 JavaScript 코드를 실행하고 HTTP/HTTPS를 통해 데이터를 검색하여 데이터를 수집합니다. 이 아이템은 클릭, 텍스트 입력, 웹 페이지 탐색 및 웹사이트나 웹 애플리케이션과의 기타 사용자 상호작용과 같은 브라우저 관련 작업을 시뮬레이션할 수 있습니다.

스크립트 외에도 선택적으로 매개변수 목록(이름과 값의 쌍)과 타임아웃을 지정할 수 있습니다.

브라우저 아이템 점검은 Zabbix 서버 또는 프록시 브라우저 폴러에 의해 실행되고 처리됩니다. 필요한 경우 Zabbix 서버/프록시 구성 파일의 StartBrowserPollers 매개변수에서 브라우저 폴러의 미리 포크된 인스턴스 수를 조정할 수 있습니다.

복잡한 웹사이트와 웹 애플리케이션 모니터링을 위해 Website by Browser 템플릿이 기본 제공 템플릿으로 제공됩니다.

설정

아이템 설정 폼의 유형 필드에서 Browser를 선택한 후 필수 필드를 입력하세요.

모든 필수 입력 필드는 빨간색 별표로 표시됩니다.

Browser 아이템에 대한 특정 정보가 필요한 필드는 다음과 같습니다:

예제

Website by Browser 템플릿을 사용하여 웹사이트 모니터링을 위한 Zabbix 설정 예제는 브라우저 아이템으로 웹사이트 모니터링을 참조하세요.

기본 스크립트

다음 스크립트는:

1. 브라우저 세션을 초기화합니다.
2. 지정된 URL로 이동합니다.
3. 성능 항목과 세션 통계를 수집하고, JSON 문자열로 반환합니다.

Script 필드에 다음을 입력하세요:

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 브라우저의 헤드리스 모드와 같이 각 브라우저별 옵션과 페이지 로드 전략을 포함한 브라우저 기능을 정의합니다.

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

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

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

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}

Script 필드에 다음을 입력하세요:

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