Types of clickpath steps

• Latest Dynatrace
• How-to guide
• Published Sep 04, 2025

When you record a browser clickpath, your interactions with your web application are captured as a series of steps. There are different step types to simulate interaction and control the clickpath, for instance, navigating to a URL, a click, selecting an option, entering information, or a JavaScript snippet. Besides the type, steps have different properties, like the target (consisting of locators to identify web elements on a page) and the wait strategy.

Step types

For browser clickpaths, the following step types are available:

Navigate

The Navigate step simulates entering a URL in the address bar of a browser and then loading the page.

To enhance synthetic monitor security, Dynatrace blocks monitors from sending requests to a local host (for example, localhost or 127.0.0.1).

In recorded clickpaths, the first step is automatically created as a Navigate step. However, when adding steps manually or editing a clickpath, you can add a JavaScript event as the first step of the monitor. Navigate steps can be preceded only by one or more JavaScript steps. A clickpath requires at least one Navigate step.

Optional Toggle the Use HTTP authentication switch if the website you want to test requires credentials.

You can choose how you want to store credentials.

If you choose Kerberos as an authetication method, also provide a realm name and authentication server allow list.

Click

In browser monitors, the Click step defines where to perform a mouse click on a page. It's inserted when you click an element such as a link, button, or field.

The Click step interacts with a specific element on the web page. See the information on locators below to define how an element should be found.

Tap

In mobile device profiles (including tablets, laptops with touch, and custom devices specified as mobile), the Tap step defines where on a page to record tapping the device screen with a fingertip. For example, a Tap is inserted when you tap a hyperlink, button, or select a field.

When recording on mobile device profiles, the cursor changes to an icon that represents a fingertip.

The Tap step interacts with a specific element on screen. See the information on locators below to define how an element should be found.

Keystroke

The Keystroke step captures the string you type in a field on a web page.

Capturing or setting a password in Keystroke

In a Keystroke step, a recorded password is captured by default as plain text, but you can save it as a credential.

You can also:

Note that you must have permission to access the credential vault in order to create credentials in a browser monitor this way. You can always capture entered credentials as part of a recorded clickpath.

Create a token in Keystroke

You can use an existing token you have access to in Keystroke. Select Type credentials and choose the name of the credential you want to use (Select credentials).

To create a new token

The credentials you create this way are automatically set to owner-only permissions and can only be used by you.

Note that you must have permission to access the credential vault in order to create credentials in a browser monitor this way.

Select option

The Select option step describes the use of lists in a clickpath.

The Index describes the position of the chosen item from the top; the first item in a list is always annotated 0. The Value field shows the text value of the item selected.

Select Add selection to add another item to select in the same list. You can delete selected options as required.

The Select option step interacts with a specific element on screen. See the information on locators below to define how an element should be found.

JavaScript

The JavaScript step allows you to execute snippets of JavaScript as part of your browser clickpaths.

With JavaScript steps, you can create clickpaths for scenarios with some dynamic parts where it might be necessary to react on the page, for example:

"experimentalProperties": [{
        "name": "enableXmlInjection",
        "value": ".*.xml$"
      }
    ]

In the Code box, define your JavaScript snippet.

When adding steps manually or editing a clickpath, you can add a JavaScript step as the first step of the monitor for such use cases as fetching a credential from the credential vault and setting a variable for use in the Navigate event URL. This feature requires ActiveGate version 1.225+ and Chromium version 88+ on private Synthetic locations.

Navigate steps can be preceded only by one or more JavaScript steps; a clickpath requires at least one Navigate step.

JavaScript step API

The JavaScript event offers a basic API for the following operations.

Store and retrieve values across monitor steps

Variables can be passed only in the context of a single execution of browser clickpath. You also need to make sure that when you refer to a variable, the data behind it is logically available to the monitor.

After you set a global variable using the api.setValue() method, you can subsequently apply its value using the {variable_name} convention with api.getValue() or api.getValues(). You can also apply the value in subsequent browser clickpath configuration fields using the {variable_name} convention.

Variable and key names have a 100-character limit. Global variable values have a 5000-character limit.

Mark steps as failed or finished

Skip clickpath steps

These methods skip steps after completion of the current step.

Basic logging

Retrieve data

Examples

var email = 'synthetic' + Date.now() + '@example.com';
api.setValue('email', email);
document.getElementById('email').value = email;

api.startAsyncSyntheticEvent();
fetch('https://randomuser.me/api/').then((resp) => resp.json()).then(function(data) {
    document.getElementById('firstName').value = data.results[0].name.first;
    document.getElementById('lastName').value = data.results[0].name.lastname;
    api.finish();
}).catch(function(error) {
    api.fail('Fetch request to randomuser.me failed');
});

if (api.getContext().location.name === "Sydney" &&
    api.getContext().location.cloudPlatform === "AWS") {
  document.getElementById("linkAustraliaAWS").click();
}
if (api.getContext().location.name === "Sydney" &&
api.getContext().location.cloudPlatform === "Alibaba") {
 document.getElementById("linkAustraliaAlibaba").click();
}

//Default value for the user ID in case a location not defined below is used
var userid_by_loc = "ValueDoesNotExist";
try {
//Get the location name
var loc = api.getContext().location.name;
api.info("Location Name is: " + loc);
//Get the cloud platform the location is hosted in
var platform = api.getContext().location.cloudPlatform;
api.info("Cloud Platform is: " + platform);
//Set the user ID per location
if ((loc.indexOf("Los Angeles") >= 0) && (platform.includes("Google Cloud") >= 0)) {
userid_by_loc = 'LA_User';
} else if ((loc.indexOf("Oregon") >= 0) && (platform.includes("Google Cloud") >= 0)) {
userid_by_loc = 'Oregon_User';
} else if ((loc.indexOf("Chicago") >= 0) && (platform.includes("Azure") >= 0)) {
userid_by_loc = 'Chicago_User';
}
} catch (err) {
api.info("Error message: " + err.description);
}
//Set a global variable to store the user ID that has been set and use later
api.setValue("UserID", userid_by_loc);

Cookie

Cookies allow you to store browser state information on the client side so that each monitor execution is based on the same state and you can accurately monitor a performance baseline.

You can set cookies in Advanced setup in the monitor settings in the edit mode. These cookies are valid for the entire monitor execution. If you want to set cookies only for a specific portion of your clickpath, use the Cookie event.

Provide a Name and a cookie Value. Every cookie must be unique within the list.

The following symbols are not allowed in the cookie value: ;,\". Provide the Domain of the cookie, and optionally, the Path to the cookie. Save your cookie.

Select Add cookie to define additional cookies.

Edit element locators

This control is available in Click, Tap, Keystroke, and Select option steps.

When one of the above steps in your clickpath targets a specific element on a webpage, you can view and edit the element locators in either DOM or CSS format. Locators help Dynatrace identify the element during playback. We might capture multiple locators to make sure the element is found even if some parts of the page code (such as names or IDs) change. In most cases, we capture CSS locators. Locators are evaluated sequentially; if the first locator isn't found, the second is evaluated, and so on until there's a match.

Select Add locator, then select DOM or CSS, and provide the locator reference. See DOM locator format below for more information on specifying DOM locators.

DOM locator format

Dynatrace version 1.292+

You might prefer to set up advanced, custom DOM locators for your elements. The rules below define the supported format when using JavaScript in DOM locators to access elements on a webpage. These rules are necessitated by the transition of the Dynatrace Synthetic Recorder (a Google Chrome browser extension) to Manifest Version 3 (MV3), which is the latest iteration of the Chrome extension platform.