개요

브라우저 테스트는 Datadog이 사용자의 웹 애플리케이션에서 실행하는 시나리오입니다. 구성 가능한 간격에 따라 전 세계의 여러 위치에서 다양한 브라우저 및 장치를 통해 실행됩니다. 이 테스트는 애플리케이션이 실행 중이며 요청에 응답하고 있는지, 시나리오에 정의된 조건이 충족되는지를 검증합니다.

테스트 구성

다음 옵션 중 하나를 사용하여 테스트를 생성할 수 있습니다.

템플릿으로 테스트 생성

1. 사전에 채워진 템플릿 중 하나에 마우스를 올리고 View Template을 클릭합니다. 이렇게 하면 Test Details, Alert Conditions, Steps, Variables(옵션) 등 사전에 채워진 구성 정보가 표시되는 사이드 패널이 열립니다.
2. +Create Test를 클릭하여 구성 페이지를 열면 사전에 채워진 구성 옵션을 검토하고 편집할 수 있습니다. 표시되는 필드는 테스트 처음 생성 시 제공되는 필드와 동일합니다.
3. 오른쪽 상단의 Save & Quit을 클릭하여 브라우저 테스트를 제출합니다.
   
   

처음부터 테스트 빌드

1. 새 브라우저 테스트를 처음부터 시작하려면
   템플릿을 클릭합니다.
2. Starting URL 입력: 브라우저 테스트가 시나리오를 시작하는 URL입니다.
3. name 추가: 브라우저 테스트의 이름입니다.
4. environment and additional tags 선택: 브라우저 테스트에 연결된 env 및 관련 태그를 설정합니다. <KEY>:<VALUE> 형식을 사용해 지정된 <KEY>의 <VALUE>를 필터링합니다.

5. browsers and devices를 선택합니다. 테스트를 실행할 브라우저(예: Chrome, Firefox, Edge)와 장치(예: Laptop Large, Tablet, Mobile Small)입니다.

   • 대형 노트북 장치의 경우 크기는 1440 픽셀 x 1100 픽셀입니다.
   • 태블릿 장치의 경우 크기는 768 픽셀 x 1020 픽셀입니다.
   • 소형 모바일 장치의 경우 크기는 320 픽셀 x 550 픽셀입니다.

6. managed and private locations 선택: Datadog이 관리하는 전 세계의 위치 목록에서 선택하거나 프라이빗 위치를 생성하여 사용자 지정 위치 또는 내부 프라이빗 네트워크에서 브라우저 테스트를 실행합니다.

   참고: 또한 Continuous Testing Tunnel을 사용하여 로컬 개발 환경이나 CI/CD 파이프라인에서 테스트를 트리거해 내부 환경을 테스트할 수도 있습니다.

7. test frequency 설정: 간격은 1분마다부터 일주일에 한 번까지 다양합니다.

8. Save & Edit Recording을 클릭하여 브라우저 테스트를 제출합니다.

위치

Datadog’s out-of-the-box managed locations allow you to test public-facing websites and endpoints from regions where your customers are located.

AWS:

GCP:

Azure:

The Datadog for Government site (US1-FED) uses the following managed location:

코드 조각

Synthetic Monitoring 브라우저 테스트를 설정할 때 수동으로 옵션을 선택하지 말고 코드 조각을 사용해 장치와 리전 정보를 자동으로 입력하세요. 다음 코드 조각을 사용할 수 있습니다.

• Screen sizes: 브라우저 전반에서 특정 화면 크기로 브라우저 테스트를 자동으로 수행합니다.

  • Large
  • Tablet
  • Mobile

• Multi-region check: 세 가지 주요 리전(AMER, APAC, EMEA) 각각의 위치에서 웹사이트를 자동으로 테스트합니다.
  
  

고급 옵션

Create local variables

To create a local variable, click + All steps > Variables. You can select one of the following available builtins to add to your variable string:

{{ numeric(n) }}

Generates a numeric string with n digits.

{{ alphabetic(n) }}

Generates an alphabetic string with n letters.

{{ alphanumeric(n) }}

Generates an alphanumeric string with n characters.

{{ date(n unit, format) }}

