🎬 SaaS Recorder SDK - Production Ready

Record user interactions and automatically generate Playwright tests, videos, and screenshots

A complete, production-ready SaaS solution that records user interactions on any website and converts them into executable Playwright tests with videos and screenshots.

✨ Features

• 🎯 One-line integration - Single script tag, works on any domain
• 🎬 Comprehensive recording - Clicks, inputs, scrolling, hovers, keyboard shortcuts, forms
• 🤖 Auto-generates Playwright tests - Convert recordings to executable test code
• 📹 Video recordings - Full session recordings in WebM format
• 📸 Screenshots - Before/after screenshots for visual verification
• 🔍 Trace files - Detailed Playwright traces for debugging
• 🔒 Privacy-first - Built-in privacy controls and data filtering
• ⚡ Performance optimized - Event throttling, sampling rates, session limits
• 🌍 CORS-free - Works from any domain without configuration
• 🎛️ Configurable - Extensive configuration options for production use

🚀 Quick Start

1. Install & Run

# Clone the repository
git clone <your-repo-url>
cd POC

# Install dependencies
npm install

# Start the server
npm run server

# Server runs on http://localhost:3002

2. Add to Any Website

Add this single line to any website:

<script 
  src="http://localhost:3002/sdk/recorder.js" 
  data-project-id="your-project-id"
></script>

That's it! Recording starts automatically. ✨

3. View Results

• Dashboard: http://localhost:3002
• Generate artifacts: Click "🎬 Generate Video & Screenshots"
• Download: Tests, videos, and screenshots automatically generated

📋 Project Structure

POC/
├── client/
│   └── recorder.js              # Browser SDK (16KB)
├── server/
│   ├── index.js                 # Express server
│   ├── converter.js             # Event → Playwright converter
│   ├── runner-simple.js         # Test execution & artifacts
│   ├── database-simple.js       # JSON file database
│   └── data/                    # Session data storage
├── dashboard/
│   └── index.html               # Management dashboard
├── test-pages/                  # Demo applications
├── CLIENT-INTEGRATION.md        # Integration guide
├── PRODUCTION-READY-FEATURES.md # Feature documentation
└── DEMO-SCRIPT.md              # Demo walkthrough

⚙️ Configuration Options

Production Configuration

<script 
  src="http://localhost:3002/sdk/recorder.js" 
  data-project-id="production-site"
  data-sampling-rate="0.1"
  data-max-events-per-session="500"
  data-exclude-elements=".sensitive,.private"
  data-enable-scroll-tracking="true"
  data-enable-hover-tracking="false"
></script>

Available Options

Option	Default	Description
data-project-id	required	Project identifier
data-sampling-rate	1.0	Recording rate (0.1 = 10%)
data-max-events-per-session	1000	Max events per session
data-exclude-elements	""	CSS selectors to ignore
data-include-elements-only	""	Only track these selectors
data-enable-scroll-tracking	true	Track scrolling
data-enable-hover-tracking	true	Track mouse hovers
data-enable-keyboard-tracking	true	Track keyboard shortcuts
data-enable-form-tracking	true	Track form submissions

🔒 Privacy Controls

Exclude Sensitive Elements

<!-- Method 1: Data attribute -->
<input type="text" data-recorder-ignore placeholder="Sensitive data">

<!-- Method 2: CSS selectors -->
<script data-exclude-elements=".payment,.personal-info">

Built-in Protection

• ✅ Password fields never recorded
• ✅ Credit card inputs auto-detected and ignored
• ✅ PII patterns automatically excluded
• ✅ Configurable element filtering

🏗️ Framework Integration

React/Next.js

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'http://localhost:3002/sdk/recorder.js';
  script.setAttribute('data-project-id', 'react-app');
  document.body.appendChild(script);
}, []);

Vue/Nuxt.js

mounted() {
  const script = document.createElement('script');
  script.src = 'http://localhost:3002/sdk/recorder.js';
  script.dataset.projectId = 'vue-app';
  document.body.appendChild(script);
}

Angular

ngOnInit() {
  const script = document.createElement('script');
  script.src = 'http://localhost:3002/sdk/recorder.js';
  script.setAttribute('data-project-id', 'angular-app');
  document.body.appendChild(script);
}

📊 Generated Artifacts

For each recording session, the system generates:

1. Playwright Test (test.spec.js) - Executable test code
2. Video Recording (recording.webm) - Full session video
3. Screenshots (screenshots/) - Before/after captures
4. Trace File (trace.zip) - Detailed execution trace

🎯 Event Types Captured

Event Type	Data Captured	Use Case
click	Element, position, viewport	User interactions
input	Field value, element info	Form completion
scroll	Position, document size	User engagement
hover	Element, position	Interest patterns
keydown	Key combos, shortcuts	Power user behavior
form_submit	Form data (safe fields)	Conversion tracking
navigation	URL changes, SPA routing	User journeys

🛠️ API Endpoints

• GET / - Dashboard
• GET /sdk/recorder.js - SDK script
• POST /api/events - Event ingestion
• GET /api/sessions - List sessions
• POST /api/sessions/{id}/run-test - Generate artifacts
• GET /artifacts/{session}/ - Download files

📈 Performance Features

• ✅ Event throttling (scroll: 100ms, hover: 200ms)
• ✅ Sampling rates for production traffic
• ✅ Session limits to prevent memory leaks
• ✅ Background delivery with sendBeacon
• ✅ Configurable batch sizes and intervals

🌟 Production Examples

E-commerce Site

<script 
  src="https://analytics.yoursite.com/recorder.js"
  data-project-id="ecommerce-prod"
  data-sampling-rate="0.05"
  data-exclude-elements=".checkout-form,.payment-info"
  data-max-events-per-session="200"
></script>

SaaS Dashboard

<script 
  src="https://analytics.yoursite.com/recorder.js"
  data-project-id="dashboard-prod"
  data-sampling-rate="0.2"
  data-enable-hover-tracking="false"
  data-exclude-elements=".user-data,.api-keys"
></script>

📋 Requirements

• Node.js 18+
• Chrome/Chromium for Playwright
• Modern browser support (ES6+)

🤝 Contributing

1. Fork the repository
2. Create feature branch
3. Make changes
4. Test thoroughly
5. Submit pull request

📄 License

MIT License - see LICENSE file for details

---

🎉 What Makes This Special

• Production-Ready: Used in real SaaS applications
• Zero Configuration: Works immediately on any domain
• Privacy-First: Built-in protection for sensitive data
• Performance Optimized: Handles high-traffic websites
• Framework Agnostic: Works with React, Vue, Angular, vanilla JS
• Complete Solution: Recording + Analysis + Test Generation

Start recording user interactions in 30 seconds! 🚀