firefox-devtools-mcp 0.2.0

package/scripts/setup-mcp-config.js

@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import os from 'os';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+// Colors for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+};
+
+function question(query) {
+  return new Promise((resolve) => rl.question(query, resolve));
+}
+
+function detectNodePath() {
+  try {
+    // First try to get current Node.js path
+    const nodeVersion = process.version;
+    console.log(`${colors.green}✓ Detected Node.js version: ${nodeVersion}${colors.reset}`);
+
+    // Check if using nvm
+    const nvmDir = process.env.NVM_DIR;
+    if (nvmDir) {
+      // Try to get the current version from nvm
+      try {
+        const currentVersion = execSync('nvm current', { encoding: 'utf8' }).trim();
+        const nodePath = path.join(nvmDir, 'versions', 'node', currentVersion, 'bin', 'node');
+        if (fs.existsSync(nodePath)) {
+          console.log(`${colors.green}✓ Using nvm Node.js at: ${nodePath}${colors.reset}`);
+          return nodePath;
+        }
+      } catch (e) {
+        // nvm not available, continue
+      }
+    }
+
+    // Use the current Node.js executable path
+    console.log(`${colors.green}✓ Using Node.js at: ${process.execPath}${colors.reset}`);
+    return process.execPath;
+  } catch (error) {
+    console.log(`${colors.yellow}⚠️  Could not detect Node.js path, using default${colors.reset}`);
+    return 'node';
+  }
+}
+
+async function main() {
+  console.log(
+    `${colors.bright}${colors.blue}🚀 Firefox DevTools MCP Configuration Setup${colors.reset}\n`
+  );
+
+  // Ask which client to configure
+  console.log(`${colors.bright}Select MCP client to configure:${colors.reset}`);
+  console.log('1. Claude Desktop (desktop app)');
+  console.log('2. Claude Code (CLI tool)');
+  console.log('3. Both');
+  console.log('4. Display config only (manual setup)');
+
+  const clientChoice = (await question('\nSelect option (1-4) [2]: ')) || '2';
+
+  // Get project path
+  const projectPath = path.resolve(__dirname, '..');
+  const distIndexPath = path.join(projectPath, 'dist', 'index.js');
+
+  // Check if we need to build first
+  const srcIndexPath = path.join(projectPath, 'src', 'index.ts');
+  if (!fs.existsSync(distIndexPath) && fs.existsSync(srcIndexPath)) {
+    console.log(`${colors.yellow}⚠️  Dist file not found. Building project...${colors.reset}`);
+    try {
+      execSync('npm run build', { cwd: projectPath, stdio: 'inherit' });
+      console.log(`${colors.green}✓ Build completed${colors.reset}\n`);
+    } catch (error) {
+      console.log(
+        `${colors.red}❌ Build failed. Please run 'npm run build' manually${colors.reset}`
+      );
+      process.exit(1);
+    }
+  }
+
+  if (!fs.existsSync(distIndexPath)) {
+    console.log(`${colors.red}❌ Dist file not found at: ${distIndexPath}${colors.reset}`);
+    console.log(`${colors.yellow}Please run 'npm run build' first${colors.reset}`);
+    process.exit(1);
+  }
+
+  console.log(`${colors.green}✓ Found server dist at: ${distIndexPath}${colors.reset}\n`);
+
+  // Get Firefox configuration
+  console.log(`${colors.bright}Firefox Configuration:${colors.reset}`);
+  console.log(`${colors.yellow}(Press Enter to use default values)${colors.reset}\n`);
+
+  const headless = (await question('Run in headless mode? (y/n) [n]: ')) || 'n';
+  const viewport = (await question('Viewport size (e.g., 1280x720) [1280x720]: ')) || '1280x720';
+
+  // Detect Node.js path
+  const nodePath = detectNodePath();
+
+  // Ask user about Node.js configuration
+  console.log(`\n${colors.bright}Node.js Configuration:${colors.reset}`);
+  console.log(`1. Use detected Node.js: ${nodePath}`);
+  console.log(`2. Specify custom Node.js path`);
+  console.log(`3. Use system default (node)`);
+
+  const nodeChoice = await question('\nSelect option (1-3) [1]: ') || '1';
+  let finalNodePath = nodePath;
+
+  switch (nodeChoice) {
+    case '2':
+      finalNodePath = await question('Enter full path to Node.js executable: ');
+      if (!fs.existsSync(finalNodePath)) {
+        console.log(`${colors.yellow}⚠️  Path not found, using detected path${colors.reset}`);
+        finalNodePath = nodePath;
+      }
+      break;
+    case '3':
+      finalNodePath = 'node';
+      break;
+  }
+
+  // Create MCP config
+  const mcpConfig = {
+    mcpServers: {
+      'firefox-devtools': {
+        command: finalNodePath,
+        args: [distIndexPath, '--headless=' + (headless.toLowerCase() === 'y' ? 'true' : 'false'), '--viewport=' + viewport],
+      },
+    },
+  };
+
+  // Determine config paths based on client choice
+  const platform = os.platform();
+  let desktopConfigPath, desktopConfigDir;
+  let claudeCodeConfigPath, claudeCodeConfigDir;
+
+  // Claude Desktop paths
+  if (platform === 'darwin') {
+    desktopConfigDir = path.join(os.homedir(), 'Library', 'Application Support', 'Claude');
+    desktopConfigPath = path.join(desktopConfigDir, 'claude_desktop_config.json');
+  } else if (platform === 'win32') {
+    desktopConfigDir = path.join(os.homedir(), 'AppData', 'Roaming', 'Claude');
+    desktopConfigPath = path.join(desktopConfigDir, 'claude_desktop_config.json');
+  } else {
+    desktopConfigDir = path.join(os.homedir(), '.config', 'claude');
+    desktopConfigPath = path.join(desktopConfigDir, 'claude_desktop_config.json');
+  }
+
+  // Claude Code paths
+  if (platform === 'darwin') {
+    claudeCodeConfigDir = path.join(os.homedir(), 'Library', 'Application Support', 'Claude', 'Code');
+    claudeCodeConfigPath = path.join(claudeCodeConfigDir, 'mcp_settings.json');
+  } else if (platform === 'win32') {
+    claudeCodeConfigDir = path.join(os.homedir(), 'AppData', 'Roaming', 'Claude', 'Code');
+    claudeCodeConfigPath = path.join(claudeCodeConfigDir, 'mcp_settings.json');
+  } else {
+    claudeCodeConfigDir = path.join(os.homedir(), '.config', 'claude', 'code');
+    claudeCodeConfigPath = path.join(claudeCodeConfigDir, 'mcp_settings.json');
+  }
+
+  // Handle display-only option
+  if (clientChoice === '4') {
+    console.log(
+      `\n${colors.bright}Copy this configuration to your MCP config:${colors.reset}\n`
+    );
+    console.log(JSON.stringify(mcpConfig, null, 2));
+
+    console.log(`\n${colors.bright}${colors.blue}Config file locations:${colors.reset}`);
+    console.log(`Claude Desktop: ${desktopConfigPath}`);
+    console.log(`Claude Code: ${claudeCodeConfigPath}`);
+    rl.close();
+    return;
+  }
+
+  // Helper function to save config
+  async function saveConfig(configPath, configDir, clientName) {
+    let existingConfig = {};
+    if (fs.existsSync(configPath)) {
+      try {
+        existingConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+        if (existingConfig.mcpServers && existingConfig.mcpServers['firefox-devtools']) {
+          const overwrite = await question(
+            `\n${colors.yellow}⚠️  'firefox-devtools' server already exists in ${clientName}. Overwrite? (y/n): ${colors.reset}`
+          );
+          if (overwrite.toLowerCase() !== 'y') {
+            console.log(`Skipped ${clientName}`);
+            return false;
+          }
+        }
+      } catch (error) {
+        console.log(
+          `${colors.yellow}⚠️  Could not read existing ${clientName} config, will create new one${colors.reset}`
+        );
+      }
+    }
+
+    // Merge configs
+    const finalConfig = {
+      ...existingConfig,
+      mcpServers: {
+        ...existingConfig.mcpServers,
+        ...mcpConfig.mcpServers,
+      },
+    };
+
+    if (!fs.existsSync(configDir)) {
+      fs.mkdirSync(configDir, { recursive: true });
+    }
+
+    fs.writeFileSync(configPath, JSON.stringify(finalConfig, null, 2));
+    console.log(`\n${colors.green}✅ Configuration saved to ${clientName}: ${configPath}${colors.reset}`);
+    return true;
+  }
+
+  // Save to appropriate client(s)
+  if (clientChoice === '1') {
+    await saveConfig(desktopConfigPath, desktopConfigDir, 'Claude Desktop');
+    console.log(`${colors.yellow}⚠️  Restart Claude Desktop to apply changes${colors.reset}`);
+  } else if (clientChoice === '2') {
+    await saveConfig(claudeCodeConfigPath, claudeCodeConfigDir, 'Claude Code');
+    console.log(`${colors.yellow}⚠️  Restart Claude Code to apply changes${colors.reset}`);
+  } else if (clientChoice === '3') {
+    await saveConfig(desktopConfigPath, desktopConfigDir, 'Claude Desktop');
+    await saveConfig(claudeCodeConfigPath, claudeCodeConfigDir, 'Claude Code');
+    console.log(`${colors.yellow}⚠️  Restart Claude Desktop and Claude Code to apply changes${colors.reset}`);
+  }
+
+  // Show next steps
+  console.log(`\n${colors.bright}${colors.blue}Next Steps:${colors.reset}`);
+  if (clientChoice === '1' || clientChoice === '3') {
+    console.log(`1. Restart Claude Desktop`);
+  }
+  if (clientChoice === '2' || clientChoice === '3') {
+    console.log(`${clientChoice === '3' ? '2' : '1'}. Restart Claude Code (or reload window)`);
+  }
+  console.log(
+    `${clientChoice === '3' ? '3' : '2'}. Test with: "${colors.green}List all open pages in Firefox${colors.reset}" or "${colors.green}Take a screenshot${colors.reset}"`
+  );
+
+  rl.close();
+}
+
+main().catch((error) => {
+  console.error(`${colors.red}Error: ${error.message}${colors.reset}`);
+  process.exit(1);
+});

