Tool Overview

You can start recording your website in two ways:

  • Creating a new UI Map file

  • Editing existing ones from Solution Explorer

Creating a new UI Map file

When a new UI Map is created, the extension automatically starts the recording session, you will see the chromedriver command line open up and a Chrome browser to appear.

Editing existing ones from Solution Explorer

There is two ways to add elements to the UI Map after its creation.

  • Right click on the UI Map file on the Solution Explorer and click the option Edit UI Map in Browser.

../_images/edit_uimap_slnxplr.png

  • In the UI Map Editor, click on the Record Elements button to start a new recording.

../_images/edit_uimap_editor.png

Recorder Window and Controls

Once the recorder and browser are ready, you will see the Recorder Window at the left bottom corner of the screen.

../_images/recorder_controls.png

  1. Show UI Map Contents: Shows another window with all the controls included on the current UI Map.

  2. Start Area Recording: Click on a div or content control in the brwoser and it will record the controls within.

  3. Start Click Capture: Click on a specific control to add them to the UI Map.

  4. Add control by CSS Selector: Add a control to the UI Map if you already know the CSS selector.

  5. Locate all Controls: It will try to find all the controls currently in the UI Map and it will let you know which ones are present.

  6. Save: Save UI Map changes

  7. Create New UI Map File: It will create a new UI Map for quick recordings.

UI Map Contents Window

The UI Map Contents Window displays elements recorded into the UI Map and allow you to make modifications.

../_images/uimap_window_contents.png

  1. Delete elements: Delete selected items from UI Map after Save button is pressed(Context menu).

  2. Rename element: Renames items after Save button is pressed(Double Click)(Context menu).

  3. Highlight element: It will highlight the selected element in the browser if found(Context menu).

  4. Update element using another element: When two items are selected, it will allow to update an element with another element properties(This will delete the source element)

  5. Start Area Recording for saved areas: If any area recordings are present, it will start recording all the elements inside of them automatically based on the UI Map settings.

  6. Add control by CSS Selector: Add a control to the UI Map if you already know the CSS selector.

  7. Refresh selected control properties: For the selected control, it will refresh all the properties in the browser.

  8. Recording Settings: It allows you to pick which controls to record and whether to record hidden controls.