브라우저 아이템

개요

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

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

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

브라우저 아이템 점검은 Zabbix 서버 또는 프록시의 브라우저 폴러(browser poller)가 실행하고 처리합니다. 필요한 경우 Zabbix 서버/프록시 설정 파일의 StartBrowserPollers 매개변수로 사전 생성(pre-forked)되는 브라우저 폴러 인스턴스 수를 조정할 수 있습니다.

복잡한 웹사이트와 웹 애플리케이션을 모니터링하려면 기본 제공 템플릿(out-of-the-box template)인 Website by Browser 템플릿을 이용할 수 있습니다.

설정

아이템 설정 폼의 Type 필드에서 Browser를 선택한 다음 필수 필드를 입력합니다.

필수 입력 필드는 모두 빨간색 별표로 표시되어 있습니다.

브라우저 아이템에 특정 정보가 필요한 필드는 다음과 같습니다.

예시

Website by Browser 템플릿을 사용해 웹사이트 모니터링을 위한 Zabbix 설정 방법의 예시는 브라우저 아이템으로 웹사이트 모니터링하기를 참고하세요.

기본 스크립트

다음 스크립트는:

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

Script 필드에 다음을 입력합니다.

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

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

사용자 지정 기능(capabilities)으로 브라우저 초기화

다음 스크립트는:

1. 스크립트 내에 지정된 순서대로 처음 일치하는 브라우저를 기준으로 사용 가능한 브라우저의 세션을 초기화합니다.
2. 페이지 로드 전략과, Chrome·Firefox·Microsoft Edge 브라우저의 헤드리스 모드 같은 각 브라우저별 옵션을 포함한 브라우저 기능(capabilities)을 정의합니다.

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가 브라우저 실행 파일(binary)을 찾지 못하는 경우, 경로를 직접 지정할 수 있습니다.

var opts = Browser.chromeOptions();
opts.capabilities.alwaysMatch['goog:chromeOptions'].args = [];

// To initialize a Firefox session with GUI, uncomment the following lines:
// var opts = Browser.firefoxOptions();
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].binary = 'usr/bin/firefox';
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].args = [];

// To initialize a Microsoft Edge session with GUI, uncomment the following lines:
// 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 -
• 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);
}

링크 찾기

다음 스크립트는:

1. 브라우저 세션을 초기화합니다.
2. 배열에서 중복 요소를 제거하는 함수를 정의합니다(5단계 참고).
3. 페이지로 이동합니다(매개변수로 지정, 아래 참고).
4. 페이지에서 링크를 찾습니다.
5. 중복 링크를 제거하여 고유하게 만듭니다.
6. "http"로 시작하는 링크만 추출합니다.
7. 추출한 링크를 특정 구조로 형식화합니다.
8. 오류 메시지와 스크린샷을 캡처하여 오류를 처리합니다.
9. 수집된 결과를 JSON 문자열로 반환합니다.

이 스크립트는 아이템 설정 폼의 매개변수도 사용합니다.

• scheme -
• domain -
• 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);
}