1. Support
  2. Knowledge base
  3. Transaction monitoring
  4. Understanding the step editor

Understanding the step editor

We’re changing our user interface. Some info may not yet be up to date. Please check From classic to new UI.

The transaction step editor is needed to edit the steps and actions of a transaction script and can be used as the visual editor that has a UI allowing you to add and edit steps or the script editor that that is a plain text editor.

If you feel comfortable with writing your own script, check out Scripting source code directly to learn more about the script editor.

In most cases you won’t write a script, but rather use the transaction recorder to make a first set-up of your script and then use the step editor to fine-tune the transaction.

Note: Uptrends uses transaction credits to price your transaction monitor. The number of credits used for a monitor is shown after the monitor name in the Monitor overview (go to Transactions > Transactions setup). You can find a full explanation on credits in the knowledge base article Understanding transaction monitor credit calculations.

Steps and actions

The script of a transaction monitor contains steps (of the transaction you want to monitor). Inside the steps you find actions, which are the micro-steps in your transaction.

To edit the steps and actions:

  1. Go to Transactions > Transactions setup.
  2. Open the Steps tab.

screenshot transaction step editor

You refine and test your transaction script in the Steps tab, or you can write your script from scratch here as well. Notice the Switch to script button at the top right of the editor for this purpose.

If you uploaded your script from the transaction recorder, you should see one or more steps with actions already defined. If you’re creating your script from scratch, you will build out each step in your transaction using the step editor. It is recommended to use the transaction recorder to give you a good basis to start from.

Your transaction script is made up of steps and actions. Let’s take a closer look at what we mean by steps and actions.

What is a step?

When you upload your script from the transaction recorder, Uptrends automatically defines your steps for you, but what is a step? A step is an arbitrary grouping of actions in your transaction script. Typically, you want to group user interactions with your page into steps that end with a server request such as a form submit. Grouping actions by server submits/requests helps with troubleshooting and performance reporting.

You could also think of a step as a state transition in the browser, i.e., an action that results in a new page or refreshes the page with new content. But really, you can set up your steps to reflect whatever grouping makes sense to your use case and your reporting needs.

Step settings

Clicking on the arrow > in front of a step name allows you to access the step settings and see the actions inside the step.

screenshot single step in script

Within each step, you have several settings, some settings are optional.

  • Waterfall - You can add an optional waterfall report to any step to see the performance for the page load. Each waterfall report added to a transaction script uses one transaction step credit.
  • Screenshot - An optional screenshot lets you see the screen as experienced by your user at the end of the step. A screenshot uses one transaction step credit.
  • Page source - Choose this option to get the page source information and any console log data that was generated during the execution of that step. Note that the page source is available only in combination with the waterfall.
  • Name - Each step needs a name. The more descriptive you make the name, the better. For example, “Add to cart,” “Log in,” or “Request appointment time.”
  • Error handling - Sometimes, you don’t want page errors to stop your script. By checking the Ignore all errors that occur in this step box, Uptrends continues to the next step regardless of the result from the current step. Your check detail report shows the error, but the transaction continues despite the error.

Adding steps

To add a new step to your script:

  1. Scroll to the bottom of the Steps tab.
  2. Click the Add step button.
  3. Name the new and currently empty step.
  4. (Optional) Grab the step by clicking on the handle (dotted vertical lines at the top left of the step) and drag the step to the desired location in the sequence within the script.
  5. Add actions. You find more information on actions in the next paragraph.
  6. Click the Save button to save your changes.

What is an action?

Actions are your user interactions, content checks, and browser interactions that happen within a step. They are divided into the categories Interaction, Test, and Control.

Interaction

The actions of type Interaction are in short:

  • Navigate — go to a specific URL
  • Click — locate a page element like (radio) buttons or checkboxes and perform a mouse click
  • Set — locate and fill a text field, text area, password field, etc.
  • Hover — find an element and hover the cursor over the element to reveal other hidden page elements

These are described in detail in the knowledge base article Page interactions.

Test

The Test type actions are either content checks or enter a wait action.

  • Element content — find and check an element for specific content
  • Document content — check the entire page document for specified content
  • Wait for element — look for and wait for a specified page element

Refer to the the knowledge base articles Content checks in transaction monitoring and Using wait conditions to learn what they do actually.

Control

The action category Control contains the following options:

  • Screenshot — take a screenshot of the current screen
  • Switch browser tab — give focus to the new window/tab, if your page opened another browser window
  • Switch frame — allows you to switch between iFrames on your page
  • Scroll — find a page element and scroll to the position on the page (especially helpful when using screenshots)
  • Adjust variable content — change an existing variable with the Adjust variable content action

Adding an action

To add a new action to one of the steps in your transaction monitor:

  1. Open the step that you want to add an action to.
  2. Click the Add action button. The Add action pop-up opens: screenshot add action pop-up Hovering over the action option gives you more information about that action.
  3. Click the action that you want to add to your step.
  4. (Optional) Reorder the actions, if necessary. Grab the action by clicking on the handle (dotted vertical lines at the top left of the action) and drag the action to the desired location in the actions sequence. You can also drag the action to another step, if needed.
  5. Click the Save button to save your changes.

CSS selectors and XPath queries

You may have noticed that some of the actions show CSS selectors or XPath queries. These tell the transaction monitor exactly which screen element it needs to interact with to complete the action. If you used the transaction recorder, it has already picked what it thinks is the best method for locating an element on your page as described in the knowledge base article Transaction recorder selector determination. However, the algorithm doesn’t always pick the best option in all cases, but you can find the other options the recorder chose by clicking the […] button in the selector value field. If you’re hand coding your transaction, you need to decide which method is best for your page and write the queries yourself. Learn more about CSS selectors or XPath queries.

Occasionally you may need to alter the values in these fields. If you’re comfortable working with CSS selectors or XPath queries, you may attempt to change the selector or query yourself by choosing one of the possible selectors recommended by the recorder. Or you may write your own. If you’re not comfortable with CSS selectors and XPath queries, we suggest that you contact Uptrends Support to have them make the needed changes.

Action Settings

Your actions have different settings based on the action type. Please check out the knowledge base article Page interactions to learn about all settings for each of those actions.

Scripting source code directly

You can always write your scripts in a different editor or environment and cut and paste the script (or write the script directly in our text editor). Use the Switch to script button at the top of the Steps tab to open the text editor. Once in the text editor, click the Switch to visual editor to get back. When switching between these modes, the script is validated.

screenshot visual and script editor view

Use the transaction API

You may wish to use the Uptrends' API to create monitors, upload scripts, alter scripts, and check your monitor’s status. To learn about all of the available methods, please see the API documentation.

By using the Uptrends website, you consent to the use of cookies in accordance with our Cookie Policy.