Generates a date in one of Datadog’s accepted formats with a value corresponding to the UTC date the test is initiated at + or - n units.

{{ timestamp(n, unit) }}

Generates a timestamp in one of Datadog’s accepted units with a value corresponding to the UTC timestamp the test is initiated at +/- n units.

{{ uuid }}

Generates a version 4 universally unique identifier (UUID).

{{ public-id }}

Injects the Public ID of your test.

{{ result-id }}

Injects the Result ID of your test run.

To obfuscate local variable values in test results, select Hide and obfuscate variable value. After you have defined the variable string, click Add Variable.

Apply filters to variable values

When you reference a variable, you can transform its resolved value by appending a filter with a pipe (|). Use the syntax {{ VARIABLE_NAME | filter }} anywhere a variable is accepted, such as the URL, request body, headers, and assertions. The following filters are available:

{{ VARIABLE_NAME | urlEncode }}

URL-encodes the variable’s value. For example, hello world becomes hello%20world.

{{ VARIABLE_NAME | urlDecode }}

URL-decodes the variable’s value. For example, hello%20world becomes hello world.

{{ VARIABLE_NAME | base64Encode }}

Base64-encodes the variable’s value. For example, hello becomes aGVsbG8=.

{{ VARIABLE_NAME | base64Decode }}

Base64-decodes the variable’s value. For example, aGVsbG8= becomes hello.

Filters apply to both local and global variables. You can apply one filter per reference, and filter names are case-sensitive.

전역 변수 사용

브라우저 테스트 세부 정보의 Starting URL 및 Advanced Options와 테스트 기록에서 Settings에 정의된 전역 변수를 사용할 수 있습니다.

사용 가능한 변수의 목록을 표시하는 방법은 다음과 같습니다.

