session-recorder

Session Recorder Skill

Record user testing sessions as Playwright Traces for replay and analysis. Traces capture the full testing session including screenshots, DOM snapshots, network requests, and console logs.

When to Use

• --record flag is present in the command
• User wants to replay or share a testing session
• Need to debug issues found during testing
• Creating documentation of UX issues

Trace File Format

Playwright Trace files (.zip) contain:

• Screenshots: Captured at each action
• DOM Snapshots: Full page state at each step
• Network Requests: All HTTP requests/responses
• Console Logs: JavaScript console output
• Action Timeline: Timestamped sequence of all interactions

Implementation

Starting a Recording

At the beginning of a test session when --record flag is present:

// Via browser_run_code
async (page) => {
  // Ensure recordings directory exists
  const fs = require('fs');
  const path = require('path');
  const recordingsDir = process.env.RECORD_PATH || 'recordings';
  if (!fs.existsSync(recordingsDir)) {
    fs.mkdirSync(recordingsDir, { recursive: true });
  }

  // Start tracing
  await page.context().tracing.start({
    screenshots: true,
    snapshots: true,
    sources: false  // Don't include source code
  });

  return 'Recording started';
}

Stopping a Recording

At the end of a test session:

// Via browser_run_code
async (page) => {
  const tracePath = process.env.TRACE_PATH;
  await page.context().tracing.stop({ path: tracePath });
  return `Trace saved to: ${tracePath}`;
}

Trace Filename Convention

Format: {command}-{persona}-{YYYY-MM-DD-HHmmss}.zip

Examples:

• user-test-genz-digital-native-2025-01-06-143022.zip
• stripe-test-impulse-buyer-2025-01-06-143156.zip
• user-test-boomer-tech-averse-2025-01-06-150830.zip

Generating Filename

const generateTracePath = (command, personaId, basePath = 'recordings') => {
  const now = new Date();
  const timestamp = now.toISOString()
    .replace(/[-:]/g, '')
    .replace('T', '-')
    .slice(0, 15);
  return `${basePath}/${command}-${personaId}-${timestamp}.zip`;
};