이 어서션 단계를 생성하여 자바스크립트 코드를 사용하여 활성 페이지에서 커스텀 어서션을 테스트합니다. 자바스크립트 어서션은 동기 및 비동기 코드를 모두 지원합니다. 브라우저 테스트는 페이지에 스크립트를 추가하여 외부 자바스크립트를 로드하므로 웹사이트에서 외부 자바스크립트를 허용하는 경우에만 작동합니다.
자바스크립트 어서션 함수는 다음 파라미터와 함께 제공되며 반환문이 필요합니다.
return(필수) 문은 테스트 단계가 성공하기 위해 어설션이 충족해야 하는 조건을 반영합니다. 모든 유형이 반환될 수 있지만 값은 자동으로 부울로 캐스팅됩니다. 잘못된 값이 반환되면 테스트 단계가 실패합니다.
vars(선택 사항): 브라우저 테스트의 변수를 포함하는 문자열입니다. 자바스크립트 스니펫에서 브라우저 테스트 변수를 참조하려면 vars.<YOUR_VARIABLE>를 사용하세요. 예를 들어, 브라우저 테스트에 USERNAME 변수가 포함된 경우 vars.USERNAME를 사용하여 자바스크립트 스니펫에서 호출합니다.
element (선택 사항): 페이지의 요소 로케이터. 이를 설정하려면 선택 및 업데이트 대상 요소 버튼을 사용합니다. 선택한 요소는 Datadog 브라우저 테스트의 다중 배치 알고리즘을 자동으로 사용합니다.
자바스크립트 어서션은 활성 페이지의 컨텍스트에서 실행되므로, 이러한 단계에서는 활성 페이지에 정의된 모든 개체(예: 라이브러리, 내장 및 글로벌 변수)에 액세스할 수 있습니다. 외부 라이브러리를 로드하려면 promise를 사용하세요.
예시:
constscript=document.createElement('script');script.type='text/javascript';script.src="https://code.jquery.com/jquery-3.5.1.slim.min.js";constpromise=newPromise((r)=>script.onload=r)document.head.appendChild(script)awaitpromise// Script is now loaded
returnjQuery().jquery.startsWith('3.5.1')
다운로드한 파일 테스트하기
이 어서션 단계를 생성하여 브라우저 테스트에서 이전 단계에서 다운로드한 파일을 확인하도록 합니다. 파일이 올바르게 다운로드되었는지 확인하고 파일 이름, 크기 및 MD5 값을 어설트할 수 있습니다.
이 어설션 단계를 생성하여 특정 URL 패턴에 대한 HTTP 요청 횟수를 테스트합니다. 예상 요청 수와 테스트할 대상 URL의정규식을 입력합니다.
내비게이션
페이지 새로 고침
브라우저 테스트가 기록의 현재 페이지를 새로 고치도록 하려면 이 내비게이션 단계를 생성하세요.
이메일로 이동하여 링크를 클릭
이메일 변수를 생성한 후에는 이 내비게이션 단계를 만들어 브라우저 테스트에서 고유한 Synthetic 메일 받은 편지함에 액세스하도록 합니다.
브라우저 테스트에서 클릭할 이메일과 링크를 선택하세요. 이 단계에서는 해당 페이지로 이동하며 해당 페이지에서 나머지 여정을 계속 진행할 수 있습니다.
특정 링크 따라가기
이 내비게이션 단계를 만들어 브라우저 테스트가 특정 페이지로 이동하도록 합니다. 링크 URL 입력 상자에서 URL 앞에 http 또는 https를 추가해야 합니다.
특별 작업
Datadog 브라우저 테스트 레코더 확장 프로그램을 사용하여 사용자 여정과 관련된 대부분의 단계를 기록하고 모니터링할 수 있습니다. 그러나 확장 프로그램은 커서 올리기(Hover), 키 누르기(Press Key), 스크롤(Scroll) 및 **대기(Wait)**와 같은 일부 단계를 자동으로 기록하지 않습니다.
특별 작업를 클릭하고 작업 유형을 선택하여 이 어서션 단계를 수동으로 생성합니다.
커서 올리기
이 단계에서는 호버링 메커니즘이 아닌 전용 클릭을 사용하여, 기록 중에 사용자가 요소 위로 마우스를 가져갈 때마다 별도의 단계가 생성되지 않도록 합니다.
테스트가 시작된 UTC 날짜에 해당하는 값을 + 또는 - n 단위로 사용하여 Datadog에서 허용되는 형식 중 하나로 날짜를 생성합니다.
{{ timestamp(n, unit) }}
테스트가 + 또는 - n 단위로 시작되는 UTC 타임스탬프에 해당하는 값으로 Datadog의 허용 단위 중 하나로 타임스탬프를 생성합니다.
{{ uuid }}
버전 4 범용 고유 식별자 (UUID)를 생성합니다.
테스트 결과에서 로컬 변수 값을 명시하지 않으려면 Hide and obfuscate variable value를 선택합니다. 변수 문자열을 정의한 후 Add Variable를 클릭합니다.
요소
요소의 텍스트를 추출하여 span 또는 div과 같은 콘텐츠에서 변수를 생성합니다.
이메일 본문
다음 방법 중 하나(regex 또는 Xpath)를 사용해 이메일 본문에서 변수를 생성합니다.
Regex는 이메일의 일반 텍스트 본문에서 첫 번째 일치 패턴을 검색하고 반환합니다(예: /*./). 패턴을 발견할 수 없는 경우 HTML 본문을 검색합니다.
Xpath는 이메일이 HTML 본문을 포함할 때만 적용 가능합니다. 해당하는 위치의 콘텐츠를 반환합니다(예: $).
JavaScript
자바스크립트 단계는 동기 및 비동기 코드를 모두 지원합니다. 브라우저 테스트는 페이지에 스크립트를 추가하여 외부 자바스크립트를 로드하기 때문에, 웹사이트가 외부 자바스크립트를 허용하는 경우에만 작동합니다.
자바스크립트 함수는 다음 파라미터와 함께 제공되며 반환문이 필요합니다.
return (필수) 문은 자바스크립트 변수와 연결하려는 값을 반환합니다. 이 문은 모든 유형을 반환할 수 있지만 자동으로 값을 문자열로 캐스팅합니다.
vars (선택 사항): 코드 내에서 사용할 수 있는 브라우저 테스트의 변수를 포함하는 문자열입니다. 자바스크립트 스니펫에서 브라우저 테스트 변수를 참조하려면 vars.<YOUR_VARIABLE>를 사용하세요. 예를 들어 브라우저 테스트에 이미 PRICE 변수가 있는 경우, vars.PRICE를 사용하여 자바스크립트 스니펫에서 호출합니다.
element (선택 사항): 페이지의 요소 로케이터. 이를 설정하려면 선택 및 업데이트 대상 요소 버튼을 사용합니다. 선택한 요소는 Datadog 브라우저 테스트의 다중 배치 알고리즘을 자동으로 사용합니다.
자바스크립트 어서션은 활성 페이지의 컨텍스트에서 실행되므로, 이러한 단계에서는 활성 페이지에 정의된 모든 개체(예: 라이브러리, 내장 및 글로벌 변수)에 액세스할 수 있습니다. 외부 라이브러리를 로드하려면 promise를 사용하세요.
예시:
constscript=document.createElement('script');script.type='text/javascript';script.src="https://code.jquery.com/jquery-3.5.1.slim.min.js";constpromise=newPromise((r)=>script.onload=r)document.head.appendChild(script)awaitpromise// Script is now loaded
returnjQuery().jquery.startsWith('3.5.1')
하위 테스트를 독립적으로 실행하는 것이 적합하지 않은 경우 일시 중지할 수 있습니다. 테스트는 상위 테스트의 일부로 계속 호출되며 개별적으로 실행되지 않습니다. 자세한 내용은 테스트 스위트에서 브라우저 테스트 여정 재사용을 참조하세요.
HTTP 요청
브라우저 테스트의 일부로 HTTP 요청을 실행할 수 있습니다.
설정
HTTP 요청을 정의하려면:
쿼리할 Method 및 URL을 선택합니다. GET, POST, PATCH, PUT, HEAD, DELETE, 그리고 OPTIONS 중에서 선택합니다.
필요시 고급 옵션을 지정합니다:
리디렉션 팔로우: 요청을 수행할 때 HTTP 테스트가 최대 10개의 리디렉션을 따르도록 하려면 체크 표시합니다.
서버 인증서 오류 무시**: SSL 인증서의 유효성을 검사할 때 오류가 발생하더라도 연결을 통해 HTTP 테스트를 계속하려면 체크 표시합니다.
요청 헤더: HTTP 요청에 추가할 헤더를 정의합니다. 기본 헤더(예: user-agent 헤더)를 재정의할 수도 있습니다.
Cookies: HTTP 요청에 추가할 쿠키를 정의합니다. <COOKIE_NAME1>=<COOKIE_VALUE1>; <COOKIE_NAME2>=<COOKIE_VALUE2> 형식을 사용하여 여러 쿠키를 설정합니다.
클라이언트 인증서: 클라이언트 인증서 및 연결된 프라이빗 키를 업로드하여 mTLS를 통해 인증합니다.
HTTP 기본 인증: HTTP 기본 인증 자격 증명을 추가합니다.
Digest 인증: Digest 인증 자격 증명을 추가합니다.
NTLM: NTLM 인증 자격 증명을 추가합니다. NTLMv2와 NTLMv1을 모두 지원합니다.
Encode parameters: 인코딩이 필요한 쿼리 파라미터의 이름과 값을 추가합니다.
Body type: HTTP 요청에 추가하려는 요청 본문 유형(text/plain, application/json,text/xml ,text/html ,application/x-www-form-urlencoded, GraphQL 또는 None)을 선택합니다.
Request body: HTTP 요청 본문의 내용을 추가합니다. 요청 본문의 최대 크기는 50KB로 제한됩니다.
Proxy URL: HTTP 요청이 통과해야 하는 프록시의 URL을 지정합니다(http://<YOUR_USER>:<YOUR_PWD>@<YOUR_IP>:<YOUR_PORT>).
Proxy Header: 프록시에 대한 HTTP 요청에 포함할 헤더를 추가합니다.
응답 본문 저장 안 함: 응답 본문이 런타임에 저장되지 않도록 하려면 이 옵션을 선택하세요. 이렇게 하면 테스트 결과에 민감한 데이터가 표시되지 않도록 하는 데 도움이 되지만, 오류 문제 해결이 어려울 수 있습니다. 보안에 대한 권장 사항은 신서틱(Synthetic) 모니터링 데이터 보안을 참조하세요.
URL 테스트를 클릭하여 요청 설정을 테스트합니다. 응답 미리보기가 나타납니다.
어서션 추가
어서션은 예상되는 테스트 결과를 정의합니다. Test URL을 클릭하면 status code, response time, header, content-type에 있는 기본 어서션이 테스트 응답을 기반으로 추가됩니다. 어서션은 브라우저 테스트에서 HTTP 단계에 대한 선택 사항입니다.
유형
연산자
값 유형
본문
contains, does not contain, is, is not, matches, does not match, jsonpath, xpath
자동으로 기록된 단계에 변수를 사용하려면, 이 변수 삽입 아이콘을 클릭하여 기록 중에 변수 값을 입력합니다.
브라우저 테스트 단계 (예를 들면, 하위 테스트)에 따라 변수에 다른 값이 할당된 경우 변수는 처음 할당된 값을 체계적으로 사용합니다.
HTTP 요청이나 자바스크립트 단계의 변수와 같이 일부 변수는 런타임에만 계산됩니다. 예를 들어, {{ <YOUR_VARIABLE_NAME> }}이 포함된 Type text 단계가 있다고 가정해 보겠습니다. 테스트 실행 시 {{ <YOUR_VARIABLE_NAME> }}는 변수의 연관된 값으로 체계적으로 대체됩니다. 이러한 변수 중 하나를 사용하여 단계를 기록하려면 테스트를 저장하기 전에 실제 변수 값으로 단계를 기록하고 단계의 정의에서 실제 값을 {{ <YOUR_VARIABLE_NAME> }}로 대체합니다.
여러 변수 사용
브라우저 테스트 레코딩 단계에 여러 변수를 추가할 수 있습니다.
브라우저 테스트 레코딩에서 + 변수 추가 버튼을 클릭하여 테스트에 하나 이상의 변수를 추가합니다.
브라우저 테스트의 레코더에서 단계 기록을 추가하고 **응답에서 변수 추출(선택 사항)**을 클릭하여 브라우저 테스트에서 변수를 추출하여 사용하세요.
