Recorder Toolbar

Skyramp’s trace collection recorder toolbar gives you fine-grained control over how you capture UI actions, canvas interactions, asserts, and visual elements. Each tool is designed to record exactly the behavior you need so your generated tests are modular, maintainable, and reflective of real user flows.

Visual Modularization

Purpose: Create logical blocks inside your trace collection that Skyramp converts into helper functions, enabling efficient code reuse.

How it works:

• Click the Breakpointing tool to start a block.

• Perform the actions you want to group together.

• Click it again to end the block.

• In the Playwright Inspector, you’ll see clear markers showing where each block starts and ends.

What Skyramp generates:

• Each block becomes a function in your UI test.

• Our modularization engine preserves these functions exactly as you recorded them, making the test structure clean and readable.

Uploading a File

Purpose: Capture two-step file-upload actions accurately.

How it works:

1. Click the Upload File tool.

2. Click the file-selection button on your UI.

3. Your OS file picker will open, and select any file you want to upload.

4. Click the Upload button on your UI.

Skyramp records the correct file-input interaction, even when the upload control is custom-styled.

Note: In the generated test code, make sure that the absolute file path is given to the filechooser function.

Drag and Drop

Purpose: Record dragging elements across the page, especially for UIs with movable items or canvas-based interactions.

How it works:

1. Click the Drag & Drop tool to enable recording.

2. Drag elements on your UI as needed.

3. Click the tool again to disable it once finished.

Examples of use:

• Rearranging items in a sortable list.

• Adjusting the value of a slider.

• Moving shapes or game pieces on a canvas.

• Dragging a card in a kanban board.

If your UI includes a <canvas> element and you need to capture pixel-level movements, this tool is required.

Scrolling while Drag & Drop is enabled

When the Drag & Drop tool is enabled, Skyramp will also capture any scrolling up or down the page that happens as part of that interaction. This is useful when you need to drag an element into a section that isn’t initially visible and requires you to scroll to reach the drop target.

The Drag & Drop tool will automatically deactivate after it detects that you’ve stopped scrolling. If you need to scroll again as part of another drag interaction, make sure to click the tool once more to re-enable it.

Select Area

Purpose: Capture a specific region on the page—useful for OCR, cropping tools, or any UI requiring region selection.

How it works:

1. First, click the appropriate UI button that activates a “selection mode” in your app.

2. Then click the Select Area tool in Skyramp.

3. Drag your mouse to outline the exact area on the page.

Skyramp records the region you selected so the generated test reflects the intended coordinates and behavior.

Draw / Eraser Tool

Purpose: Capture precise drawing or erasing movements on canvas-based UIs.

How it works:

1. Activate the drawing or erasing tool in your UI.

2. Click the Draw/Eraser tool in Skyramp.

3. Perform your drawing or erasing motion—Skyramp tracks the pixel-level path.

4. Click the tool again to disable it and continue with other actions.

When to use this:

• Whiteboard tools

• Signature pads

• Image editing canvases

• Annotating or highlighting elements

Assertions: Visibility or Text

Purpose: Add assertions directly during trace collection.

Behavior:

• Visibility Assertions
  Skyramp captures the selected element and adds an assertion ensuring it is visible on the page.

• Text Assertions
  When selecting text, Skyramp will prompt you to confirm the captured text to ensure the assert matches the exact value you intended.

Assertions: Value

Use this when you need to validate the actual state or value of interactive controls such as input fields, dropdown options, checkboxes, or radio buttons.

When to use it:
Text or visibility assertions only confirm what’s shown on the screen — they do not verify whether a field is filled, a checkbox is checked, a radio is selected, or which option is chosen. Assert Value captures the underlying value or state so your test can validate the control accurately.

How it works:

1. Click the Assert Value tool.

2. Select the input, option, checkbox, or radio element on your UI.

3. Skyramp records the actual value or state (e.g., typed input, selected option, checked/unchecked status).

Examples of what it can assert:

• The text entered into an <input> field

• The selected option in a dropdown

• Whether a checkbox is checked or unchecked

• Which radio button is selected

Assert within a table cell

Purpose: Validate the value contained within any cell of a table or spreadsheet-like UI.

This tool allows you to assert values in grid-based interfaces—for example spreadsheets, data tables, financial dashboards, or any UI that displays data in rows and columns.

How it works:

1. Click the Assert Table Cell Value tool.

2. Hover over and select any table cell on your UI.

3. Skyramp will capture the cell’s internal value and generate a corresponding assertion in your test.

Snapshot Feature

Purpose: Capture visual snapshots of elements, regions, or the full page for visual assertions.

Capabilities:

• Full-page snapshot

• Element-level snapshot

• Area-based snapshot

Visual snapshots allow you to create visual diffs in your generated tests, helping you validate layouts, UI regressions, and pixel-level changes.

1. Double-click the snapshot tool to capture the entire page.

2. Click once to activate the tool, then select an element you’d like to capture.

3. Click once to activate the tool, then click and drag to capture a specific area of the page.