Browser Test Actions
Datadog's Research Report: The State of Serverless Report: The State of Serverless

Browser Test Actions

Actions are a series of steps that you can record for a browser test, which you can then edit or build on. You can also configure certain actions with advanced options.

Note: The default timeout for each step is approximately 60 seconds. You can override the timeout with advanced options.

Click

Datadog’s extension automatically records clicks on your page.

Specify the type of click you want your browser test to perform at execution time:

Choose from:

  • Primary click (corresponds to a left click)
  • Double click
  • Contextual click (corresponds to a right click)

Assertion

Assertions allow you to validate that your browser test is in the state you expect it to be in, at any given point of a simulated user journey. This is why you must end your browser tests by an assertion to confirm it ended up in an expected state.

Some assertions are performed on the active page. Active page refers to the page that has experienced the last interaction like using a click or an assertion on a given page element for instance.

AssertionDescription
Test an element's contentSelects an element and checks if it contains a specific value. For instance, you could select a div and check whether it contains the word “hello”.
Test that some text is present on the active pageAsserts that some specific text is present on the current page.
Test that some text is not present on the active pageAsserts that some specific text is NOT present on the current page.
Test the content of the URL of the active pageTakes the URL of the last page that was interacted with, then asserts whether a specific value (string, number, regex) is present within it.
Test that an element is present on the active pageAsserts that an element (such as a specific span, div, h, a, etc.) is present on the current page.
Test that an email was receivedAsserts that an email was sent and whether specific values (string, number, regex) are present within the email subject or body. This assertion leverages email variables.
Test your UI with custom JavaScriptTest a custom assertion using your own JavaScript scripts. By default the assertion is done on the active page. If you want your JavaScript function to leverage a specific page element, you can select it using Target Element and then refer to it as the element parameter in your function.
Test a downloaded filePerform verifications on files downloaded in previous steps. You can check that a file was correctly downloaded and assert on: the file name, size, and MD5 value.

Advanced options are also available for assertions.

The navigation action allows you to:

  • Refresh the current page of the scenario.
  • Follow a specific link. In the Enter link URL box, you must prepend your URLs with http or https.
  • Go to an email and click on a link. This step allows you to access your Synthetics mail inbox after creating an email variable.
  • Choose the email you are interested in and click the link you want your browser test to click on.

Special Actions

The provided Datadog extension records most actions. However, some actions—such as hover, press key, and scroll—are not recorded automatically. Explicitly add a step for them using the Special Actions menu located at the top left-hand corner of the recorder.

Hover

This browser test step isn’t added through an actual hovering mechanism (otherwise each element you are hovering would be added as a step) but using a dedicated action with a click.

After selecting the Hover action, click on the element you want to choose to create a new step.

Press key

You can simulate users entering keystrokes using Press Key steps. The keys below can be recorded using the Datadog extension:

  • Enter
  • Arrows (up, down, right, and left)
  • Tab (outside a form)
  • Escape
  • Backspace

To press keys that are not being automatically recorded, specify which values need to be pressed in the value box of the Press Key special action:

The below modifiers can also be applied to the inputted value:

  • Alt
  • Control
  • Meta
  • Shift

Scroll

Your browser test automatically scrolls to the element it needs to interact with. Consequently, in most cases, you do not need to manually add a scroll step. The scroll step should only be added when needed to trigger an additional network request, such as in an infinite scroll.

You need to specify the number of pixels your browser test should scroll vertically or horizontally.

By default, the scroll step scrolls on the whole page. If you need to scroll on a specific element (for instance a specific <div>), use the Target Element option to select the element you want your browser test to scroll on.

Upload

You can record the uploading of files as an action. To record an upload step you can:

  • Either open your desktop from the browser,
  • Or drag and drop your file in the recording iframe.

This is limited to 10 files, with a limit of 5MB each.

Variable

Create a variable

To create a variable, first give it a name then define its value from:

  • An Element: Create a variable out of a span, div, etc. content by extracting the text of this element.
  • JavaScript: Generate custom variables using your own JavaScript scripts. By default the step is being performed at the page level. If you want your JavaScript function to leverage a specific page element, you can select it using Target Element and then refer to it as the element parameter in your function.
  • A Global Variable: Store and use global variables through Synthetics Settings.
  • An Email: Generate a random Synthetics email address that can be used in your test steps to assert if an email was correctly sent or to perform actions over the sent email content (e.g. click a confirmation link).
  • A Pattern:
PatternDescription
{{ 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.

Use the variable

Once created, use your variable to set an input text on a form or search bar. Use the little hand on your variable box to create an input step:

You can also use your variables in some assertions, including:

  • Check an element’s content
  • Assert text is present on the page
  • Assert the page does not contain text
  • Check main page URL’s content
  • Check that an email was received

To use your variables in one of your assertions, hit Use Variable and select the variable you want to use:

Alternatively, you can record a step inputting {{ <YOUR_VARIABLE> }} in the desired field.

Use variables in JavaScript steps

If you need to use variables in JavaScript steps (assertion or variable), use vars.<YOUR_VARIABLE>.

Wait

By default, Datadog waits for a page to be fully loaded before performing an action or a next step—with a timeout after 60 seconds. In some cases, however, you may wish to set a custom waiting time. For instance, if you know that a page or a page element is taking more than 60 seconds to load, you can leverage the wait step in order to extend that default timeout. If you choose to use this functionality, the value for your wait step must not exceed 300 seconds.

Note: This additional time is systematically added to each run of your browser test scenario.

Subtests

You can run browser tests within other browser tests, up to two levels of nesting. Advanced options also allow you to choose where you want your subtest to be played.

Note: If it does not make sense for you to run your subtest independently, you can pause it. It will continue to be called as part of your main test, but it will not be executed individually.

Further Reading

Additional helpful documentation, links, and articles: