One of the primary things that set transaction monitoring apart from our other monitoring types is the ability to interact with pages. Using Web Application Monitoring, Uptrends clicks page elements, completes forms, inputs login credentials, and otherwise performs all sorts of user actions to test your user journeys.

With Self-Service Transactions, you create a script that interacts with your page through a group of four available action types or interactions. The four interactions are Navigate, ClickHover and Set.

Navigate

Navigation is the very first action recorded or added to any transaction script. Every transaction starts by navigating to a URL before it begins to test your site's functionality. The navigation action tells the browser to go to the URL, and the monitor waits for the page to load completely (within a reasonable time frame).

In most cases, a transaction only contains the one navigate action at the start. However, sometimes a second navigation is needed within the transaction. When additional navigation steps are needed, we recommend you put these navigate actions in their own respective steps. Putting navigation actions in their own step helps you to keep oversight of what’s happening at which point in your transaction, and helps you make sense of the timing metrics Uptrends measures per step.

It should be noted that a navigate action will always use one transaction credit.

Navigate options

The available options for the navigate action include (see figure below):

  • The URL used for the navigation (required).
  • The Description used for reporting purposes (required).
  • Failure message to include in error reports.
  • Result checkbox instructing Uptrends to Ignore the HTTP status code returned.
  • Wait timeout where you specify how long Uptrends should wait for the page load to complete.

The Result setting is different from all of the other action types. By default, a navigate action ensures the page has loaded correctly, and that the monitor received a non-error HTTP status code (any status code less than 400). Any status code 400 or higher generates an error for the navigation action, and the transaction stops executing. If you need the transaction to proceed despite receiving an error status code, enabling Ignore the HTTP Status code that is returned tells Uptrends to continue regardless of the resulting status code.

Screenshot: Step editor Navigate action options

Follow Navigate actions with content checks

To ensure that the transaction ends up on the correct page after the navigation action, add a content check as the next action. A content check gives you the certainty that your transaction landed on the correct page, and that the page fully loaded and the page displays the components that allow the monitor to interact with the page further before executing the next action.

Use waterfall reports with Navigate actions

Since a navigate action loads a completely new page, you may find it useful to gather specific metrics about the page load times by enabling the waterfall report option in the step that contains the navigate action. Each waterfall report added to a transaction uses one transaction credit.

 

Click

The Click action tells the browser to click a specific page element using a CSS or XPath selector. There are a variety of potential uses for a click action:

  • Selecting options,
  • Opening sub-menus,
  • Selecting checkboxes, or
  • Clicking links that take the transaction to the next page.

Therefore, the Click action is an integral part of any transaction.

Broadly speaking, a click action falls into two categories:

  • Either Click actions lead to a new page (links or buttons), or
  • Click actions perform an action on the existing page.
A click may or may not result in the use of a transaction credit.

Click action options

The Click action options include (see figure below):

  • The Description used for reporting purposes (required).
  • Failure message to include in error reports.
  • Error handling: Selecting the Ignore errors that occur in this action checkbox tells the monitor to disregard any errors that this action may encounter such as not finding the clickable element.
  • Wait until: Before a click action can happen, the element the monitor needs to click needs to be rendered and visible on the page (speaking in CSS terms, the element must be displayed and visible).
  • Wait timeout: You can specify the amount of time the monitor should wait for the element to meet the Wait until requirement above. The default wait time is 30 seconds, but you can override the default for a maximum wait time of 60 seconds.

Screenshot: Click action step options

Note: The Transaction Recorder may pick up redundant or unnecessary clicks. For example, when doing a set action on a text field, the recorder will pick up the click to give the element focus, but the set action doesn't require the click to insert the value. Removing unnecessary clicks shortens the test duration and makes the script more manageable.
 

Hover

When a page contains elements that require the user to hover the cursor over them to perform an action such as selecting a sub-menu or selecting from a drop-down, you need to add a Hover action. Before the user or monitor can interact with an underlying element such as links in a drop-down/pull-down menu, the element needs to be visible on the page.

Because the cursor is always on the page during the transaction recording, the recorder would constantly record hover events that you would need to remove after the fact. Instead of removing possibly hundreds of unneeded hover events, the recorder doesn't record any hover actions. Therefore, you need to add any required hover actions after the fact.

In the example below, to access the menu for the selection of the checkout option, you must first hover over the shopping cart.

Animation: Hover action opening a sub menu

Hover action options

You have the following option settings for the Hover action (see figure below):

  • The Description used for reporting purposes.
  • Failure message to include in error reports.
  • Error handling: Selecting the Ignore errors that occur in this action checkbox tells the monitor to disregard any errors that this action may encounter such as not finding the clickable element.
  • Wait until: Before a click action can happen, the browser has to render the element making it visible on the page.
  • Wait timeout: You can specify the amount of time the monitor should wait for the element to meet the Wait until requirement above. The default wait time is 30 seconds, but you can override the default for a maximum wait time of 60 seconds.
Screenshot: Hover action options

Use content checks after hover actions

To check for a successful Hover action (the sub-menu loaded correctly), consider adding a Content check action directly after the hover to verify that the monitor can interact with the menu before proceeding.

 

Set

The Set action tells the monitor to input values for elements. A monitor has several uses for a set action:

  • Completing text fields and boxes: Credentials and other strings of characters commonly needed in input fields.
    If the Set action triggers an autocomplete function; for example, when you enter a zip code or search term, the page might suggest a full address or commonly searched terms. In auto-complete cases, you may want to add a content check to make sure that the auto-complete function worked correctly and add a click action to select the desired option.
  • Selecting options from a drop-down: Typically, select element types have several predefined <option> elements each with their own values. Using a CSS or XPath selector, point the script at the select element. You can choose to set the select element's id attribute, value attribute, or text content.

Set action options

You have several options available to you for the Set action (see figure below). Besides the standard options, you also have one special one, Sensitive value.

  • Sensitive value: Selecting the Treat this as sensitive (hide the value from test results) checkbox hides the value in the action's test results by displaying asterisks instead of the actual value. If the value is a password or another sensitive matter that should not be exposed in the monitor results, make sure to select this option.
    When using sensitive values in your transaction, such as login credentials, the characters appear in plain text in the transaction editor regardless of whether you use the Sensitive value option. If you also need to hide these values everywhere including in the self-service transaction editor, use the Uptrends Vault.
  • The Description used for reporting purposes (required).
  • Failure message to include in error reports.
  • Error handling: Selecting the Ignore errors that occur in this action checkbox tells the monitor to disregard any errors that this action may encounter such as not finding the clickable element.
  • Wait until: Before a click action can happen, the element the monitor needs to click needs to be rendered and visible on the page (speaking in CSS terms, the element must be displayed and visible).
  • Wait timeout: You can specify the amount of time the monitor should wait for the element to meet the Wait until requirement above. The default wait time is 30 seconds, but you can override the default for a maximum wait time of 60 seconds.
Screenshot: Set action options

Using generated data with the Set action

You can use the Set action for filling in dynamically generated data, such as timestamps or random strings selected from an array.

Generating timestamps

To generate and set a timestamp (current date) in a text field on your page, use the following string:
{timespan 0}{now dd-MM-yyyy}

To change the day offset, specify as follows:
{timespan 1:0:0:0}{now dd-MM-yyyy}

The above code offsets the generated date by one day (meaning the monitor uses tomorrow’s date). You can also offset by one hour: timespan 0:1:0:0

Use the remaining 2 fields to offset the minute or second. Use the (timespan 0:0:1:0 and timespan 0:0:0:1) function to adjust the time by one minute or one second, respectively.

Random numeric value from an array

To set a random value from an array, use the {random 1 2 3 4 5} function. The random value from an array sets a random value from one to five.

Random string from an array

Selecting a random string is also possible. Use the {random apple banana orange} function.