Live Preview

Live preview lets you watch tests execute in real-time with a browser window showing exactly what the AI sees and does.

Starting a Live Preview

1. Open a test case in the editor
2. Click the Run button
3. A split view opens:
   • Left panel - Steps and status
   • Right panel - Live browser preview

The Preview Interface

Steps Panel (Left)

Shows all test steps with status indicators:

Click a step to see AI reasoning for that step.

Browser Preview (Right)

A live view of the browser session:

• See the page as AI sees it
• Watch clicks and typing in real-time
• Observe navigation and page loads
• View the same state AI uses for decisions

During Execution

Step Execution

For each step, the AI:

1. Takes a page snapshot
2. Identifies the target element
3. Performs the action (click, type, etc.)
4. Waits for any specified condition
5. Moves to next step

AI Reasoning

As steps execute, you can see AI reasoning:

Step: Click the "Sign In" button

Reasoning: Found a button element with text "Sign In"
in the header navigation. Clicking this button to
proceed with the login flow.

This helps debug when things go wrong.

Wait Conditions

When a step has a waitUntil condition:

1. AI takes screenshot after action
2. Evaluates condition against page state
3. Retries with exponential backoff if not met
4. Times out after 30 seconds if never met

After Completion

Successful Run

All steps show green checkmarks:

✓ Step 1: Navigate to login page
✓ Step 2: Enter email
✓ Step 3: Enter password
✓ Step 4: Click login button
✓ Step 5: Wait for dashboard

Failed Run

Failed step shows red X with error:

✓ Step 1: Navigate to login page
✓ Step 2: Enter email
✗ Step 3: Enter password
  Error: Could not find password field

Review AI reasoning to understand the failure.

Rerunning Tests

Click Run again to restart the test:

• Fresh browser session created
• Steps execute from the beginning
• New dynamic data generated

Debugging Tips

Step Fails to Find Element

• Check AI reasoning for what it tried
• Make step description more specific
• Verify element exists on page in preview
• Check if element loads after a delay

Wrong Element Clicked

• Add more context to description
• Specify location ("in the header", "below the form")
• Use unique text or labels

Wait Condition Times Out

• Condition might never be true
• Page might load differently than expected
• Extend the wait or adjust condition text

Test Works Manually But Fails in Bug0

• Element might need scroll to be visible
• Animation or transition timing
• Dynamic content loading
• Try adding wait conditions

Best Practices

During Development

• Run after each step change
• Watch AI reasoning for insights
• Check preview matches expectations
• Iterate until steps are reliable

Before Publishing

• Run complete test multiple times
• Verify consistency across runs
• Check assertions pass reliably
• Test with different data

Debugging Failures

1. Identify which step failed
2. Read the AI reasoning
3. Check browser preview state
4. Adjust step description or add waits
5. Rerun to verify fix

Technical Details

Browser Sessions

• Cloud-hosted Chromium browser
• Each run gets a fresh session
• Sessions are region-optimized for speed
• Cookies/storage applied from login suites

Execution Environment

• Browser controlled via Playwright
• AI interacts through accessibility tree
• Screenshots captured at key moments
• All actions logged for debugging