- 필수 기능
- 시작하기
- Glossary
- 표준 속성
- Guides
- Agent
- 통합
- 개방형텔레메트리
- 개발자
- Administrator's Guide
- API
- Datadog Mobile App
- CoScreen
- Cloudcraft
- 앱 내
- 서비스 관리
- 인프라스트럭처
- 애플리케이션 성능
- APM
- Continuous Profiler
- 스팬 시각화
- 데이터 스트림 모니터링
- 데이터 작업 모니터링
- 디지털 경험
- 소프트웨어 제공
- 보안
- AI Observability
- 로그 관리
- 관리
Synthetic Browser Tests are to used monitor your applications by reproducing how your customers experience your webpages end-to-end. When testing a sign-up or login flow, incorporate a one-time passcode (OTP) sent to an email address for authentication into your test. This OTP token can be extracted from an email body for testing within an application.
This guide walks you through how to configure the OTP extraction for a Synthetic Browser Test.
Follow the steps below to create an email variable for the Browser Test. This generates a unique Datadog Synthetics email address for the Synthetic Test run.
On a new or existing Browser Test, under Variables click Add Variable.
Next, select Email Address from the dropdown menu.
Name the variable and click Create.
This adds the email variable to the Variables section in the UI:
Next, record steps to insert the email address variable into an input field to imitate how a user would add the email address within your application.
First click Record at the top of the test. This automatically adds steps to the test based on the detected interactions and inputs.
Click the email input field, which creates a Click step.
Find the email variable created earlier, called DD_EMAIL_ADDRESS
in this example. On the right, click Inject variable in a text input and click the desired text box, which is highlighted in the UI. The email gets inserted.
After the email containing the OTP is sent, the Browser Test can access the email body for use in the rest of the sign-up flow.
The next step is to define a test step that extracts the OTP from the email body once it has been sent and store it in a variable. In this example, the variable is named OTP_FROM_EMAIL
for later reference within the guide.
Here are sample regex patterns to parse the OTP token from the email body:
Type | Example | Regex Rule |
---|---|---|
4 Digit OTP | 1234 | /[0-9]{4,4}/ |
6 Digit OTP | 123456 | /[0-9]{6,6}/ |
5 Character | abcde | /[a-z]{5,5}/ |
Alphanumerical OTP | a1b2cd34 | /[a-zA-Z0-9]{8,8}/ |
The OTP will be stored in the variable for use in your Browser Test.
JavaScript lets you trigger an event on a DOM element programmatically, making it possible to mimic user interactions or other events. Depending on how your input element is built, dispatching an event may be required to enable custom behaviors or testing event listeners tied to the element. You can use a Javascript assertion to add the saved OTP from the email and insert it into your application.
Add a JavaScript assertion step to input the stored OTP variable, in our example OTP_FROM_EMAIL
, into the appropriate field in your application.
Under Custom JavaScript add the extraction code. The code format varies depending on whether the OTP is inserted into a simple text field or respective input fields. Below are examples that illustrate both scenarios:
To insert the OTP into a simple text field, use the following:
function (vars, element) {
element.setAttribute('value', vars.OTP_FROM_EMAIL);
element.dispatchEvent(new Event("input", { bubbles: true }));
return true;
}
Below is a visual example of an OTP setup with a simple text field that the above query can be used for:
Note: For both of the Javascript examples, you need to replace the OTP_FROM_EMAIL
field with the name of the email variable you defined if named differently in your browser test.
To insert the OTP into separately defined fields, use the following:
function (vars) {
const inputList = document.querySelectorAll('input');
inputList.forEach((element) => {
element.setAttribute('value', vars.OTP_FROM_EMAIL);
element.dispatchEvent(new Event("input", { bubbles: true }));
});
return true;
}
Below is a visual example of an OTP setup with separately defined fields that the above query can be used for:
Once the OTP is inserted and verified, you can continue adding steps to your Browser Test to verify that the user has completed the sign-up flow of your application such as adding an assertion that specific text is present on the page. From here, you can continue recording the rest of your Browser Test and then verify your Browser Test results.