Recorder UI Overview

Applies to CrossBrowserTesting SaaS, last modified on February 16, 2021

The Record & Replay recorder is a tool for creating automated scripts. They help you verify that tested web pages and app behavior is consistent across different browsers, screen resolutions, and operating systems.

Open the recorder

During recording

The recorder opens automatically after you start recording. As you record user actions in your web application, they will appear in the test recorder.

At design time

Select Record & Replay > Record a Script from the menu on the left, find your script on the page, click the , and select Edit Script from the subsequent menu:

Open the script recorder

Click the image to enlarge it.

If you are on the script properties screen, then to open the recorder, click Edit Steps:

The 'Edit Steps' button

Click the image to enlarge it.

Recorder screen

Here is a sample view of the recorder screen:

Test recorder

Click the image to enlarge it.

The most of it is occupied by the embedded browser. You use it to interact with the tested web page during recording, and to watch the script run (when you run your script from the recorder).

A script consists of steps which consist of events. Steps usually correspond to individual web pages in a web application, and events correspond to user actions such as link clicks or keyboard input (see below).

CrossBrowserTesting records a new step when the URL in the browser address bar is changed. To insert a new step manually, click Add > Step. This is especially helpful when recording tests for single-page applications (SPA) where the URL does not change.

The maximum number of steps for a script is 45. You can see the number of used and available steps during test recording at the bottom of the recorder screen.

Recorded events

The recorder registers the following event types:

  • Mouse movements
  • Clicks of the left mouse button (clicks on links and buttons, or anywhere on a page)
  • Clicks of the right mouse button
  • Scrolling events
  • Keyboard input events (including keystrokes of navigation keys and keyboard shortcuts, see below)
  • File upload events
  • “Think Time” events (they indicate pauses between user actions)

Notes:

  • For click events, the recorder saves the text of the link or button you clicked. This text serves as an event label and helps you navigate through events in your test. You can change it later, if needed. See below.

  • The recorder registers right-click events if they cause some further action like opening a page or popping up a dialog box. Right-clicks that open the context menu of a browser are not recorded.

  • The recorder detects pressing some navigation keys and keyboard shortcuts, provided that your web application supports them (both on Windows and on macOS):

    A list of supported keys and keyboard shortcuts

For information on editing event parameters, see below.

Toolbar

Item Description

File

The File drop-down menu includes the following items:

  • New — Starts recording a new script.

    Existing events will be deleted.
  • Open — Closes the current script and opens another one.

  • Save — Saves the current script using either the existing name or a new name and exits the recorder screen.
  • Exit — Closes the recorder screen without saving the changes made to the script.

 Record

Starts recording.

 Playback

Run the recorded test.

Note: Use this command to verify the recorded script works correctly. If it does, then you can use it in automated test suites.

 Stop

Stops recording.

Add 

The Add drop-down menu includes the following items:

  • Step — Appends a new step to the test (these steps are also called synthetic steps). This is helpful when recording a web test against single-page web applications (SPA). Such applications use the same URL for their screens. Using this command, you can organize the recorded events into steps to make it easier to view and maintain them in the future.

  • Hover – Activates the recording mode for the “hover” events. Select this menu item, then move the mouse to the desired element in the tested web page and click it. The recorder will register a hover event for this element.

  • Databank — Attaches a databank to the test to parameterize the event parameters with values from this databank. See Using Databanks in Record and Replay.

  • Add Expect — Inserts a special command — validation (or checkpoint) — into the recorded script. You use these commands to automatically verify elements’ data, page titles, URLs, cookies, and other values during the script run.

 Settings

Opens the Script Settings dialog box.

Record more actions

To record more actions and append them to the script:

  1. Locate the baseline item in the list on the Steps tab.

    You can record actions and add them to the script after or before:

    • existing steps,
    • Click events,
    • Keyboard input events.
  2. Click and select Record new steps (or Record new events) from the drop-down menu:

    The 'Record new events (steps)' menu item
  3. In the subsequent dialog, choose whether you want to record a new action before or after the baseline item:

    The Add new steps dialog
    Note: You cannot add a step before the first step.
  4. Click Record and Add. This will replay the script from the beginning until the playback reaches the required point.

  5. Record the needed actions as usual.

  6. Click  Playback to run the modified script and see if it works correctly.

  7. Select File > Save on the toolbar to save your changes.

Edit event parameters

To view event parameters, simply expand the event item. Some events provide read-only access to their parameters. Some other support editing.

Think Time and Keyboard Input events
  1. Find the needed event in the list of recorded commands and expand its parameters.

  2. Click next to the parameter, enter a new value, then click Submit.

    Change event parameters
    Tip: To map the value of a Keyboard Input event to an external databank, click Map to External Databank in the dialog.
Click events – Change target
  1. Find the needed event in the list of recorded actions and expand its parameters.

  2. Select the preferable way of identifying the click target on the page.

    To command CrossBrowserTesting to select the optimal method of object recognition using its AI capabilities, select the Let AI decide check box.

    To enable the AI object identification for the whole script, click on the recorder’s toolbar. In the subsequent dialog, select Let AI decide in the Object identification  drop-down list.

    To specify the target object manually …

Click events – Change label
  1. Find the needed event and expand its parameters.

  2. Click and enter the new text for the label in the subsequent dialog box. Click Submit to confirm the change:

    Change label of a Click event

    Click the image to enlarge it.

Delete events or steps

Select  > Delete next to the step or event you want to delete.

Delete a test event or step

Notes:

  • Deleting a step deletes all events in it.

  • Deleting a keyboard or mouse event also deletes the Think Time command before it.

More actions

To rename a script

Renaming is possible only after you stop recording:

  1. Click next to the test’s name (this button is invisible during test recording).

  2. Enter a new name for the script and press Enter to confirm the changes:

    Rename a script
To save a test under another name
  1. Select File > Save on the toolbar.

  2. Enter a new name for the test, and click Save:

    Save a script under a new name

    Click the image to enlarge it.

See Also

Record and Replay – Tutorial
Best Practices
FAQ

Highlight search results