Test Builder

The visual test builder is a 3-panel interface for creating, editing, and running browser tests. Drag and drop steps, configure selectors, and watch your tests execute in real-time.

Overview

The test builder is the primary workspace in QA Studio. It uses a three-panel layout designed for efficient test creation:

Above the panels is a top toolbar that contains the test name, save button, run button, recorder toggle, and test configuration options.

Action Palette (Left Panel)

The action palette provides all available step types organized into logical sections. Click any action to instantly append it to the end of your steps list.

Standard Actions

These are the core browser interaction actions:

• Navigate — Go to a URL
• Click — Click an element on the page
• Fill — Type text into an input field
• Select — Choose an option from a dropdown
• Check — Check a checkbox
• Uncheck — Uncheck a checkbox
• Hover — Hover over an element
• Press Key — Press a keyboard key (Enter, Tab, Escape, etc.)
• Wait — Wait for time, element, or URL condition
• Screenshot — Capture a screenshot for visual regression
• Assert — Verify page state (text, URL, title, visibility, value)

Flow Actions

• Use Flow — Insert a reusable flow (shared step sequence) from your project

Control Flow Actions

These actions control conditional execution and looping:

• If — Start a conditional block
• Else — Define the alternate branch
• End If — Close the conditional block
• Loop — Start a loop with a max iteration count
• End Loop — Close the loop block

See the Control Flow page for detailed usage of conditional and loop actions.

Steps List (Center Panel)

The center panel displays all steps in your test as a vertical list of visual step cards. This is the heart of the test builder where you organize your test flow.

Step Cards

Each step is rendered as a card showing:

• Action icon — A visual icon representing the action type (e.g., a cursor for click, a keyboard for fill)
• Action label — The human-readable action name
• Summary — A brief description of the step's configuration (e.g., the URL for navigate, the selector for click)
• Step number — The sequential position in the test
• Status indicator — Visible during and after test runs (pass/fail/running/skipped)

Drag and Drop

Steps can be reordered by dragging them to a new position. QA Studio uses dnd-kit for smooth, accessible drag-and-drop interactions. Grab the drag handle on the left side of any step card and move it to the desired position.

Nesting Indentation

Steps inside control flow blocks (between If/End If or Loop/End Loop) are automatically indented to visualize the nesting hierarchy. This makes it easy to see which steps belong to which conditional branch or loop body at a glance.

The indentation depth increases with each level of nesting. For example, steps inside a loop that is itself inside an if-block will be indented two levels deep.

Status Indicators During Runs

When a test is executing, each step card displays a real-time status indicator:

Step Editor (Right Panel)

Clicking any step card in the center panel opens its configuration in the right panel. The editor displays different fields depending on the action type of the selected step.

Dynamic Fields

Each action type has its own set of configurable fields. For example:

• Navigate shows a URL input field
• Click shows a selector input with mode dropdown
• Fill shows both a selector input and a value text field
• Assert shows assert type, condition, and value dropdowns
• Wait shows wait type dropdown with conditional fields (time, selector, or URL)
• If shows condition type, and relevant condition fields
• Loop shows condition type, condition fields, and max iterations

All text fields that accept user input support environment variable substitution using the {{variableName}} syntax.

Selector Input

For actions that target page elements (Click, Fill, Select, Check, Uncheck, Hover), the step editor provides a selector input with a mode dropdown. The mode determines how Playwright locates the element on the page.

Save & Run Workflow

The top toolbar provides Save and Run buttons that work together to ensure your tests are always up to date before execution.

Auto-Save Before Run

When you click Run, QA Studio automatically saves the current test state before starting execution. This means you never accidentally run a stale version of your test. If you want to save without running, the dedicated Save button persists your changes immediately.

Unsaved Changes Indicator

When you make changes to a test that have not been saved, a visual indicator appears next to the test name in the toolbar. This helps you keep track of your editing state. The indicator disappears after saving or running the test.

Live Execution Progress

Test execution uses Server-Sent Events (SSE) streaming to deliver real-time progress updates from the server to the dashboard. As each step executes, its status is pushed to the browser immediately.

Step-by-Step SSE Streaming

When a test run starts, the dashboard opens an SSE connection to the server. The server sends events as JSON messages in the format data: {JSON}\n\n for each step transition:

{
  "type": "step-start",
  "stepIndex": 2,
  "action": "click",
  "timestamp": "2025-01-15T10:30:00.123Z"
}

{
  "type": "step-end",
  "stepIndex": 2,
  "status": "passed",
  "duration": 245,
  "timestamp": "2025-01-15T10:30:00.368Z"
}

The dashboard reads the SSE stream with a ReadableStream reader and updates each step card's status indicator in real-time. This gives you immediate visual feedback about which step is running, which have passed, and where failures occur.

Step Execution States

During a run, steps transition through these states in order:

1. Pending — Initial state, not yet reached by the runner
2. Running — The runner is actively executing this step
3. Passed / Failed / Skipped — Final state after execution completes

If a step fails, the runner stops execution (unless the step is inside a conditional branch). The error message from Playwright is displayed below the failed step card.

Test Configuration

Each test has its own configuration that controls how it executes. These settings are accessible from the configuration section in the test builder toolbar.

Keyboard Shortcuts

The test builder supports several keyboard shortcuts for faster editing: