playwright-mcp/test-viewport-matching.js

#!/usr/bin/env node

/**
 * Video Recording Viewport Matching Test
 * 
 * Demonstrates the solution to the gray border issue by ensuring
 * browser viewport matches video recording dimensions.
 */

console.log('🎬 Video Recording Viewport Matching Test');
console.log('==========================================\n');

console.log('🎯 THE PROBLEM:');
console.log('===============');
console.log('When video recording size ≠ browser viewport size:');
console.log('📹 Video Canvas:     1280x720 (recording area)');
console.log('🌐 Browser Viewport:  800x600 (content area)');
console.log('🎥 Result:           Small browser window in large video = GRAY BORDERS ❌');
console.log('');

console.log('✅ THE SOLUTION:');
console.log('================');
console.log('Match browser viewport to video recording size:');
console.log('📹 Video Canvas:     1280x720 (recording area)');
console.log('🌐 Browser Viewport:  1280x720 (content area) ✅');
console.log('🎥 Result:           Browser content fills entire video = NO GRAY BORDERS ✅');
console.log('');

console.log('🛠️ IMPLEMENTATION:');
console.log('==================');
console.log('');

console.log('### Method 1: Automatic Viewport Matching (RECOMMENDED)');
console.log('```javascript');
console.log('// This automatically sets viewport to match video size');
console.log('browser_start_recording({');
console.log('  size: { width: 1280, height: 720 },');
console.log('  autoSetViewport: true  // Default: true');
console.log('})');
console.log('```');
console.log('✅ Pros: Automatic, no extra steps, prevents gray borders');
console.log('⚠️  Cons: Changes browser viewport (usually desired)');
console.log('');

console.log('### Method 2: Manual Viewport Control');
console.log('```javascript');
console.log('// Set viewport manually before recording');
console.log('browser_configure({');
console.log('  viewport: { width: 1280, height: 720 }');
console.log('})');
console.log('browser_start_recording({');
console.log('  size: { width: 1280, height: 720 },');
console.log('  autoSetViewport: false');
console.log('})');
console.log('```');
console.log('✅ Pros: Full control over timing');
console.log('⚠️  Cons: Extra step, must remember to match sizes');
console.log('');

console.log('### Method 3: Disable Auto-Matching (NOT RECOMMENDED)');
console.log('```javascript');
console.log('// This will likely produce gray borders');
console.log('browser_start_recording({');
console.log('  size: { width: 1280, height: 720 },');
console.log('  autoSetViewport: false');
console.log('})');
console.log('// Browser keeps current viewport (e.g., 800x600)');
console.log('// Result: 800x600 browser in 1280x720 video = gray borders');
console.log('```');
console.log('❌ Produces gray borders around content');
console.log('');

console.log('📐 RECOMMENDED VIDEO SIZES:');
console.log('============================');
console.log('For Marketing/Demo Videos:');
console.log('• 1280x720   (HD 720p) - Most common, great balance of quality/size');
console.log('• 1920x1080  (Full HD) - Higher quality, larger files');
console.log('• 1024x768   (4:3) - Good for web applications, older projectors');
console.log('');
console.log('For Mobile Testing:');
console.log('• 375x667    (iPhone portrait)');
console.log('• 768x1024   (iPad portrait)');
console.log('• 1024x768   (iPad landscape)');
console.log('');
console.log('For Desktop Applications:');
console.log('• 1440x900   (Ultrawide)');
console.log('• 1600x1200  (Large desktop)');
console.log('');

console.log('🎬 PERFECT INTERNACHI DEMO SETUP:');
console.log('==================================');
console.log('```javascript');
console.log('// 1. Set smart mode for clean videos');
console.log('browser_set_recording_mode({ mode: "smart" })');
console.log('');
console.log('// 2. Start recording with auto-viewport matching');
console.log('browser_start_recording({');
console.log('  size: { width: 1280, height: 720 },  // HD quality');
console.log('  filename: "internachi-expert-agent-demo",');
console.log('  autoSetViewport: true  // Prevents gray borders');
console.log('})');
console.log('');
console.log('// 3. Browser viewport is now 1280x720 (matches video)');
console.log('// 4. Perform demo actions - content fills entire video');
console.log('browser_navigate({ url: "https://l.inspect.pics" })');
console.log('browser_click({ element: "login", ref: "..." })');
console.log('browser_type({ text: "demo@internachi.org", ... })');
console.log('');
console.log('// 5. Get clean video with no gray borders');
console.log('const videos = browser_stop_recording()');
console.log('```');
console.log('');

console.log('🔧 DIAGNOSTIC TOOLS:');
console.log('====================');
console.log('Use these to verify your setup:');
console.log('');
console.log('• browser_recording_status()      # Check video size and viewport');
console.log('• browser_reveal_artifact_paths()  # Find where videos are saved');
console.log('• browser_take_screenshot()       # Compare to video dimensions');
console.log('• browser_configure()             # Manually set viewport if needed');
console.log('');

console.log('✅ KEY TAKEAWAYS:');
console.log('=================');
console.log('1. 🎯 ALWAYS match browser viewport to video recording size');
console.log('2. 🤖 Use autoSetViewport: true (default) for automatic matching');
console.log('3. 📐 Choose appropriate video size for your content (1280x720 recommended)');
console.log('4. 🧠 Use smart recording mode for professional demo videos');
console.log('5. 🔍 Use diagnostic tools to verify your setup');
console.log('');
console.log('Following these practices will eliminate gray borders and create');
console.log('professional-quality demo videos where content fills the entire frame! 🎥✨');