Skip to main content
Debugging test failures is effortless with TestDriver’s comprehensive observability features - video replays, detailed logs, network monitoring, and performance metrics.

​
Video Replays with Dashcam

Every test automatically records a video replay for easy debugging: 
import { test } from 'vitest';
import { chrome } from 'testdriverai/presets';

test('with automatic replay', async (context) => {
  const { testdriver, dashcam } = await chrome(context, {
    url: 'https://example.com'
  });

  await testdriver.find('button').click();
  await testdriver.find('input').type('test data');
  await testdriver.find('submit').click();

  // After test completes, view replay
  console.log('Watch replay:', dashcam.url);
  // Output: https://console.testdriver.ai/dashcam/abc123def456
});

Dashcam Features

Every replay includes:
  • Full video recording of test execution
  • Timeline with all actions marked
  • Screenshots at key moments
  • Console logs synchronized with video
  • Network requests with timing
  • Element highlights on interactions
  • Slow-motion playback
  • Frame-by-frame stepping
View all replays at app.testdriver.ai

​
Replay Features

  • Video Playback
  • Action Timeline
  • Element Highlights
  • Sharing
  • Full resolution - Recorded at native screen resolution
  • Variable speed - Play at 0.25x to 2x speed
  • Frame-by-frame - Step through individual frames
  • Jump to action - Click timeline to jump to any action
  • Download - Save replay as MP4

​
Application Logs

Access all console output from your application: 
test('with console logging', async (context) => {
  const { testdriver } = await chrome(context, {
    url: 'https://example.com',
    captureConsole: true // Enable console capture
  });

  // Your test code
  await testdriver.find('button').click();

  // Application console logs are captured automatically
  // View them in Dashcam replay
});
Browser Console:
  • console.log() - Debug messages
  • console.warn() - Warnings
  • console.error() - Errors
  • console.info() - Info messages
  • console.debug() - Debug messages
Application Logs:
  • JavaScript errors and exceptions
  • Unhandled promise rejections
  • Network errors (404, 500, etc.)
  • Security errors (CORS, CSP)
  • React/Vue warnings

​
Network Monitoring

Complete visibility into all network activity:

Network Request Details

For every request, view:
  • URL and method (GET, POST, etc.)
  • Request headers
  • Request payload/body
  • Response status code
  • Response headers
  • Response body
  • Timing breakdown (DNS, Connect, TLS, Wait, Download)
  • Size (request and response)
  • Initiated by (script/user action)
test('network monitoring', async (context) => {
  const { testdriver } = await chrome(context, {
    url: 'https://api.example.com',
    captureNetwork: true
  });

  await testdriver.find('Load data button').click();

  // Network requests are captured and shown in Dashcam
  // Filter by:
  // - XHR/Fetch
  // - Images
  // - Scripts
  // - Stylesheets
  // - Failed requests
});

​
Network Waterfall

View request timing in a waterfall chart: 
GET /api/users        ████████░░░░░░░░  245ms
GET /api/posts        ░░░░████████████  412ms
GET /avatar.jpg       ░░░░░░░░░░██░░░░  87ms
POST /api/comment     ░░░░░░░░░░░░████  156ms

​
Failed Requests

Easily identify failed network requests: 
❌ GET /api/data        404 Not Found       (234ms)
❌ POST /api/submit     500 Internal Error  (891ms)
❌ GET /image.jpg       Failed to fetch     (timeout)

​
Performance Metrics

Track application performance over time:
  • Page Load Metrics
  • Resource Timing
  • CPU Usage
  • Memory Usage
test('measure performance', async (context) => {
  const { testdriver } = await chrome(context, {
    url: 'https://example.com',
    capturePerformance: true
  });

  // Metrics automatically captured:
  // - First Contentful Paint (FCP)
  // - Largest Contentful Paint (LCP)
  // - Time to Interactive (TTI)
  // - Total Blocking Time (TBT)
  // - Cumulative Layout Shift (CLS)
});
View Core Web Vitals in Dashcam replay.

​
Debug Screenshots

Automatic screenshots on failures: 
try {
  await testdriver.find('missing element');
} catch (error) {
  // Automatic debug screenshot
  console.log('Screenshot:', error.debugScreenshot); // Base64 image
  console.log('Similarity:', error.similarity); // How close we got
  console.log('Confidence:', error.confidence); // AI confidence

  // Screenshot shows:
  // - Full page at time of failure
  // - Highlighted search area
  // - Similar elements (if any)
}

