How to record and import scenarios via your web browser

Use Chrome Recorder (also available on Edge and other Chromium-based browsers) to easily record your own interactions with a website, and then import the recording as a scenario in Speed Analysis Lab.

Creating and exporting a recording

Step 1: Open the Chrome Developer Console

1. Open the website you wish to record from via Google Chrome.

2. Open the Developer Console by clicking the 'three-dot' icon next to your profile picture.

3. Click ‘More Tools’, followed by ‘Developer Tools’.

4. Click the 'three-dot' icon in the top right-hand corner of the Developer Console, followed by ‘More tools’ > ‘Recorder’. 

Step 2: Create your recording

1. In the window that opens, select ‘Create a new recording’.

2. Enter the name of your recording. Note, the name of your recording will become the file name when you export it and the name of your scenario in Speed Analysis Lab.

3. Under ‘Selector types to record’, select either ‘CSS’ or ‘XPath’ depending on your preference. Note, the type of selector you choose will be the one used in Speed Analysis Lab.

4. Click ‘Start recording’. 

5. Perform the actions that you wish to record and stop the recording when you’re done.

Step 3: Export your recording

Once you have stopped the recording, you can export it as a JSON file by clicking the ‘Export’ button and selecting ‘JSON’.

About recorded actions and browsing

Recorded actions

All actions you perform on the website will be recorded until you end the recording.

Ensure that you only perform useful actions when recording your browsing to improve the quality of the resulting scenario. Note that keyboard navigation is not supported by Speed Analysis Lab, so you should only use clicks (no tabulations, no up keys, no ‘enter’ key to submit a form, etc.).

The recorded actions appear as a timeline. If you click an action in the timeline, you can find more details about it (e.g. the type of event or selector on which the action occurred).

Recorded browsing

Chrome will automatically detect browsing (e.g. page changes) and Speed Analysis Lab will reuse this information to define the Steps and their actions.

However, if there is no page change (eg.: “Add to cart”, or SPA navigation) Chrome will not create the proper implementation for Speed Analysis Lab, and all actions will be in the same step.

You can enforce the recorder to split your scenario into several steps by clicking 'Add assertedEvents'.

Importing your recording and creating a scenario

Step 1: Import your recording

1. Navigate to ‘Speed Analysis Lab’ and select ‘Scenarios’.

2. Click the ‘Import from Chrome recorder’ button.

3. Locate and select the JSON file you exported and then upload.

4. Once uploaded, any actions that couldn’t be imported will be displayed onscreen.

Action types imported

Note, that only the following Chrome recorder actions can be imported into Speed Analysis Lab:

Step 2: Review and refine your scenario

Before executing your scenario, you should action and review the following:

• Rename steps and actions: use a naming convention that’s easy for your and your team to understand
• Split any steps as necessary: Chrome Recorder only creates “steps” when there is a page change (so SPA navigation won’t be detected). For most scenarios, it might be necessary to split some imported steps into several ones, and to pay particular attention to the actions defined as recorded actions.
• Delete unnecessary ‘Fill the input’ actions:
  • When recording, you likely clicked in the input field before filling it in, causing a click action to appear in the scenario. You can delete this action, as the ‘Fill the input’ action already performs a click inside the input field.
  • The Chrome recorder may have recorded several actions for a single keyboard input. This typically happens when you type the first letters in uppercase, for example; “HEllo” usually generates an action containing "HE" and an action containing "HEllo". You should delete the irrelevant actions from your scenario.
• Add ‘check’ actions as necessary: By default, there are no ‘check’ actions when you import a scenario. Checks allow you to check that the page is in the expected state and to issue, at runtime, warnings if not.
• Edit the scenario configuration: Check and update the location and bandwidth as preferred.
  • The location will be the same as the last scenario created, or if none, then ‘France’ by default.
  • The default bandwidth is the first one of the location/device selected.

Learn more about managing steps and actions here.

Additional actions, if applicable:

• Add ‘scroll’ actions: The Chrome recorder does not record scroll actions. If your scenario needs to interact with lazy-loaded elements, you will need to add these manually.
• Websites using shadowDOM: Speed Analysis Lab only supports XPATH and CSS selectors. For shadowDOM, you’ll need to update the selectors to use the ::shadowRoot:: keyword as illustrated below: