Browser clickpath events

When you record a browser clickpath, your interactions with your web application are captured as a series of events. There are different event 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, events have different properties, like the target (consisting of locators to identify web elements on a page) and the wait strategy.

Browser clickpath event types and their properties are described below. Clickpath events are editable during initial configuration or at any point later in edit mode in monitor settings (see the images below). You can edit, reorder, delete, and add events.

Recorded clickpath

Clickpath events in edit mode

Important

A synthetic "event' is not the same thing as an "action"—only events that trigger web requests are called actions, so your script might have more events than actions. Synthetic actions (similar to user actions in Real User Monitoring) hold the performance data collected during clickpath runs.

The Navigate event simulates entering a URL in the address bar of a browser and then loading the page. Single-URL browser monitors are comprised of a single Navigate event.

In recorded clickpaths, the first event is automatically created as a Navigate event. The initial Navigate event of a clickpath can't be deleted or reordered. You can insert a Navigate event into your recorded clickpath by selecting Add synthetic event and choosing the appropriate event it should follow.

Going to a new web page by clicking a link in the current web page creates a Click event in desktop profiles (or a Tap event in mobile profiles), not a Navigate event.

See the sections below on wait and validation controls.

Basic authentication

You can automate logging in to the specified URL using basic authentication—Enable basic authentication.

To automate form-based login, begin recording your clickpath. During recording, type in your username and password as usual. Your login credentials will be securely recorded and stored so that logging in is automated during monitor runs. See the Keystroke event for information on recording data entry into fields.

Dynatrace stores and manages all synthetic monitoring credentials in a credential vault. Credentials are access controlled and can be designated as "owner only" or "public."

You can choose an existing credential (Select credentials). You can only see credentials that you have access to in this list, that is, public credentials or owner-access credentials created by you.

Navigate event credential from vault

You can Create new credentials by entering a Username and Password. Provide a name for the credential and Save to vault. The credentials you create this way are automatically set to owner-only permissions and can only be used by you. See Credential vault for synthetic monitors for information on permissions required to write to the vault.

Navigate event create credential

Click

In browser monitors, the Click event 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.

See the sections below on wait and validation controls.

The Click event 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 action 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.

Mobile cursor

See the sections below on wait and validation controls.

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

Keystroke

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

The string is recorded in Text value, which can be edited. All text is captured by default as Plain text. However, for passwords stored to the credential vault, the text type is Credentials.

Dynatrace stores and manages all synthetic monitoring credentials in a credential vault. Credentials are access controlled and can be designated as "owner only" or "public."

Read on below for how to save a captured password to the credential vault or how to set a password in a Keystroke event.

Simulate blur event (enabled by default) defines whether a blur event is simulated, which is usually when a text field loses focus.

See the sections below on wait and validation controls.

The Keystroke event interacts with a specific element on screen such as a form field. See the information on locators below to define how an element should be found.

Capturing or setting a password in Keystroke

In a Keystroke event, a recorded password is captured by default as Plain text. You can Save to credential vault—the data type automatically changes to Credentials.

Reset text value only if you want to clear the captured credential and convert the field to unencrypted text.

Captured password in Keystroke

You can also use a different credential stored in the vault or create a new one in a Keystroke event. First, change the data type to Credentials.

You can choose an existing credential (Select credentials). You can only see credentials that you have access to in this list, that is, public credentials or owner-access credentials created by you.

Note in the image below how only the password from the retrieved credential pair is used.

Retrieve credentials to Keystroke

You can Create new credentials by entering a Username and Password. Provide a name for the credential and Save to vault. The credentials you create this way are automatically set to owner-only permissions and can only be used by you. See Credential vault for synthetic monitors for information on permissions required to write to the vault.

Create credential in Keystroke

Select option

The Select option event describes the use of drop-down 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.

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

See the sections below on wait and validation controls.

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

JavaScript

The JavaScript event allows you to execute snippets of JavaScript as part of your clickpath monitors.

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

  • Login flows including random security questions
  • Complex date selectors
  • Pages using A/B testing
  • Signups or product order workflows
  • Custom validations

In the editor provided, define your JavaScript snippet, the target window, and wait strategy. The API that allows you to store and retrieve values, control JavaScript event outcome, or skip execution is described below.

JavaScript clickpath event

JavaScript event API

