Interactive Test Viewer

Real-time visualization and debugging for test execution.

Overview

The Test Viewer provides a visual interface for watching tests execute, reviewing results, and debugging failures. Access it from the dashboard by clicking any test run.

Key capabilities:

• Watch tests execute in real-time
• Step through execution frame-by-frame
• View screenshots and artifacts at each step
• Debug failures with AI assistance

Timeline View

The timeline displays each step of test execution as a visual progression.

Step Visualization

[Navigate] ─── [Click] ─── [Type] ─── [Wait] ─── [Verify]
    │             │           │          │          │
   0.2s         0.8s        1.2s       2.5s       3.1s

Each step shows:

• Action type: Navigate, click, type, scroll, wait, verify
• Timestamp: When the action occurred
• Duration: How long the action took
• Status: Success, failure, or warning indicator

Branching Paths

When tests encounter conditional logic, the timeline branches:

[Check Auth Status]
       │
   ┌───┴───┐
   │       │
[Login] [Dashboard]

Hover over branch points to see the condition that determined the path taken.

Progress Indicator

A progress bar shows overall test completion. Color-coded segments indicate:

• Green: Completed successfully
• Yellow: In progress
• Red: Failed step
• Gray: Pending steps

Playback Controls

Control test execution review with video-style controls.

Control	Action	Shortcut
Play	Auto-advance through steps	Space
Pause	Stop auto-advance	Space
Step Forward	Next step	Right Arrow
Step Back	Previous step	Left Arrow
Jump to Step	Click timeline	Click
Speed	Adjust playback rate	1-4 keys

Step Details

Click any step to view detailed information.

Action Information

Step 3: Click Element

Action:    click
Selector:  button[data-testid="submit"]
Element:   <button class="btn-primary">Submit</button>
Timing:    Started 1.2s, Duration 45ms
Result:    Success

Element Targeting

See exactly which element was targeted:

• Selector used: CSS selector or XPath
• Element HTML: The actual DOM element
• Location: Coordinates on page
• Visibility: Whether element was visible

Screenshots and Artifacts

Screenshots are captured before/after each action, on failures, and at test completion.

Screenshot Comparison

Toggle between Before, After, and Diff views to see exactly what changed at each step.

Artifact Downloads

Download available artifacts: screenshots (PNG), video recording, execution logs, and HAR files (network archive). Use "Download All" for complete archive.

Chat Interface

Ask questions about the test execution using the integrated chat.

Example Queries

"Why did this test fail?"
"What element was clicked in step 3?"
"Show me all network requests"
"Compare this run to the last successful run"

Interactive Debugging

You: Why did the login fail?

AI: The login failed because the password field
    was not found. The selector "input[name='password']"
    returned no matches.

    Looking at the screenshot, the form uses
    "input[type='password']" instead.

    Suggested fix: Update the selector or use the
    data-testid attribute for more reliable targeting.

Debugging Failures

Failure Identification

When a test fails, the viewer highlights:

• Exact failure point: Red marker on timeline
• Error message: Clear description of what went wrong
• Stack trace: Technical details for debugging
• Screenshot: Visual state at failure time

Error Details Panel

Error: Element not found

Message:   Could not locate element matching
           selector "button.submit-btn"

Timeout:   30000ms
Attempts:  3

Stack:
  at waitForSelector (executor.js:142)
  at clickElement (actions.js:89)
  at runStep (runner.js:201)

Comparison with Successful Runs

Compare failed runs against successful ones to identify environmental differences, timing issues, or UI changes that broke selectors.

Aspect	Failed Run	Successful Run
Step 3	Element not found	Element clicked
Screenshot	Shows loading spinner	Shows loaded form
Duration	30.2s (timeout)	1.8s

Common Failure Patterns

Pattern	Likely Causes
Element Not Found	Selector changed, element not rendered, timing issue
Timeout	Slow network, page stuck loading, element never interactable
Assertion Failed	Value mismatch, unexpected content, state issue

Keyboard Shortcuts

Shortcut	Action
Space	Play/Pause
Left	Previous step
Right	Next step
Home	First step
End	Last step
F	Toggle fullscreen
S	Download screenshot
C	Open chat
Esc	Close panels

Tips

Use slow-motion playback for subtle UI issues. Compare screenshots to understand state changes. Download HAR files to debug network failures. Start with AI chat explanations before diving into raw logs.