New to Telerik Test Studio? Download free 30-day trial

Highlighting Elements in Recording Mode

The Highlighting menu is a powerful set of options related to the targeted element. It brings additional options to interact with an element in the terms of test recording, apart from clicking or entering text.

In this article you will find useful details and hints about the highlighting feature in Test Studio recorder and how to get most benefits of this.

  1. How to Enable or Disable the Highlighting
  2. Quick Steps in Highlighting Menu
  3. Mouse Actions in Highlighting Menu
  4. Scroll Actions in Highlighting Menu
  5. Add to Elements Option in Highlighting Menu
  6. Locate in DOM Option in Highlighting Menu
  7. Build Step Option in Highlighting Menu

Enable or Disable Highlighting of Elements

Once in an active recording session you can enable or disable the highlighting from the Compact Recording Toolbar.

Enable\disable highlighting

Note

The highlighting feature can be enabled (or disabled) even when the recording is paused.

When enabled and the mouse pointer pauses over an element in the recording surface of the tested application, you will see the Elements menu with multiple options. This rich menu makes it easy to work with the recording surface and its elements. It provides quick access to relevant functions right in the application you are testing.

Elements Menu

Tip

Use the Pause/Break key on your keyboard to toggle on or off the Highlighting feature.

Options in the Highlighting Menu

The Elements Menu provides access to various actions and functions apart from the straightforward click or type actions. These are divided in few sections to speed up their usage. Read below what options there are in the different sub-menus.

Quick Steps

Quick Steps sub-menu provides a list of tasks, which can be performed against the highlighted element - these are context sensitive and will be different depending on the target element. There are few options listed to add a quick verification, a wait step or to extract any of the element's attributes, based on its specifics.

Quick Steps Sub-menu

Mouse Actions

Mouse Actions sub-menu provides quick access to different type of click steps like double-click, right mouse click, mouse key up or down, mouse hover over action, etc. The mouse click steps are getting recorded with specific coordinates relevant to the target element, where the click will be sent. The default set is the element's absolute center, but you can choose to change this in the Advanced Recording Tools actions section.

Mouse Actions Sub-menu

Tip

The Drag and Drop action requires the selection of the element to drag and the element to drop it to. Therefore, this can only be added through the Advanced Recording Tools.

Scroll Actions

In certain occasions you may need to scroll the page and change the visible part of it. The Scroll Actions sub-menu gives the options to choose an element on application screen and scroll it to the top, bottom or center of the page.

Scroll Actions Sub-menu

Note

The Quick Steps, Mouse Actions and Scroll Actions options can be all accessed in the Advanced Recording Tools. There you can find also additional type of steps to add against a selected element.

Add to Elements

Add to Elements option allows you to add the highlighted element to the selected test in project as an 'external reference' - that means the element is not related to any step from the test, but is still listed in it and can be referred from a coded step, for example.

Add to Elements

Locate in DOM

Locate in DOM is an option, which directly opens the DOM Explorer in the Advanced Recording Tools and selects the highlighted element in the DOM structure of the page. You can further explore the surrounding elements of the selected one, or use the options for building a step using this element.

Locate in DOM

Build Step

Build Step... is an option very similar to the Locate In DOM one - it selects the highlighted element in the DOM tree and directly switches to the Element Steps tab in the Advanced Recording Tools.

Build Step

There are additional actions and verifications you can add against the selected element. For example, you can add mouse actions and advanced verification steps for attribute, image or text from image.

In this article
Not finding the help you need? Improve this article