• 브라우저 테스트의 세부 정보에서 원하는 필드에 ‘{{‘를 입력합니다.

• 브라우저 테스트의 레코더에서 테스트의 변수를 가져온 다음 원하는 필드에 ‘{{‘를 입력하거나 애플리케이션에 변수를 주입하여 사용합니다.

브라우저 테스트 기록 시 변수를 사용하는 방법에 대한 자세한 내용은 브라우저 테스트 단계를 참조하세요.

경보 조건 정의

경보 조건을 사용자 지정하여 테스트가 경보를 전송하는 상황을 정의할 수 있습니다.

경보 규칙

n/N개의 위치에서 X분 동안 어설션이 실패하면 경보가 트리거됩니다. 이 경보 규칙을 활용하면 경보가 트리거되기 전에 테스트의 실패 기간과 테스트 실패 위치 수를 지정할 수 있습니다.

경보는 다음 두 조건이 모두 충족될 때만 트리거됩니다.

• 지난 X분 동안 최소 하나의 위치가 실패 상태여야 합니다(최소 하나의 어설션이 실패함).
• 지난 X분 중 어느 한 시점에 최소 N개의 위치가 실패 상태여야 합니다.

실패할 경우, 해당 위치가 실패로 표시되기 전에 재시도를 X회 실시합니다. 이 설정을 통해 위치가 실패로 간주되기 위해 필요한 연속 테스트 실패 횟수를 정의할 수 있습니다. 기본적으로, 실패한 테스트를 재시도하기 전에 300ms를 대기합니다. 이 간격은 API로 구성할 수 있습니다.

빠른 재시도

테스트가 실패할 경우 빠른 재시도를 사용하면 실패로 표시되기 전에 Yms 후에 테스트를 X회 재시도할 수 있습니다. 재시도 간격을 사용자 지정하면 오탐을 줄이고 경보의 정확성을 향상시킬 수 있습니다.

위치 가동 시간은 재시도가 완료된 후 최종 테스트 결과를 기반으로 계산되므로 빠른 재시도 간격은 총 가동 시간 그래프에 직접적인 영향을 미칩니다. 총 가동 시간은 구성된 경보 조건을 기반으로 계산되며, 총 가동 시간에 따라 알림이 전송됩니다.

Downtimes

To pause test execution during planned maintenance windows, select an existing Scheduled downtime in the Downtimes section. The test automatically pauses during the downtime’s scheduled time slots.

Note: You cannot create a new downtime from the test creation form. To create one, navigate to Settings > Downtimes.

테스트 모니터링 구성

경보 조건 세트에 따라 알림이 전송됩니다. 이 섹션을 사용하여 팀에 메시지를 전송하는 방법과 내용을 정의할 수 있습니다.

1. 브라우저 테스트용 message를 입력하거나 사전에 채워진 모니터링 메시지를 사용합니다. 이 필드는 표준 마크다운 형식을 허용하며 다음 조건 변수를 지원합니다.

   조건 변수	설명
   {{#is_alert}}	모니터링을 통해 경보가 발생하면 표시됩니다.
   {{^is_alert}}	모니터링을 통해 경보가 발생하지 않으면 표시됩니다.
   {{#is_recovery}}	모니터링이 ‘alert’로부터 복구되면 표시됩니다.
   {{^is_recovery}}	모니터링이 ‘alert’로부터 복구되지 않으면 표시됩니다.
   {{#is_renotify}}	모니터링이 다시 알림을 전송하면 표시됩니다.
   {{^is_renotify}}	모니터링이 다시 알림을 전송하지 않으면 표시됩니다.
   {{#is_priority}}	모니터링이 우선순위(P1~P5)와 일치하면 표시됩니다.
   {{^is_priority}}	모니터링이 우선순위(P1~P5)와 일치하지 않으면 표시됩니다.

   Notification messages include the message defined in this section and information about the failing locations. Pre-filled monitor messages are included in the message body section:

   For example, to create a monitor that iterates over steps extracting variables for browser tests, add the following to the monitor message:

   {{! List extracted variables across all successful steps }}
   # Extracted variables
   {{#each synthetics.attributes.result.steps}}
   {{#if extractedValue}}
   * **Name**: `{{extractedValue.name}}`
   **Value:** {{#if extractedValue.secure}}*Obfuscated (value hidden)*{{else}}`{{{extractedValue.value}}}`{{/if}}
   {{/if}}
   {{/each}}
   

2. Choose team members and services to notify.

3. Specify a renotification frequency. To prevent renotification on failing tests, check the option Stop re-notifying on X occurrences.

4. Click Save & Start Recording to save your test configuration and record your browser steps.

For more information, see Synthetic Monitoring notifications.

Record your steps

Tests can be recorded from Google Chrome. To record your test, download the Datadog Record Test extension. Because Microsoft Edge is Chromium-based, you can also install the Chrome extension in Edge after you turn on Allow extensions from other stores. See Microsoft’s guide to adding extensions from other stores for instructions.

You can switch tabs in a browser test recording to perform an action on your application (such as clicking on a link that opens another tab) and add another test step. Your browser test must interact with the page first (through a click) before it can perform an assertion. By recording all of the test steps, the browser test can switch tabs automatically at test execution.

1. 필요시 페이지 오른쪽 상단의 Open in a pop-up을 선택하여 테스트 기록을 별도의 팝업 창으로 열 수 있습니다. 이 옵션은 애플리케이션이 iframe에서 열리는 것을 지원하지 않거나 기록 중 크기 문제를 피하고 싶을 때 유용합니다. 테스트를 새 브라우저에서 시작하려면 Incognito mode에서 팝업 창을 여세요. 이 모드는 이미 로그인된 세션, 기존 브라우저의 쿠키 등이 없는 상태입니다.

2. 필요시 브라우저 테스트에서 단계 기록을 실행할 때 Datadog이 RUM 데이터를 자동으로 수집하도록 활성화합니다. 자세한 내용은 RUM 및 Session Replay 탐색을 참조하세요.

3. Start Recording을 클릭하여 브라우저 테스트 기록을 시작합니다.

4. 모니터링하려는 사용자 여정을 실행하는 애플리케이션을 클릭하면 액션이 자동으로 기록되어 왼쪽의 브라우저 테스트 시나리오 내의 단계를 생성하는 데 활용됩니다.

5. 자동으로 기록되는 테스트 단계 외에도 왼쪽 상단의 단계기능으로 더욱 다양한 시나리오를 생성할 수 있습니다.

   Datadog은 브라우저 테스트에서 실행된 여정으로 인해 예상한 상태가 도출되었는지 확인하기 위해 브라우저 테스트를 어설션으로 종료할 것을 권장합니다.

6. 시나리오를 완료했으면 Save and Launch Test를 클릭합니다.

단계 리플레이

브라우저 테스트 중 1개 이상의 단계를 브라우저에서 바로 다시 실행하려면 Datadog 기록 테스트 확장 프로그램을 다운로드하세요.

단계 리플레이 기능은 개별 단계를 디버그하고, 브라우저 테스트를 편집할 때 올바른 애플리케이션 상태에 도달하며, 테스트를 저장하기 전에 전체 흐름을 확인하는 데 도움이 됩니다.

참고: 단계 리플레이는 서로 다른 조건(브라우저 버전, 네트워크, 사용자 에이전트, 로그인 상태)이나 제한으로 인해 전체 Synthetic Monitoring 테스트 실행과 다르게 작동할 수 있습니다.

단계 리플레이 사용 방법

단계는 세 가지 방법으로 리플레이할 수 있습니다.

1. 단일 단계 리플레이: 단일 단계를 다시 실행합니다.

단계 위에 마우스를 올리고 재생 버튼을 클릭하여 이 단계만 리플레이합니다.

2. 모든 단계 리플레이: 레코더에 정의된 전체 단계 시퀀스를 실행합니다.

단계 목록 상단의 모두 리플레이 버튼(⏩︎)을 클릭하여 모든 단계를 리플레이합니다.

3. 선택한 단계 리플레이: 단계 목록에서 선택한 단계의 하위 세트를 실행합니다.

리플레이할 단계를 선택한 후, 단계 목록 상단에서 선택한 단계 리플레이 버튼(⏩︎)을 클릭합니다.

단계 리플레이 기능 지원

아래 요약 표를 통해 단계 리플레이에서 지원되는 브라우저 테스트 단계 유형을 확인하세요.

단계 리플레이에서 지원되지 않는 단계 유형

디버거 권한

전체 Synthetic Monitoring 테스트 실행 환경과 최대한 유사하게 재현하기 위해, JavaScript 기반 단계나 키 입력 시뮬레이션과 같은 일부 단계는 리플레이 시 디버거 권한이 필요합니다.

확장 프로그램이 디버거 권한이 필요한 버전으로 처음 업데이트되면 권한 요청이 표시되며 권한이 승인될 때까지 확장 프로그램이 비활성화됩니다.

세 개의 점 메뉴를 클릭하여 권한을 수락합니다.

권한

기본적으로, Datadog Admin 및 Datadog Standard 역할을 가진 사용자만 Synthetic 브라우저 테스트를 생성, 편집 및 삭제할 수 있습니다. Synthetic 브라우저 테스트에 대한 생성, 편집 및 삭제 권한을 얻으려면 사용자를 두 가지 기본 역할 중 하나로 업그레이드하세요.

사용자 지정 역할 기능을 사용하는 경우, synthetics_read 및 synthetics_write 권한이 포함된 사용자 지정 역할에 사용자를 추가하세요.

액세스 제한

세분화된 액세스 제어를 사용하여 역할, 팀 또는 개별 사용자를 기반으로 테스트에 액세스할 수 있는 사용자를 제한하세요.

1. 양식의 권한 섹션을 엽니다.
2. Edit Access를 클릭합니다.

3. Restrict Access를 클릭합니다.
4. 팀, 역할 또는 사용자를 선택합니다.
5. Add를 클릭합니다.
6. 각 역할에 연결하려는 액세스 수준을 선택합니다.
7. Done을 클릭합니다.

추가 자료

추가적인 유용한 설명서, 링크 및 기사:

브라우저 테스트 시작하기설명서 Synthetic 테스트 모니터링에 대해 알아보기설명서 Synthetic Monitoring의 버전 기록가이드 Datadog 학습 센터: Synthetic 브라우저 테스트 시작하기학습 센터 엔드투엔드 테스트 생성 모범 사례블로그 Datadog Synthetic Monitoring으로 사용자 여정 전반의 문제 해결 간소화블로그 Datadog을 통해 고객의 브라우저 테스트 확장을 지원한 사례블로그 Terraform을 사용하여 Synthetic 브라우저 테스트 생성 및 관리외부 사이트