#!/usr/bin/env node /** * Test script for MCP client identification system * Tests the debug toolbar and custom code injection functionality */ const { createConnection } = require('./lib/index.js'); const { BrowserContextFactory } = require('./lib/browserContextFactory.js'); async function testCodeInjection() { console.log('๐Ÿงช Testing MCP Client Identification System...\n'); try { // Create MCP server connection console.log('๐Ÿ“ก Creating MCP connection...'); const connection = createConnection(); // Configure browser with a test project name console.log('๐ŸŒ Configuring browser...'); await connection.request({ method: 'tools/call', params: { name: 'browser_configure', arguments: { headless: false, // Show browser for visual verification viewport: { width: 1280, height: 720 } } } }); // Enable debug toolbar console.log('๐Ÿท๏ธ Enabling debug toolbar...'); const toolbarResult = await connection.request({ method: 'tools/call', params: { name: 'browser_enable_debug_toolbar', arguments: { projectName: 'Test Project A', position: 'top-right', theme: 'dark', minimized: false, showDetails: true, opacity: 0.9 } } }); console.log('โœ… Debug toolbar enabled:', toolbarResult.content[0].text); // Navigate to a test page console.log('๐Ÿš€ Navigating to test page...'); await connection.request({ method: 'tools/call', params: { name: 'browser_navigate', arguments: { url: 'https://example.com' } } }); // Add custom code injection console.log('๐Ÿ’‰ Adding custom JavaScript injection...'); const injectionResult = await connection.request({ method: 'tools/call', params: { name: 'browser_inject_custom_code', arguments: { name: 'test-alert', type: 'javascript', code: ` console.log('[Test Injection] Hello from Test Project A!'); // Create a subtle notification const notification = document.createElement('div'); notification.style.cssText = \` position: fixed; top: 50px; right: 20px; background: #28a745; color: white; padding: 10px 15px; border-radius: 5px; font-family: Arial; z-index: 1000; font-size: 14px; \`; notification.textContent = 'Custom injection from Test Project A'; document.body.appendChild(notification); setTimeout(() => notification.remove(), 3000); `, persistent: true, autoInject: true } } }); console.log('โœ… Custom code injected:', injectionResult.content[0].text); // List all injections console.log('๐Ÿ“‹ Listing all active injections...'); const listResult = await connection.request({ method: 'tools/call', params: { name: 'browser_list_injections', arguments: {} } }); console.log('๐Ÿ“Š Current injections:'); listResult.content.forEach(item => console.log(' ', item.text)); // Navigate to another page to test auto-injection console.log('\n๐Ÿ”„ Testing auto-injection on new page...'); await connection.request({ method: 'tools/call', params: { name: 'browser_navigate', arguments: { url: 'https://httpbin.org/html' } } }); console.log('\n๐ŸŽ‰ Test completed successfully!'); console.log('๐Ÿ‘€ Check the browser window to see:'); console.log(' - Debug toolbar in top-right corner showing "Test Project A"'); console.log(' - Green notification message from custom injection'); console.log(' - Both should appear on both pages (example.com and httpbin.org)'); console.log('\n๐Ÿ’ก The debug toolbar shows:'); console.log(' - Project name with green indicator'); console.log(' - Session ID (first 12 chars)'); console.log(' - Client info'); console.log(' - Session uptime'); console.log(' - Current hostname'); console.log('\nโณ Browser will stay open for 30 seconds for manual inspection...'); // Wait for manual inspection await new Promise(resolve => setTimeout(resolve, 30000)); // Clean up console.log('\n๐Ÿงน Cleaning up injections...'); await connection.request({ method: 'tools/call', params: { name: 'browser_clear_injections', arguments: { includeToolbar: true } } }); console.log('โœจ Test completed and cleaned up successfully!'); } catch (error) { console.error('โŒ Test failed:', error); process.exit(1); } } // Run the test testCodeInjection().catch(console.error);