Overview

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.

Setup

Step 1 - Create an email variable

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.

1. On a new or existing Browser Test, under Variables click Add Variable.

2. Next, select Email Address from the dropdown menu.

3. Name the variable and click Create.

   This adds the email variable to the Variables section in the UI:

Step 2 - Inject the email address variable

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.

1. First click Record at the top of the test. This automatically adds steps to the test based on the detected interactions and inputs.

2. Click the email input field, which creates a Click step.

3. 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.

Step 3 - Extract the OTP from the email body

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.

1. Under Add a variable select from Email body.

2. Under Parsing Regex add in the regex pattern that corresponds to the OTP.

Here are sample regex patterns to parse the OTP token from the email body:

The OTP will be stored in the variable for use in your Browser Test.

Step 4 - Use a JavaScript assertion to insert the OTP

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.

1. Add a JavaScript assertion step to input the stored OTP variable, in our example OTP_FROM_EMAIL, into the appropriate field in your application.

2. 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:

Simple text field

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.

Respective input fields

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:

Next steps

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.

Further Reading

Additional helpful documentation, links, and articles:

Learn about Synthetic Browser TestsDOCUMENTATION Learn about Synthetic test variablesDOCUMENTATION Learn about email validation in Browser TestsDOCUMENTATION Synthetic Monitoring TroubleshootingDOCUMENTATION Best practices for creating end-to-end testsBLOG