스크립팅된 브라우저는 웹 사이트를 탐색하고 특정 작업을 수행하며 특정 요소가 있는지 확인하는 브라우저를 스크립팅하여 사용자 지정 사용자 경험을 에뮬레이트합니다. 스크립팅된 브라우저를 생성하려면 one.newrelic.com > Synthetic monitoring > Create a monitor 이동한 다음 User flow / functionality 타일을 선택합니다.
사용 가능한 모든 기능 목록은 스크립팅된 브라우저 참조 를 참조하십시오.
스크립팅된 모니터는 Selenium WebDriverJS 에 의해 구동됩니다. 스크립트가 실행될 때마다 New Relic은 웹사이트를 탐색하고 스크립트의 각 단계를 따르는 완전히 가상화된 Selenium 기반 Google Chrome 브라우저를 만듭니다. 종합 모니터링에는 스크립팅을 단순화하기 위해 기능, 로케이터 및 기타 요소를 제안하는 IDE 스타일 스크립트 편집기가 포함됩니다.
Selenium IDE를 사용하여 워크플로를 기록하고 New Relic에서 요구하는 형식으로 내보내는 방법을 보려면 이 짧은 YouTube 동영상(3분 49초)을 시청하세요.
URL 방문 모든 스크립트는 모니터가 탐색해야 하는 URL을 지정하는 것으로 시작합니다. URL을 지정하려면 $browser.get("url")
를 호출합니다.
$browser.get("https://mywebsite.com");
시퀀스 작업 WebDriverJS는 비동기식이므로 스크립팅 작업이 순서 없이 실행될 수 있습니다. 스크립트 작업을 순서대로 실행하려면 then(function(){})
호출에서 각 작업을 래핑합니다.
$browser.get("https://my-website.com").then(function(){
return $browser.findElement($driver.By.linkText("Configuration Panel"));
여러 작업을 순서대로 연결하려면 각 작업을 then(function(){})
호출로 래핑하고 호출을 함께 연결합니다.
$browser.get("https://my-website.com").then(function(){
return $browser.findElement($driver.By.linkText("Configuration Panel"));
return $browser.findElement($driver.By.partialLinkText("Configuration Pa"));
요소 찾기 모니터링할 URL을 지정한 후에는 일반적으로 페이지에서 특정 요소를 찾고 싶을 것입니다. 요소를 찾으면 페이지에서 요소가 존재하는지 확인하고 페이지 요소와 상호 작용할 수도 있습니다.
class
, id
, link text
, name
또는 XPath로 요소를 찾을 수 있습니다. 이러한 속성을 찾으려면 브라우저의 개발자 도구를 사용하거나 웹사이트의 소스 코드를 보십시오. 모든 로케이터 기능 목록은 로케이터: 페이지 요소 찾기 를 참조하십시오.
CSS 클래스로 찾기 HTML class
로 요소를 찾습니다(예: class="button"
). 클래스는 일반적으로 CSS 스타일 지정을 위해 지정됩니다. 클래스별로 요소를 찾을 때 모니터는 해당 클래스가 있는 페이지의 첫 번째 요소를 선택합니다.
$browser.findElement($driver.By.className("button"));
HTML ID로 찾기 정확한 HTML id
로 요소를 찾습니다(예: id="edit-submit"
). 이것은 페이지 요소를 찾는 간단한 방법이지만 변경될 가능성이 없는 id
를 지정하는 데 주의하십시오.
$browser.findElement($driver.By.id("edit-submit"));
id
으로 요소를 찾는 예 는 페이지 요소 기다림을 참조하세요.
링크 텍스트로 찾기 표시된 링크 텍스트로 요소를 찾습니다. 예: <a href="http://example.com>your link text here</a>
. 정확한 링크 텍스트( $driver.By.linkText
) 또는 부분 일치( $driver.By.partialLinkText
)로 찾을 수 있습니다.
$browser.findElement($driver.By.linkText("Configuration Panel"));
$browser.findElement($driver.By.partialLinkText("Configuration Pa"));
링크 텍스트로 링크를 찾는 예는 링크로 이동 을 참조하십시오.
이름으로 찾기 정확한 HTML name
로 요소를 찾습니다(예: name="search-query-field"
). 이것은 검색 상자와 같은 입력 필드와 함께 가장 일반적으로 사용됩니다.
$browser.findElement($driver.By.name("search-query-field"));
name
으로 요소를 찾는 예 는 웹사이트에 로그인을 참조하십시오.
XPath로 찾기 더 복잡한 페이지 구조의 경우 XPath를 사용하여 대상 요소를 찾을 수 있습니다.
$browser.findElement($driver.By.xpath("//input[@placeholder = 'search-query-field']"));
XPath 선택기는 웹사이트의 구조가 변경되면 중단될 수 있습니다. 좋은 XPath 선택기를 만드는 방법에 대한 팁은 XPath 선택기 최적화 를 참조하세요. xpath로 요소를 찾는 예 는 웹 사이트 검색 을 참조하십시오.
팁 특정 요소에 대한 XPath를 빠르게 찾으려면 브라우저의 개발자 도구를 사용하십시오. 예를 들어 Chrome에서:
Chrome에서 대상 웹사이트로 이동합니다. 대상 요소를 마우스 오른쪽 버튼으로 클릭한 다음 요소 검사 를 선택합니다. 자동으로 열리는 개발자 도구 패널에서 강조 표시된 대상 요소를 찾습니다. 대상 요소를 마우스 오른쪽 버튼으로 클릭한 다음 XPath 복사 를 선택합니다. 요소와 상호 작용 스크립팅된 모니터는 실제 Selenium 기반 Google Chrome 브라우저를 구동하기 때문에 스크립팅된 모니터는 사용자와 동일한 방식으로 페이지 요소와 상호 작용할 수 있습니다. 예를 들어 모니터는 링크를 클릭하고 검색 상자에 텍스트를 입력하는 등의 작업을 수행할 수 있습니다. 사용 가능한 작업 목록은 ActionSequence: 여러 작업 연결 을 참조하십시오.
먼저 페이지 요소를 찾은 다음 상호 작용 함수를 호출합니다.
페이지 요소 클릭 링크나 다른 페이지 요소를 클릭하려면 요소를 찾아 click()
함수를 호출합니다.
$browser.findElement($driver.By.linkText("Configuration Panel")).click();
$browser.findElement($driver.By.className("config-panel-02")).click();
찾은 요소를 클릭하는 예는 링크로 이동 을 참조하십시오.
팁 doubleClick()
, dragAndDrop()
, mouseDown
, mouseUp
및 mouseMove
함수를 사용하여 다른 방법으로 마우스를 제어할 수 있습니다.
텍스트 입력 필드에 텍스트를 입력하려면 필드를 찾고 sendKeys()
함수를 호출합니다.
$browser.findElement($driver.By.name("search-query-field")).sendKeys("EXAMPLE USER NAME");
$browser.findElement($driver.By.id("search-q-box")).sendKeys("EXAMPLE USER NAME");
일부 필드에는 기본 텍스트가 있을 수 있습니다. 텍스트를 보내기 전에 다음 필드를 지우 십시오.
$browser.findElement($driver.By.name("search-query-field")).clear();
$browser.findElement($driver.By.id("search-q-box")).clear();
필드에 텍스트를 입력하는 예 는 웹 사이트 검색 을 참조하십시오.
팁 keyDown()
및 keyUp()
함수를 사용하여 수정자 키(예: ALT
및 SHIFT
)를 추가할 수 있습니다.
대기 및 시간 초과 이미지나 복잡한 동적 콘텐츠와 같은 큰 페이지 요소는 로드하는 데 시간이 오래 걸릴 수 있습니다. 이로 인해 모니터가 아직 로드되지 않은 요소와 상호 작용하거나 요소를 찾으려고 할 때 스크립트가 실패할 수 있습니다.
이러한 문제를 방지하려면 지정된 페이지 요소가 나타날 때까지 스크립트를 일시 중지하거나 수동으로 작업 순서 를 지정하는 대기 조건을 설정하십시오. 조건 목록은 조건: 조건 일시 중지 및 대기 를 참조하십시오.
중요 최대 실행 시간 3분 후 New Relic은 스크립트를 수동으로 중지합니다.
페이지 제목을 기다립니다 페이지 제목이 특정 값과 일치할 때까지 모니터에 지시합니다. 이렇게 하면 브라우저가 대상 페이지에서 최소한 일부 데이터를 수신할 수 있습니다. 페이지 제목을 기다리려면 예상 제목과 시간 제한 값을 밀리초 단위로 지정하십시오.
$browser.wait(function() {
//Tell the monitor to get the page title, then run a function on that title.
return $browser.getTitle().then(function(title) {
//Specify the expected page title.
return title === "Your Page Title Here";
//If the condition is not satisfied within a timeout of 1000 milliseconds (1 second), proceed anyway.
페이지 제목을 기다리는 예 는 페이지가 로드될 때 까지 대기 를 참조하십시오.
특정 요소를 기다립니다. 페이지 요소가 표시될 때까지 모니터에 지시합니다. 이것은 스크립트가 의존하는 요소를 로드하는 데 오랜 시간이 걸리거나 단순히 스크립트가 클릭하기 전에 페이지 요소가 있는지 확인하는 데 유용합니다.
아래 대기 기능과 함께 찾기 기능 을 사용하십시오. 아래에 사용된 $driver.By.linkText
함수 대신 원하는 함수를 사용하세요.
//Tell the monitor to wait up to 7,500 milliseconds (7.5 seconds) for a link whose text is `Your Link Text Here`.
$browser.waitForAndFindElement($driver.By.linkText("Your Link Text Here"), 7500);
특정 페이지 요소가 로드되기를 기다리는 예는 페이지 요소 대기 를 참조하십시오.
중요 waitForAndFindElement()
완전히 다른 요소 뒤에 있거나 크기가 0인 경우 요소를 찾지 못합니다. 여전히 불투명도가 0인 요소를 찾습니다.
로그 스크립트 결과 모니터 결과를스크립트 로그 에 수동으로 기록할 수도 있습니다. 로깅을 사용하여 스크립트 문제 해결: 스크립트의 어느 단계가 실패했는지 확인하려면 스크립트의 각 주요 단계와 함께 로그 기능을 포함하십시오.
중요 최대 로그 길이는 50,000바이트입니다. 50,000바이트보다 큰 스크립트 로그는 잘립니다.
정적 텍스트 기록 한 줄의 정적 텍스트를 기록하려면 console.log()
를 호출합니다.
//Send `Hello world.` to the console log.
console.log('Hello world.');
결과는다음과 같습니다.
// ----------------------------------- Console log
로그 함수에 변수 전달 정적 텍스트를 로깅 하는 것 외에도 변수를 console.log()
에 전달할 수도 있습니다.
//Declare the variable `WEBSITE_URL`
var assert = require('assert'),
WEBSITE_URL = 'https://my-website.com/';
console.log('Hello world.');
//Load the website specified in `WEBSITE_URL`
$browser.get(WEBSITE_URL);
//Log our success to the console
console.log('Success for', WEBSITE_URL);
다음 결과를 찾으십시오 .
// ----------------------------------- Console log
Success for https://my-website.com/
분석 서비스 차단 해제 Synthetics는 기본적으로 널리 사용되는 분석 서비스의 스크립트 실행을 차단합니다. 지정된 서비스에 대해 스크립트가 실행되도록 허용할 수 있습니다. 이를 통해 서비스의 스크립트는 실제 사용자와 마찬가지로 데이터를 실행하고 수집할 수 있습니다.
//Allow Google Analytics scripts to run
$browser.addHostnameToWhitelist(hostnameArr: ['google-analytics.com']);
//Visit https://my-website.com
$browser.get('https://my-website.com');
사용자 에이전트 사용자 지정 스크립트로 작성된 브라우저의 사용자 에이전트를 사용자 지정하여 앱의 브라우저별 수정 사항이 제대로 작동하도록 하거나 내부 사이트를 필터링하기 위해 보안 메커니즘을 우회할 수 있습니다.
//Simulate Internet Explorer 10.6
$browser.addHeader('User-Agent', 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0');
//Visit http://httpbin.org/user-agent
$browser.get('http://httpbin.org/user-agent');
중요 이것은 서버에 대한 요청에 대한 사용자 에이전트 HTTP 헤더만 스푸핑합니다. navigator.userAgent
값은 변경되지 않습니다.
선택적 모듈 가져오기 또한 많은 인기 있는 Node.js 모듈을 가져와 테스트 제품군을 향상하고 테스트 데이터 삽입을 자동화하며 복잡한 기능을 단순화할 수 있습니다. 자세한 내용은 Node.js 모듈 가져오기 를 참조하세요.