Recording in depth

Browser controls#

Start, pause, stop, save#

• Record (Ctrl+R) starts a new recording from the address in the URL bar and clears previous steps. A timer and step counter appear on the right of the toolbar, a ● REC badge appears above the page, and the toolbar and panel borders pulse red.
• Pause / Resume (Ctrl+P) suspends capture without ending the session.
• Assert (visible while recording) adds a visual assertion (see Assertions).
• Save (Ctrl+S) writes the test files and ends the recording.
• Stop (Ctrl+R or Esc) ends the recording without saving: the steps are discarded (you are asked to confirm when there are any) and the browser returns to the starting page.

What is captured#

• Clicks on links, buttons, tabs and other interactive elements.
• Typing in inputs, text areas and editable content — a typed field becomes one step (Fill) with the final value, not one step per character. The click you made to enter the field is not recorded separately.
• Dropdown selections, checkboxes and radio buttons.
• Special keys: Enter, Tab, Escape and the arrow keys.
• Navigations: addresses typed in the URL bar, favorites, and page changes. Recording continues across page loads.
• Browser dialogs — alert, confirm and prompt — with the answer you gave (see Dialogs).
• File uploads: the chosen file is copied into the project (see File uploads).

Moving the mouse is not recorded, because it would add noise. For menus and tooltips that open only under the mouse, add a Hover step. Right-click is not recorded either: the browser shows its normal context menu.

Pages that open new tabs#

When the site opens a link in a new tab or window, it opens as a tab inside the app’s browser and a tab strip appears above the page. Recording follows the tab you are using; closing a tab during recording adds a Close tab step. Steps performed in another tab show a tab badge in the Action History. The first tab cannot be closed. The maximum number of tabs is set in Settings (default 12).

Repeating lists: random, first or last item#

To make a test click a different item of a list at each run (product cards, search results, table rows…), record a normal click on any item, then choose on the step card:

1. Record the click as usual — on any item of the list.
2. In the Action History, the click’s card shows a button with a dice icon. It appears only when the clicked element belongs to a repeating list.
3. Turn it on. The test now picks an item at each run, and the card shows Random, First or Last (of N). Random is the default.
4. Steps you recorded right after, inside the same item — a quantity, Add to cart — automatically follow the item chosen at run time (badge ↳ item).

With the dice button off (default), the test clicks exactly the element you recorded. Click it again at any time to go back to the recorded element.

Session video#

When Record session video is on (default), the page of the active tab is recorded while you record and saved as <name>.webm on Save. Stopping without saving discards the video. Quality (bitrate) is set in Settings. Videos up to about 12 MB are also embedded in the HTML report.

• The video shows the mouse pointer and a yellow ring at every click, so the movements made during recording are easy to follow.
• It always captures the full page: if you open the bottom panel (Runner, Network, …) while recording, the browser stays the same size on screen but the video still shows the part under the panel, without stretching.

Custom request headers#

Open Custom Request Headers from the toolbar (sliders icon). Add rows of Header-Name and value, enable or disable each row with its checkbox, then click Apply (or press Enter); closing the panel with pending changes also applies them. Enabled headers are sent with every request from the built-in browser — useful for auth tokens, feature flags or staging access. A badge on the icon shows how many are active. The list is remembered between sessions.

Draft recovery#

Steps are saved automatically while you work. If the app is closed while steps are still listed in the Action History, the next launch shows “Draft from previous session: N actions” with Restore (brings the steps back and opens the starting page) and Discard.

Editing an existing test#

1. In Framework → Workspace, right-click a recorded test’s .spec.ts and choose Load into recorder (or open the file and use the Load into recorder button). Recording must be stopped. If there are steps on screen, you are asked to replace them. The test’s data table, if any, is loaded too.
2. The app enters edit mode: an amber chip with the test name appears in the toolbar. The × on the chip leaves edit mode.
3. Change steps directly in the Action History, or add new ones by recording:
   • Append at the end: click Record. The browser returns to the test’s first page and new steps are added after the existing ones.
   • Insert in the middle: hover the gap between two steps, click + → Record from here, navigate the browser to the right point, then click Record. New steps are inserted at that position. A banner shows “Recording inserts at step N”; Append to end removes the insert point.
4. Click Save. With the same name, the test folder is overwritten (the video is replaced by the new session). Type a different name to save a new test instead.

Only tests recorded with Record can be loaded (they have an .actions.json); tests generated from Flows cannot.