The Transaction Check tool is based on the latest Chrome version. It supports frameworks such as React.js, Angular.js, Vue.js and so forth.

The Transaction Check monitors specific elements of a site in intervals ranging from 5 to 60 minutes, including:

• Signup forms
• Shopping carts
• User registration & login

This article will explain setup and best practices for the Uptime.com Transaction Check.

Table of Contents

• Basics
• Advanced Transaction Check Use Case
• Identify Elements
• Create Steps
• Test and Deploy a Check
• Root Cause Analysis
• Commands and Validators

Synthetic Monitoring Basics

Return

To add a new Transaction Check, click Monitoring>Checks>Add New, then select Transaction as your Check Type.

The Transaction Check script editor allows users to create steps that follow a specific set of instructions, such as visiting a site, clicking a button, or entering information into a text field. It's designed to mimic user's actions, able to click or interact with most elements of a site. Performance reporting for a transaction check includes: time to fully load the page, all images, and run initial javascript, etc. Response time is a measure of all steps.

Uptime.com supports names and IDs in the transaction editor, even without the hash (#) symbol. Look for elements identified as follows: "name=abc123" or "id=abc123". Use everything after “=” in the Transaction Check script editor. For more detailed instructions, see the Identify Elements section below.

Generally, synthetic monitoring setup looks like the following:

1. Create and name your Transaction Check
2. Identify the funnel, or sequence of actions, that the Transaction Check will follow
3. Identify the elements you want your Check to interact with
4. Create steps that follow specific actions
5. Test and deploy

Advanced Transaction Check: Check Uptime.com Homepage Test Form

Return

This Transaction Check will test the Domain Health Check form on the homepage of Uptime.com.

Recall that a successful Transaction Check follows two crucial steps:

1. Create and name your Transaction Check
2. Identify the funnel, or sequence of actions, the Transaction Check will follow

Name this check “Homepage CTA Test”, then consider what the user needs to do for this test to be considered successful. Here’s what our Transaction Check will do:

1. Go to URL https://uptime.com/
2. It will validate that element #domain-check input[name="url"] exists
3. It will fill in the field #domain-check input[name="url"] with “testdomain.com”
4. It will submit form #domain-check
5. It will validate that our URL contains: https://uptime.com/domain-health
6. It will wait for #domainHealthResultsDisplay table.listing-table to exist
7. It will validate that #domain-health-page-header h1 contains the text “testdomain.com”
8. It will wait for #domainHealthResultsDisplay div.results-table tr:nth-child(3) td to exist
9. Finally, it will wait for the element #domainHealthResultsDisplay div.results-table .listing-table to contain the text “Get DNS Records”.

This screenshot provides a visual reference of our steps:

Steps 1-4 all take place on the URL http://Uptime.com. The first step visits the URL, the next validates the form we’re testing exists, then fills in our requested data before submitting this form.

Step 5 validates that submitting the form sends us to the next URL in our funnel. Step 6 waits for the domain health results table to load (but not the results themselves, that comes in Step 8). In Step 7, our Transaction ensures the page is showing the Domain Health Check for “testdomain.com” and not some other value.

Step 8 then waits again for any javascript to complete and for the results of the health check to begin appearing on page. Finally, Step 9 ensures the results table has a row showing “Get DNS Records”.

The green “Run Test” button will start a Transaction Check that goes through each step that we have defined. It records the average page load time, and other technical details, when it performs a given check. Once complete, we can download the HTML of each URL and show details.

Details include:  URL, status code, cookies, response headers and request headers.

Assuming everything we entered checks out, we will see values that define the average load time for all URLs being tracked within this test alongside the option: View Browser Console.

The Browser Console provides a snapshot of the GET and POST requests Uptime.com used in the Transaction Check, as well as any console output logged by Javascript code. It reports status codes and technical data useful for reviewing the steps of a check for unnecessary redirects and other issues or errors.

We finalize and deploy a Transaction Check by clicking the blue Save button.

The following sections will dive into this example in greater detail, or you can refer to this article on Improving your Transaction Check.

Identify Elements

Return

First, we need to successfully select and identify elements so we can direct the Transaction Check with commands and validations. 

Here are all possible methods of referencing elements within the Transaction Check editor:

• Value of element "id" attribute
• Value of element "name" attribute
• Element CSS selector
• Element XPath selector

If there are multiple matching elements, the first element is used. 

If you are familiar with your browser’s Inspector functionality, feel free to skip this section.

Using Your Browser

In both Chrome and Firefox, pressing Ctrl+Shift+C/Cmd+Shift+C opens the Inspector. You can use this tool to highlight elements of a webpage and determine its name or ID. 

Alternatively, you may right-click on a specific element and click Open Inspector.  The Inspector shows your element within the code of a website. Right-click the highlighted portion of code, then click Copy Selector and paste the Selector into the Transaction Check script editor.

Inspect in Chrome

Inspect in Firefox

Alternatively, you may right-click on a specific element and click Inspect or Inspect Element depending on whether you are using Chrome or Firefox/Edge.  The Inspector shows your element within the code of a website. Right-click the highlighted portion of code, then click Copy Selector from the Copy submenu and paste the Selector into the Transaction Check script editor.

Uptime.com Identify Element

Uptime.com also includes functionality to select elements based on what you type. Visit a URL during the first step, then run a Test. Uptime.com will identify the element you’re looking for as you type it into any “Element” field after that initial test. The tool lists button, input, select, textarea and link (a) elements first for easy reference. 

This functionality can help with proper syntax and is sometimes useful when two Selectors are similar in nature.

Identify Elements - Advanced Usage

In addition to the above, advanced users with knowledge of CSS3 selectors and XPath may use the full range of CSS3/XPath syntax in order to identify HTML elements in any “Element” field of your transaction. You can run a Google search for “CSS3 Selectors” or “XPath” for a full reference; here are some examples to get you started:

#cart input.quantity

Find the INPUT element with “class=quantity” which is a descendant of the element that has “id=cart”.

#cart > input.quantity

Find the INPUT element with “class=quantity” which is a direct child of the element that has “id=cart”.

#cart + button.submit

Find the BUTTON element with “class=submit” immediately following the element with “id=cart”.

#cart ~ h3

Find the H3 element immediately preceding the element with “id=cart”.

ul#items > li:nth-child(3)

Find the LI element which is the 3rd direct child of the UL element with “id=items”.

div[data-type]

Find the DIV element that has a “data-type” attribute with any value.

a[href=“/homepage”]

Find the A element (anchor/hyperlink) which has a “href” attribute equal to “/homepage”.

div[class~=“special”]

Find the DIV element whose “class” attribute value is a space-separated list of words, one of which is exactly “special”.

div[class^=“prefix”]

Find the DIV element whose “class” attribute value begins with “prefix”.

div[class$=“suffix”]

Find the DIV element whose “class” attribute value ends with “suffix”.

div[class*=“substring”]

Find the DIV element whose “class” attribute value contains at least one occurrence of “substring”.

Create Steps for Synthetic Monitoring

Return

Click Add a New Step in the Transaction Check script editor.

Steps are broken down into two categories: Commands and Validations. Commands (color-coded blue) act as tasks to complete or (more broadly) steps for a Transaction Check, Validations (color-coded green) verify elements that should be present before registering a failure.

Select either a Command or Validation, using the Run Test button to check each step as you create your check.

See the Commands and Validators section below for a breakdown of each potential step.

Delete, Edit, or Add Steps

If you need to add a new step that should precede a prior step already created, simply drag the new step to its proper place in the Transaction Check steps. To delete a step, click the small X to the right of the step. You may also click each step to edit its parameters.

Testing and Deploying Your Check

Return

Use Run Test to run a single Transaction Check based on your steps to catch errors in your setup before deployment. When your entire test completes successfully, your synthetic monitoring is ready to deploy.

Failed Checks

When a probe server detects downtime or fails to register as UP, the Transaction Check you've configured will attempt a retry based on the number of retry attempts you've configured for this check. Please note: The retry intervals for Transaction checks are two minutes, as opposed to one minute for other checks.  

Uptime.com offers multiple methods of gaining insight into a failed test. The first is a Camera icon that links to a downloadable screenshot of what the Uptime.com tool encountered. The Check also displays a warning icon, and accompanying message, with technical details about the failure.

Additionally, you may view page source after navigation (before and after javascript has executed) with downloadable files that you can review for accuracy. Use the "Info circle" icon to review technical details of each requested URL such as headers and cookies. The "File" icon on the left downloads the HTML code before rendering, and the middle "Code" icon downloads the HTML DOM after rendering & javascript.

Typically, the best way to correct an error in testing is to inspect each step carefully and be sure you’re using the proper URL, text, element ID, name or CSS selector. Also review syntax.

Root Cause Analysis

Return

If the Check registers a failure once it is deployed, the Root Cause Analysis tool (available via Reports>Alerts) can provide further insights. Root Cause Analysis includes a screenshot of what Uptime.com encountered, along with technical data about the servers reporting failure, and which step triggered the alert.

This screenshot shows how to access this tool:

And here is a sample Root Cause Analysis. Note the screenshot, and technical data involving Step 4 (See Use Case):

Commands and Validators

Return

Authentication & Settings

Sets HTTP basic auth and other settings including HTTP Headers, Browser Viewport Size, and whether to run the check as Mobile. 

Basic Auth: Allows you to provide credentials for pages behind Basic HTTP Authentication. You will need a username and password. We highly recommend that you create unprivileged test credentials for any checks that utilize HTTP basic auth.

HTTP Headers: Defines HTTP Headers to be sent with a request. User-Agent is disabled. HTTP Headers must be separated by line break in the Name: value format. 

Screen Size: Defines the viewport size the check will run, or the device the check emulates. The default is 1024x768. 

Mobile: Adds a Mobile flag into the request User-Agent string. When this option is used, the browser also takes into account a page’s `meta viewport` tag and provides touch events support. 

Go To URL

Navigates the browser to the URL that you specify. Note that the target page must load within 30 seconds otherwise the transaction will fail with a page load timeout. Navigation is considered finished when the load event is fired.

Click Element

Clicks on the specified HTML element. Use the id, name or CSS selector of the element you wish to interact with. Users can define Left, Middle, or Right click, with options to Single, Double, or Triple click. 

Hover Element

Performs a mouse hover over the specified element. Use this command for elements that utilize the :hover selector. 

Focus Element

Focuses on the specified HTML Element. Use this Command for elements that utilize the :focus selector. 

Fill in Element with Text

Fill in a form's text, password, hidden, select, or textarea field with the given text or value.

Check/Uncheck Checkbox/Radio Button

Checks or does not check a specified checkbox or radio button. Use the id, name or CSS selector of the element you wish to interact with. 

Submit Form Element

Submit the specified form (can also be done by button click)

Wait for Element To Exist

Waits until the specified HTML element exists on the page. Use the id, name or CSS selector of the element you are waiting for. Please note that the element must appear within 25 seconds otherwise the transaction will fail with a wait timeout.

Wait for Element To Contain Text

Waits until the specified HTML element appears and then waits for the element to contain the given text. Use the id, name or CSS selector to specify the element, then define the text it should contain. Users can tick a box to enable regex matching as needed. Please note that the element must appear within 25 seconds otherwise the transaction will fail with a wait timeout.

Wait for 1 Second

Pauses for 1 second and then continue the next step. Use this as a last resort if you need the browser to wait for some javascript to run. Usually using one of the “Wait for Element” steps is much more reliable.

Set Variable

Set a variable that can be used in subsequent steps. To use this variable in other steps as either an input or validation value, enclose the variable name in dollar signs ($). For example, you can use a variable such as CLIENT_NAME in a validation step text parameter as “Welcome, $CLIENT_NAME$”. The variable value can consist of alphanumeric characters, as well as an underscore. Variable names are case insensitive. The value of the "Options" field is treated differently depending on its variable type. Below are explanations per each type:

Element Text

Options: Element Name, ID, CSS Selector or XPath

The variable value is set from the contents of the element you’ve referenced. 

Current Date & Time

Options: Format string, eg MMM DD, YYYY h:mma z (Please utilize this link for all format specifiers)

The variable’s value is the current date and/or time in UTC. Use the specified format as cited/linked above.

Random Value

Options:

• [Number-]Number, e.g. 100 or 1705-1980 - Random integer number in a specified range, or from 0 to specified number.
• [Number:]List, e.g. 3:1,a,b,c,37 - Random string composed from Number (default 1) elements of List. The result from the example could be: 1b37.

The value of this variable is dependent on the string you’ve defined. 

Constant

Options: string

Validations

HTTP Status Code Should Be Status

Checks that the HTTP status code matches the specified status (eg. 200 or 404). You must enter a numeric HTTP status code. 

URL Should/Should Not Contain

Checks that the browser’s URL does or does not contain the given text or regex option (if enabled). Users can tick a box to enable regex as needed. Please note: regular expressions can also contain variables.

Title Should/Should Not Contain Text

Checks that the page title attribute does or does not contain the given text or regex option (if enabled). Users can tick a box to enable regex as needed. Please note: regular expressions can also contain variables.

Element Should/Should Not Exist

Checks that the specified HTML element does or does not exist on the page. Use the id, name or CSS selector of the element that should exist.

Element Should/Should Not Contain Text

Checks that the specified HTML element does or does not contain the given text or regex option (if enabled). Use the id, name, or CSS selector of the element, then define that text that it should contain. Users can tick a box to enable regex as needed. Please note: regular expressions can also contain variables.

Checkbox/Radio Button Should/Should Not Be Checked

Verify that the specified checkbox/radio button is or is not checked. Use the id, name or CSS selector of the element you wish to interact with.