The JavaScript event offers a basic API that allows you to:

  • Store and retrieve values across events (steps).
    • api.setValue(key, value)—Sets a local value.
    • api.getValue(key)—Gets the local value of the key that had been previously set by api.setValue.
    • api.getValues—Returns an object holding the key-value pairs that had been previously set by api.setValue.
  • Mark events as failed or finished.
    • api.fail(message)—Marks the event as failed, providing a message as the reason, and marks the test execution as failed.
    • api.finish()—Finishes the JavaScript event so that the next event is executed.
    • api.startAsyncSyntheticEvent()—Causes the JavaScript event to wait for a later call of api.finish() or api.fail() to end it.
  • Skip synthetic events.
    • api.skipNextSyntheticEvent()—Skips execution of the next event.
    • api.skipNextSyntheticEvents(n)—Skips execution of the next n consecutive events.
    • api.skipSyntheticEvent(eventIndex)—Skips execution of the event with the index eventIndex.
    • api.skipSyntheticEvents(eventIndexes)—Skips execution of multiple events; the array eventIndexes specifies the indexes of events to skip.
  • Basic logging
    • api.info(message)—Logs the message using the info log level.
    • api.warn(message)—Logs the messageusing the warning log level.
    • api.error(message)—Logs the message using the error log level.

Cookies enable 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 Additional options when creating a browser monitor or in Advanced setup in monitor settings in 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, you can use the Cookie event.

In edit mode, enable Set cookies, then provide a Name and 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.

Cookie event

Common controls

This section describes controls that are common to several event types.

Amount of time to wait before the next event is triggered

While Dynatrace automatically selects an appropriate wait time for each event, you can customize this setting to define how long Dynatrace should wait before the next event is executed.

  • None

  • Wait for page to load completely waits for network activity to be completed after the load event is triggered. This is the default wait time used when loading a new page.

  • Wait for specific period of time allows you to specify the number of seconds that Dynatrace should wait between this event and the next.

  • Wait for background network activity to complete waits for all network activity to be complete following the event. This is the default wait time used for XHRs and interactions within single-page applications.

    This option is not available for Navigate events.

  • Wait for specific element to appear allows wait for a specific HTML element on the page by specifying the CSS or DOM locator for the element. You can also specify to text to validate against in the element, and a timeout for locating the element.

  • Wait for next event waits until one of the locators of the next event is found. This is basically the same as Wait for specific element to appear but automatically uses the locators of the next event.

Note: Be sure to specify a wait time that it doesn't exceed the programmed timeout value for browser clickpaths (see below). This timeout can't be changed. A problem will be generated if this timeout is exceeded.

  • Script timeout: 5 minutes.

Validate content

Content validation helps to verify that your browser monitor loads the expected page content or element. Validations are performed through validation rules—select Add custom content validation to define a validation rule.

In browser clickpaths, you define validations for each event; for single-URL monitors, you define validation for the monitor as a whole as they only contain a single event.

All validation is performed after following all redirects, even if the very first response delivers HTML content.

You can validate based on specific text on a web page, a specific element, text included within an element, or text in the DOM or any resource. You can opt to pass or fail your monitor/event based on your validation criteria. If pass criteria are not met (or fail criteria are met), the monitor/event fails and the execution is aborted.

Validation criteria

When defining validation, specify the tab (Target window) in which the text/element should be found.

If your validation is based on content (contains text), the markup text for an element (contains text in element), or text in the DOM or a resource (contains text in DOM or any resource), you must provide the text string (Specify text). Enclose placeholder values in brackets, for example {email}. Optionally, you can specify text as a regular expression (Evaluate as regular expression).

If your validation searches for an element (contains element) or the markup text for an element (contains text in element), you must specify the CSS Selector or DOM locators to use during replay—select Add locator, then select DOM or CSS, and provide the locator reference. You can add as many locators as you like.

Validation

You can add more than one validation to an event/monitor. If you have defined multiple validation rules, you can reorder and delete rules as required.

Validation rules

Edit element locators

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

When one of the above events in your clickpath targets a specific element on a web page, you can edit the element locators in either DOM or CSS Selector format. Locators help Dynatrace identify the element during playback. Click Add locator, then select DOM or CSS, and provide the locator reference.

You can add as many locators as you like. You can also edit or delete any existing locators for your event.

Optional You can also specify the tab (Target window) in which the element should be found.