package/scripts/test-bidi-devtools.js

@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+
+/**
+ * Test script for new BiDi-based FirefoxDevTools
+ * Tests all main functionality with clean BiDi implementation
+ *
+ * Runs offline by default. Set TEST_ONLINE=1 to enable online tests.
+ */
+
+import { FirefoxDevTools } from '../dist/index.js';
+import {
+  loadHTML,
+  waitShort,
+  shouldRunOnlineTests,
+  skipOnlineTest,
+} from './_helpers/page-loader.js';
+
+async function main() {
+  console.log('🧪 Testing BiDi-based FirefoxDevTools...\n');
+
+  const options = {
+    firefoxPath: undefined, // Auto-detect
+    headless: false,
+    profilePath: undefined,
+    viewport: { width: 1280, height: 720 },
+    args: [],
+    startUrl: 'about:blank', // Offline-first
+  };
+
+  const firefox = new FirefoxDevTools(options);
+
+  try {
+    // 1. Connect
+    console.log('📡 Connecting to Firefox via BiDi...');
+    await firefox.connect();
+    console.log('✅ Connected!\n');
+
+    // 2. List tabs
+    console.log('📄 Listing tabs...');
+    await firefox.refreshTabs();
+    const tabs = firefox.getTabs();
+    console.log(`✅ Found ${tabs.length} tab(s):`);
+    tabs.forEach((tab, idx) => {
+      console.log(`   [${idx}] ${tab.title} - ${tab.url}`);
+    });
+    console.log();
+
+    // 3. Test evaluate with offline page
+    console.log('📖 Testing evaluate (offline)...');
+    const test1 = await firefox.evaluate('return 1 + 1');
+    console.log(`   1 + 1 = ${test1}`);
+    const test2 = await firefox.evaluate('return document.title');
+    console.log(`   document.title = ${test2}`);
+    console.log('✅ Evaluate works\n');
+
+    // 4. Test console messages (offline)
+    console.log('⚡ Testing console messages (offline)...');
+    await firefox.evaluate(`
+      console.log('🎯 BiDi test log message!');
+      console.warn('⚠️ BiDi test warning!');
+      console.error('❌ BiDi test error!');
+      console.info('ℹ️ BiDi test info!');
+    `);
+    await waitShort(1000);
+
+    const messages = await firefox.getConsoleMessages();
+    console.log(`✅ Captured ${messages.length} console message(s):`);
+    messages.forEach((msg) => {
+      const levelEmoji = { debug: '🐛', info: 'ℹ️', warn: '⚠️', error: '❌' }[msg.level] || '📘';
+      console.log(`   ${levelEmoji} [${msg.level}] ${msg.text}`);
+    });
+    console.log();
+
+    // 5. Drag & drop test (offline)
+    console.log('🧲 Testing drag & drop (offline)...');
+    try {
+      await loadHTML(
+        firefox,
+        `<head><title>DnD Test</title><style>
+#drag{width:80px;height:80px;background:#08f;color:#fff;display:flex;align-items:center;justify-content:center}
+#drop{width:160px;height:100px;border:3px dashed #888;margin-left:16px;display:inline-flex;align-items:center;justify-content:center}
+#ok{color:green;font-weight:bold}
+</style></head><body>
+<div id=drag draggable=true>Drag</div><div id=drop>Drop here</div>
+<script>
+const drop = document.getElementById('drop');
+drop.addEventListener('drop', (e)=>{e.preventDefault();drop.innerHTML='<span id=ok>OK</span>';});
+drop.addEventListener('dragover', (e)=>e.preventDefault());
+</script>
+</body>`
+      );
+      await firefox.dragAndDropBySelectors('#drag', '#drop');
+      const ok = await firefox.evaluate("return !!document.querySelector('#ok')");
+      console.log(ok ? '✅ Drag & drop worked\n' : '❌ Drag & drop failed\n');
+    } catch (e) {
+      console.log('⚠️ Skipping drag & drop test:', e.message);
+    }
+
+    // 6. File upload test (offline)
+    console.log('📁 Testing file upload (offline)...');
+    try {
+      const fs = await import('node:fs/promises');
+      const os = await import('node:os');
+      const path = await import('node:path');
+      const tmp = await fs.mkdtemp(path.join(os.tmpdir(), 'bidi-test-'));
+      const filePath = path.join(tmp, 'hello.txt');
+      await fs.writeFile(filePath, 'hello bidi');
+
+      await loadHTML(
+        firefox,
+        `<head><title>Upload Test</title><style>#file{display:none}</style></head><body>
+<label for=file>Pick file</label>
+<input id=file type=file>
+<script>document.getElementById('file').addEventListener('change',()=>{document.body.setAttribute('data-ok','1')});</script>
+</body>`
+      );
+      await firefox.uploadFileBySelector('#file', filePath);
+      const ok = await firefox.evaluate("return document.body.getAttribute('data-ok') === '1'");
+      console.log(ok ? '✅ File upload worked\n' : '❌ File upload failed\n');
+    } catch (e) {
+      console.log('⚠️ Skipping file upload test:', e.message);
+    }
+
+    // 7. Viewport resize test
+    console.log('📐 Resizing viewport to 1024x600...');
+    try {
+      await firefox.setViewportSize(1024, 600);
+      console.log('✅ Viewport resized\n');
+    } catch (e) {
+      console.log('⚠️ Skipping viewport resize test:', e.message);
+    }
+
+    // 8. Snapshot tests (offline with data: URL)
+    console.log('📸 Testing snapshot functionality (offline)...');
+    try {
+      await loadHTML(
+        firefox,
+        `<head><title>Test Page</title></head><body>
+<h1>Example Domain</h1>
+<p>This domain is for use in documentation examples.</p>
+<p><a href="https://iana.org/domains/example">Learn more</a></p>
+</body>`
+      );
+
+      console.log('   Taking first snapshot...');
+      const snapshot1 = await firefox.takeSnapshot();
+      console.log(`✅ Snapshot taken! (ID: ${snapshot1.json.snapshotId})`);
+      console.log(`   First few lines of text output:`);
+      const lines = snapshot1.text.split('\n').slice(0, 6);
+      lines.forEach((line) => console.log(`   ${line}`));
+
+      // Test UID resolution
+      console.log('\n   Testing UID resolution...');
+      const firstUid = snapshot1.json.root.uid;
+      const selector = firefox.resolveUidToSelector(firstUid);
+      console.log(`   ✅ UID ${firstUid} resolves to selector: ${selector}`);
+
+      const element = await firefox.resolveUidToElement(firstUid);
+      console.log(`   ✅ UID ${firstUid} resolves to WebElement: ${!!element}`);
+
+      // Test staleness detection (navigation)
+      console.log('\n   Testing staleness detection...');
+      await firefox.navigate('about:blank');
+      await waitShort();
+
+      try {
+        firefox.resolveUidToSelector(firstUid);
+        console.log('   ❌ Staleness detection failed - should have thrown error');
+      } catch (e) {
+        console.log(`   ✅ Staleness detected correctly: ${e.message}`);
+      }
+
+      // Test iframe support
+      console.log('\n   Testing iframe support...');
+      await loadHTML(
+        firefox,
+        `<head><title>Iframe Test</title></head><body>
+<h1>Main Page</h1>
+<p>This is the main page</p>
+<iframe srcdoc="<h2>Iframe Content</h2><p>This is inside the iframe</p>"></iframe>
+</body>`
+      );
+      const snapshot2 = await firefox.takeSnapshot();
+      const hasIframe = JSON.stringify(snapshot2.json).includes('isIframe');
+      console.log(`   ${hasIframe ? '✅' : '❌'} Iframe detected in snapshot: ${hasIframe}`);
+
+      console.log('\n✅ Snapshot tests completed!\n');
+    } catch (e) {
+      console.log('⚠️ Snapshot test failed:', e.message);
+      if (e.stack) console.log(e.stack);
+    }
+
+    // 9. Screenshot tests (offline)
+    console.log('📷 Testing screenshot functionality (offline)...');
+    try {
+      await loadHTML(
+        firefox,
+        `<head><title>Screenshot Test</title></head><body>
+<h1>Test Heading</h1>
+<p>This is a test paragraph.</p>
+</body>`
+      );
+
+      const pageScreenshot = await firefox.takeScreenshotPage();
+      console.log(`   ✅ Page screenshot captured (${pageScreenshot.length} chars base64)`);
+
+      const isValidBase64 = /^[A-Za-z0-9+/=]+$/.test(pageScreenshot);
+      const isPNG = pageScreenshot.startsWith('iVBOR');
+      console.log(`   ${isValidBase64 ? '✅' : '❌'} Valid base64: ${isValidBase64}`);
+      console.log(`   ${isPNG ? '✅' : '❌'} PNG format: ${isPNG}`);
+
+      // Element screenshot by UID
+      const snapshot = await firefox.takeSnapshot();
+      const targetNode = snapshot.json.root.children?.find((n) => n.tag === 'h1');
+
+      if (targetNode && targetNode.uid) {
+        const elementScreenshot = await firefox.takeScreenshotByUid(targetNode.uid);
+        console.log(`   ✅ Element screenshot captured (${elementScreenshot.length} chars base64)`);
+      } else {
+        console.log('   ⚠️ No suitable element found for screenshot test');
+      }
+
+      console.log('\n✅ Screenshot tests completed!\n');
+    } catch (e) {
+      console.log('⚠️ Screenshot test failed:', e.message);
+    }
+
+    // 10. Dialog handling tests (offline)
+    console.log('💬 Testing dialog handling (offline)...');
+    try {
+      await firefox.navigate('about:blank');
+
+      // Alert dialog
+      console.log('   Testing alert dialog...');
+      await firefox.evaluate('setTimeout(() => alert("Test alert!"), 100)');
+      await waitShort(200);
+      await firefox.acceptDialog();
+      console.log('   ✅ Alert dialog accepted');
+
+      // Confirm dialog - accept
+      console.log('\n   Testing confirm dialog (accept)...');
+      await firefox.evaluate('setTimeout(() => { window.confirmResult = confirm("Test confirm?"); }, 100)');
+      await waitShort(200);
+      await firefox.acceptDialog();
+      const confirmAccepted = await firefox.evaluate('return window.confirmResult');
+      console.log(`   ${confirmAccepted ? '✅' : '❌'} Confirm accepted: ${confirmAccepted}`);
+
+      // Confirm dialog - dismiss
+      console.log('\n   Testing confirm dialog (dismiss)...');
+      await firefox.evaluate(
+        'setTimeout(() => { window.confirmResult2 = confirm("Test confirm 2?"); }, 100)'
+      );
+      await waitShort(200);
+      await firefox.dismissDialog();
+      const confirmDismissed = await firefox.evaluate('return window.confirmResult2');
+      console.log(`   ${!confirmDismissed ? '✅' : '❌'} Confirm dismissed: ${!confirmDismissed}`);
+
+      // Prompt dialog
+      console.log('\n   Testing prompt dialog...');
+      await firefox.evaluate('setTimeout(() => { window.promptResult = prompt("Enter your name:"); }, 100)');
+      await waitShort(200);
+      await firefox.acceptDialog('John Doe');
+      const promptResult = await firefox.evaluate('return window.promptResult');
+      console.log(`   ${promptResult === 'John Doe' ? '✅' : '❌'} Prompt result: ${promptResult}`);
+
+      // Error handling
+      console.log('\n   Testing error handling (no dialog)...');
+      try {
+        await firefox.acceptDialog();
+        console.log('   ❌ Should have thrown error for missing dialog');
+      } catch (e) {
+        console.log(`   ✅ Error caught correctly: ${e.message}`);
+      }
+
+      console.log('\n✅ Dialog handling tests completed!\n');
+    } catch (e) {
+      console.log('⚠️ Dialog test failed:', e.message);
+    }
+
+    // ============================================================================
+    // ONLINE TESTS (optional - set TEST_ONLINE=1)
+    // ============================================================================
+
+    if (shouldRunOnlineTests()) {
+      console.log('\n🌐 Running online tests...\n');
+
+      // Navigate to example.com
+      console.log('🧭 Navigating to example.com...');
+      await firefox.navigate('https://example.com');
+      console.log('✅ Navigation completed');
+      await waitShort(2000);
+
+      const newTitle = await firefox.evaluate('return document.title');
+      console.log(`✅ Page title: ${newTitle}\n`);
+
+      // Tab management
+      console.log('📑 Creating new tab...');
+      const newTabIdx = await firefox.createNewPage('https://www.mozilla.org');
+      console.log(`✅ Created new tab [${newTabIdx}]\n`);
+      await waitShort(3000);
+
+      await firefox.refreshTabs();
+      const allTabs = firefox.getTabs();
+      console.log('📄 All tabs:');
+      allTabs.forEach((tab, idx) => {
+        const marker = idx === firefox.getSelectedTabIdx() ? '👉' : '  ';
+        console.log(`${marker} [${idx}] ${tab.title.substring(0, 50)} - ${tab.url}`);
+      });
+      console.log();
+
+      // Network monitoring
+      console.log('🌐 Testing network monitoring...');
+      try {
+        await firefox.startNetworkMonitoring();
+        console.log('   Network monitoring started');
+
+        await waitShort(100);
+        await firefox.navigate('https://example.com');
+        await waitShort(3000);
+
+        const requests = await firefox.getNetworkRequests();
+        console.log(`✅ Captured ${requests.length} network request(s):`);
+
+        requests.slice(0, 5).forEach((req, idx) => {
+          const statusEmoji = req.status >= 400 ? '❌' : req.status >= 300 ? '⚠️' : '✅';
+          console.log(
+            `   ${idx + 1}. ${statusEmoji} [${req.method}] ${req.status || '?'} ${req.url.substring(0, 80)}`
+          );
+        });
+
+        if (requests.length > 5) {
+          console.log(`   ... and ${requests.length - 5} more requests`);
+        }
+
+        await firefox.stopNetworkMonitoring();
+        firefox.clearNetworkRequests();
+        console.log('✅ Network monitoring stopped\n');
+      } catch (e) {
+        console.log('⚠️ Network monitoring test failed:', e.message, '\n');
+      }
+
+      // History navigation
+      console.log('↩️ Testing back/forward navigation...');
+      try {
+        await firefox.navigate('https://example.com');
+        await waitShort(1000);
+        await firefox.navigate('https://www.mozilla.org');
+        await waitShort(1000);
+        await firefox.navigateBack();
+        const titleBack = await firefox.evaluate('return document.title');
+        console.log('   Back title:', titleBack);
+        await firefox.navigateForward();
+        const titleFwd = await firefox.evaluate('return document.title');
+        console.log('   Forward title:', titleFwd);
+        console.log('✅ History navigation tested\n');
+      } catch (e) {
+        console.log('⚠️ Skipping history test:', e.message);
+      }
+    } else {
+      skipOnlineTest('Online tests (navigation, network, history, tabs)');
+    }
+
+    console.log('✅ All BiDi DevTools tests completed! 🎉\n');
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    if (error.stack) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    console.log('🧹 Closing connection...');
+    await firefox.close();
+    console.log('✅ Done');
+  }
+}
+
+main().catch((error) => {
+  console.error('💥 Fatal error:', error);
+  process.exit(1);
+});