Debug Screenshot Features

  • Full page screenshot at failure point
  • Annotated with attempted action
  • Similar elements highlighted
  • Bounding boxes for close matches
  • Automatically attached to test report

​
Test Reports

Generate comprehensive test reports:
  • HTML Report
  • JSON Report
  • JUnit XML
  • Custom Report
npx vitest run --reporter=html
Generates interactive HTML report with:
  • Pass/fail status for all tests
  • Execution time per test
  • Dashcam replay links
  • Screenshots on failures
  • Error messages and stack traces

​
Analytics Dashboard

View test analytics at console.testdriver.ai:

Test Trends

  • Pass/fail rate over time
  • Average execution time
  • Flaky test identification
  • Most expensive tests
  • Cache hit rates

Performance Trends

  • Page load times
  • Core Web Vitals
  • Resource loading times
  • API response times
  • Performance regressions

Cost Analysis

  • Daily/weekly/monthly costs
  • Cost per test
  • Cost by team member
  • Sandbox usage
  • API call volume

Team Activity

  • Tests run by user
  • Most active tests
  • Peak usage times
  • Sandbox utilization
  • Failed test hotspots

​
Failure Analysis

Quickly identify and diagnose test failures: 
// Failed test provides rich context
test('failing test', async (context) => {
  const { testdriver, dashcam } = await chrome(context, {
    url: 'https://example.com'
  });

  try {
    await testdriver.find('missing button').click();
  } catch (error) {
    console.log('Failure details:', {
      message: error.message,
      dashcamUrl: dashcam.url,
      screenshot: error.debugScreenshot,
      similarity: error.similarity,
      timestamp: error.timestamp,
      sandboxId: context.sandboxId
    });
    throw error;
  }
});

​
Failure Report

❌ Test failed: user can login

Error: ElementNotFoundError: Could not find 'missing button'
  at TestDriver.find (testdriver.js:123)
  at login.test.js:15:24

Details:
- Similarity: 0.34 (no close match)
- Duration: 12.3s
- Dashcam: https://console.testdriver.ai/dashcam/abc123
- Screenshot: [attached]
- Sandbox: i-0abc123def456789

Recent actions:
1. navigate to https://example.com ✓
2. find('email input') ✓
3. type('[email protected]') ✓
4. find('missing button') ✗

Console errors:
- TypeError: Cannot read property 'x' of undefined (app.js:456)
- Warning: Missing key prop (React)

Network errors:
- 404: /api/user-settings (234ms)

​
CI/CD Integration

Integrate test results into your CI/CD pipeline:
  • GitHub Actions
  • Slack Notifications
  • Jira Integration
- name: Run tests
  run: npx vitest run
  env:
    TD_API_KEY: ${{ secrets.TD_API_KEY }}

- name: Upload results
  if: always()
  uses: actions/upload-artifact@v3
  with:
    name: test-results
    path: |
      test-results.xml
      .testdriver/dashcam-urls.txt

- name: Comment PR
  if: failure()
  uses: actions/github-script@v6
  with:
    script: |
      const fs = require('fs');
      const dashcamUrls = fs.readFileSync('.testdriver/dashcam-urls.txt', 'utf8');
      github.rest.issues.createComment({
        issue_number: context.issue.number,
        body: `Tests failed. View replays:\n${dashcamUrls}`
      });

​
Real-Time Monitoring

Monitor tests as they run: 
# Watch test execution in real-time
npx vitest --reporter=verbose

# Output:
✓ login.test.js > user can login (12.3s)
  → find('email input') (1.2s)
  → type('[email protected]') (0.8s)
  → find('password input') (0.9s)
  → type('***') (0.7s) [secret]
  → find('Login button') (1.1s)
  → click() (0.4s)
  → assert('Dashboard is visible') (7.2s)
  ✓ Test passed
  📹 Replay: https://console.testdriver.ai/dashcam/abc123

​
Learn More

Dashcam API

Complete Dashcam documentation

Debugging Guide

Debug failing tests effectively

View Replays

Access your test replays

Performance Guide

Optimize test performance