This article is designed for users who are just getting started with the Uptime.com transaction check.
If you are looking for quick tips to improve your checks, see our tips article.
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
- Synthetic Monitoring Basics
- Create Steps
- Delete, Edit, Copy Selector, or Add Steps
- Advanced Transaction Check Use Case
- Browser Console Output
- Test and Deploy a Check
- Identify Elements
Synthetic Monitoring Basics
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: 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.
Generally, Transaction Check setup looks like the following:
- Create and name your Transaction Check
- Create steps for the funnel, or sequence of actions, that the Transaction Check will follow
- Identify any elements you want your Check to interact with
- Add validators to ensure elements exist or navigation completed
- Test and deploy
Create Steps for Synthetic Monitoring
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.
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:
Advanced Transaction Check: Check Uptime.com Homepage Test Form
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. Go to URL https://uptime.com/
The Uptime.com Transaction Check’s Go to URL command will follow up to 20 redirects. If you are using the Uptime.com transaction check recorder, you must use a URL that begins with HTTPS.
2. It will wait for element #domain-check input[name="url"] to exist
Validation does not wait long for elements to load. We recommend using a wait for step to detect an element that loads slowly (like an image), and then use a validation step if needed for some other value (such as validating text on a page.
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:
The “Run Test” button will start a Transaction Check that goes through each step that we have defined using a designated test server. 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 each step within this test alongside the option: View Browser Console.
We finalize and deploy a Transaction Check by clicking the blue Save button.
Browser Console Output
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.
Testing and Deploying Your Check
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.
Click here for more information Root Cause Analysis.
Identify Elements
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.
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”.