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 use cases for the Uptime.com Transaction Check. For instructions on how to use the Transaction Recorder, see this article.

Table of Contents

• Basics
• Advanced Transaction Check Use Case
• Root Cause Analysis
• Identify Elements
• Create Steps
• Test and Deploy a Check
• 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.

Please note: The Uptime.com Transaction Check’s Go to URL command will follow up to 20 redirects.

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 referencing elements by their ID and name attribute in the transaction editor by specifying name or id attribute values. 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, Transaction Check 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 Monitor Entire Site 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”

This screenshot provides a visual reference of our steps:

Steps 1-5 all take place on the URL http://Uptime.com. The first step is for authentication and settings, which we don’t need for this use case. The second visits the URL, then waits for the form we’re engaging with to exist. We will instruct the check to fill in our requested data and submit the form. 

We need step 6 to verify the next URL in our funnel.

We can also add two more steps to verify the results of our health check. One step to verify our value the results are displayed, and another to tell us that the tables containing our results have rendered (We will validate success if the check sees “Get DNS Records”.

The “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.

Root Cause Analysis

Return

Transaction Check Alert Details also include a screenshot of what Uptime.com encountered, at which specific step, and technical data on the expected output. Note in this screenshot that the expected text was a misspelling of the word “Uptime”:

Scroll down to review the Check Results and the Browser Console log:

Check Results displays the steps the Transaction Check took, as well as technical details on the failure. 

The Browser Console Log 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 is accessible during check configuration, and when an alert is issued. The browser console opens a new tab and it reports status codes and technical data useful for diagnosing unnecessary redirects and other issues that contribute to errors. For more details, view this Transaction Check use case.

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, and be sure to test each step as you create your check.

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

Delete, Edit, Copy Selector, or Add Steps

If you need to add a new step that should precede a prior step already created, simply click “+ Add Step” or click the three dot menu from any step as depicted below, then 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, or select Delete Step from the three dot menu. 

You can click any step to edit its parameters. 

To copy an element selector, click the three dot submenu and select the option as depicted below:

Testing and Deploying Your Check

Return

Use Run Test when you have finished creating your Transaction Check to verify all steps are working as intended. This test will catch errors in your setup before deployment. When the 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.

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.