How to Record a Journey Using the UI Recorder

The UI Recorder captures activity that is executed against a web UI, either by a manual tester or automated tests. For a full video of the process, see the UI Recorder page.

The UI Recorder records "Journeys" through a UI, that are equivalent to tests. The recordings contain everything needed for automated testing: interactions with the application, the data entered, any message traffic generated, and the console activity. This information is stored and modelled in Test Modeller, where it can be analysed or overlaid onto logical models of the system under test. This allows you to automatically generate an optimised set of automated tests from the Model.

Journeys are recorded as part of a "Session" that is then uploaded to a given "Context" in Test Modeller. This enables you to easily roll-back to previous recordings stored in a given Context, repeating a set of interactions as automated tests.

Note: You should record each individual test as its own individual Session, and each Session should be uploaded individually to Test Modeller. This reduces the amount of model editing required later. The process is as follows:

1. Record an individual test as a Session.
2. Upload the Session to Test Modeller.
3. Reset the UI Recorder.
4. Record the next test.
5. Upload the Session to Test Modeller.
6. Once you have recorded every test, import the activity to models in Test Modeller.

To record a test, navigate to the web UI under test. Next, open the Test Modeller Chrome extension, log in, and select the relevant project.

Quick Recording Overview

Go to the Chrome extension on the Magento Web store website. Click the Record button in the main panel of the Test Modeller Chrome extension to begin recording the Session:

The Test Modeller Chrome icon will turn red to indicate that it is recording.

When you have finished recording the test, navigate to the Test Modeller Chrome icon to open the menu. Click "Stop" and the recording will end. The Test Modeller Chrome extension will report the number of interactions recorded, and the recording time.

You can now review, edit and upload the Session.

To "Reset", press Stop followed by Record. So if you stop a recording and click "Start", a new session will be created and previous activity will be lost.

Detailed Recording Examples

There are two recording sessions shown here using the Create a New Customer Account activity.

• Recording 1 is a straight-forward session creating a new account
• Recording 2 is a session also using the create a new account activity, but there are mistakes in the input.

Recording 1

Visit the Magento web store demo page and login to the UI Scanner Chrome extension.

Select the Project we are working in and then select RECORD to begin recording.

Once you do that, all the interactions that you have on the page that you want to automate will be recorded. So for example, when data is input into the 'Create New Customer Account' page, all the actions and data are recorded. To complete the interactions in this example, the Create Account button is selected:

Now if you go to the upper right and STOP the recording, you will see the number of actions that have been in recorded. In this case, 14 actions recorded:

You will then see a list of all the actions that were performed:

Select Save which will save the recording. This recording can then be uploaded to Test Modeller Portal by selecting UPLOAD and giving it a name followed by selecting UPLOAD:

Recording 2: Negative Activity

Let's go back to the Create New Customer Account example and this time record some negative activity –   by leaving some of the fields blank, some errors will be triggered.

Add this to an existing recording, give it a name and hit save:

The data will be merged with the previous recording:

Then, when you go back to your journeys view in Test Modeller (use Test Modeller Dashboard Explorer with Project name) and do a refresh, you will see that the new recorded journey is listed. 

To view the steps in the journey, select the named journey, which will take you to another view and select the Journey tab at the top of the page. Next, select the far left button in the Action column:

Selecting this button you can see the different activities, images that were captured and the state of the underlying application:

You can also see the blueprint and note that there are a couple of new routes in:

The heatmap has also been updated accordingly: