firefox-devtools-mcp 0.2.0

package/scripts/test-console.js

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+
+/**
+ * Standalone test for console message handling
+ * Tests console.log, console.warn, console.error capturing
+ */
+
+import { FirefoxDevTools } from '../dist/index.js';
+
+async function main() {
+  console.log('📝 Testing Console Message Handling...\n');
+
+  const firefox = new FirefoxDevTools({
+    firefoxPath: undefined,
+    headless: false,
+    viewport: { width: 1024, height: 768 },
+  });
+
+  try {
+    // Connect
+    console.log('📡 Connecting to Firefox...');
+    await firefox.connect();
+    console.log('✅ Connected!\n');
+
+    // Navigate to blank page
+    console.log('🌐 Navigating to about:blank...');
+    await firefox.navigate('about:blank');
+    console.log('✅ Navigation complete\n');
+
+    // Clear existing console messages
+    console.log('🧹 Clearing existing console messages...');
+    firefox.clearConsoleMessages();
+    const afterClear = await firefox.getConsoleMessages();
+    console.log(`✅ Console cleared (${afterClear.length} messages)\n`);
+
+    // Test 1: Generate different log levels
+    console.log('1️⃣ Generating console messages of different levels...');
+    await firefox.evaluate(`
+      console.log('This is a log message');
+      console.info('This is an info message');
+      console.warn('This is a warning message');
+      console.error('This is an error message');
+      console.debug('This is a debug message');
+    `);
+
+    // Wait a bit for messages to be captured
+    await new Promise((r) => setTimeout(r, 500));
+
+    const allMessages = await firefox.getConsoleMessages();
+    console.log(`   ✅ Captured ${allMessages.length} console messages\n`);
+
+    // Display all messages
+    console.log('📋 All console messages:');
+    for (const msg of allMessages) {
+      const emoji = {
+        log: '📝',
+        info: 'ℹ️',
+        warn: '⚠️',
+        error: '❌',
+        debug: '🔍',
+      }[msg.level.toLowerCase()] || '📝';
+      console.log(`   ${emoji} [${msg.level}] ${msg.text}`);
+    }
+    console.log();
+
+    // Test 2: Filter by level
+    console.log('2️⃣ Testing level filtering...');
+    const errors = allMessages.filter((msg) => msg.level.toLowerCase() === 'error');
+    const warnings = allMessages.filter((msg) => msg.level.toLowerCase() === 'warn');
+    console.log(`   ✅ Found ${errors.length} error(s)`);
+    console.log(`   ✅ Found ${warnings.length} warning(s)\n`);
+
+    // Test 3: Generate many messages and test limit
+    console.log('3️⃣ Testing message limit (generating 100 messages)...');
+    firefox.clearConsoleMessages();
+    await firefox.evaluate(`
+      for (let i = 0; i < 100; i++) {
+        console.log('Message ' + i);
+      }
+    `);
+
+    await new Promise((r) => setTimeout(r, 1000));
+    const manyMessages = await firefox.getConsoleMessages();
+    console.log(`   ✅ Captured ${manyMessages.length} messages\n`);
+
+    // Test 4: Clear messages
+    console.log('4️⃣ Testing clear console messages...');
+    firefox.clearConsoleMessages();
+    const afterSecondClear = await firefox.getConsoleMessages();
+    console.log(`   ✅ Console cleared (${afterSecondClear.length} messages remaining)\n`);
+
+    // Test 5: Test timestamps
+    console.log('5️⃣ Testing message timestamps...');
+    firefox.clearConsoleMessages();
+    const startTime = Date.now();
+
+    await firefox.evaluate(`console.log('Message at T=0')`);
+    await new Promise((r) => setTimeout(r, 500));
+    await firefox.evaluate(`console.log('Message at T=500ms')`);
+    await new Promise((r) => setTimeout(r, 500));
+    await firefox.evaluate(`console.log('Message at T=1000ms')`);
+
+    await new Promise((r) => setTimeout(r, 500));
+    const timedMessages = await firefox.getConsoleMessages();
+    console.log(`   ✅ Captured ${timedMessages.length} timed messages`);
+
+    for (const msg of timedMessages) {
+      const elapsed = msg.timestamp ? msg.timestamp - startTime : 'N/A';
+      console.log(`   📍 "${msg.text}" at +${elapsed}ms`);
+    }
+    console.log();
+
+    // Test 6: Test with objects and complex data
+    console.log('6️⃣ Testing console with objects and arrays...');
+    firefox.clearConsoleMessages();
+    await firefox.evaluate(`
+      console.log('Simple string');
+      console.log('Number:', 42);
+      console.log('Object:', { name: 'Test', value: 123 });
+      console.log('Array:', [1, 2, 3, 4, 5]);
+    `);
+
+    await new Promise((r) => setTimeout(r, 500));
+    const complexMessages = await firefox.getConsoleMessages();
+    console.log(`   ✅ Captured ${complexMessages.length} messages with complex data`);
+    for (const msg of complexMessages) {
+      console.log(`   📝 ${msg.text}`);
+    }
+    console.log();
+
+    console.log('✅ All console tests passed! 🎉\n');
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    if (error.stack) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    console.log('🧹 Closing Firefox...');
+    await firefox.close();
+    console.log('✅ Done!');
+  }
+}
+
+main().catch((error) => {
+  console.error('💥 Fatal error:', error);
+  process.exit(1);
+});

package/scripts/test-dialog.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+/**
+ * Standalone test for dialog handling (Task 23)
+ */
+
+import { FirefoxDevTools } from '../dist/index.js';
+
+async function main() {
+  console.log('💬 Testing Dialog Handling (Task 23)...\n');
+
+  const firefox = new FirefoxDevTools({
+    firefoxPath: undefined,
+    headless: false,
+    viewport: { width: 1024, height: 768 },
+  });
+
+  try {
+    // Connect
+    console.log('📡 Connecting to Firefox...');
+    await firefox.connect();
+    console.log('✅ Connected!\n');
+
+    // Test 1: Alert dialog
+    console.log('1️⃣ Testing alert() dialog...');
+    await firefox.navigate('about:blank');
+    await firefox.evaluate('setTimeout(() => alert("This is a test alert!"), 100)');
+    await new Promise((r) => setTimeout(r, 300));
+    await firefox.acceptDialog();
+    console.log('   ✅ Alert accepted\n');
+
+    // Test 2: Confirm dialog - accept
+    console.log('2️⃣ Testing confirm() dialog - accept...');
+    await firefox.evaluate(
+      'setTimeout(() => { window.confirmResult = confirm("Click OK to accept"); }, 100)'
+    );
+    await new Promise((r) => setTimeout(r, 300));
+    await firefox.acceptDialog();
+    const confirmAccepted = await firefox.evaluate('return window.confirmResult');
+    console.log(`   Result: ${confirmAccepted}`);
+    console.log(`   ${confirmAccepted ? '✅' : '❌'} Confirm was accepted\n`);
+
+    // Test 3: Confirm dialog - dismiss
+    console.log('3️⃣ Testing confirm() dialog - dismiss...');
+    await firefox.evaluate(
+      'setTimeout(() => { window.confirmResult2 = confirm("Click Cancel to dismiss"); }, 100)'
+    );
+    await new Promise((r) => setTimeout(r, 300));
+    await firefox.dismissDialog();
+    const confirmDismissed = await firefox.evaluate('return window.confirmResult2');
+    console.log(`   Result: ${confirmDismissed}`);
+    console.log(`   ${!confirmDismissed ? '✅' : '❌'} Confirm was dismissed\n`);
+
+    // Test 4: Prompt dialog with text
+    console.log('4️⃣ Testing prompt() dialog with custom text...');
+    await firefox.evaluate(
+      'setTimeout(() => { window.promptResult = prompt("Enter your favorite color:"); }, 100)'
+    );
+    await new Promise((r) => setTimeout(r, 300));
+    await firefox.acceptDialog('Blue');
+    const promptResult = await firefox.evaluate('return window.promptResult');
+    console.log(`   Result: ${promptResult}`);
+    console.log(`   ${promptResult === 'Blue' ? '✅' : '❌'} Prompt returned: "${promptResult}"\n`);
+
+    // Test 5: Prompt dialog dismissed
+    console.log('5️⃣ Testing prompt() dialog - dismiss...');
+    await firefox.evaluate(
+      'setTimeout(() => { window.promptResult2 = prompt("This will be dismissed"); }, 100)'
+    );
+    await new Promise((r) => setTimeout(r, 300));
+    await firefox.dismissDialog();
+    const promptDismissed = await firefox.evaluate('return window.promptResult2');
+    console.log(`   Result: ${promptDismissed}`);
+    console.log(`   ${promptDismissed === null ? '✅' : '❌'} Prompt was dismissed (null)\n`);
+
+    // Test 6: Error handling - no dialog present
+    console.log('6️⃣ Testing error handling (no dialog present)...');
+    try {
+      await firefox.acceptDialog();
+      console.log('   ❌ Should have thrown error');
+    } catch (e) {
+      console.log(`   ✅ Error caught: ${e.message}\n`);
+    }
+
+    console.log('✅ All dialog tests passed! 🎉\n');
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    if (error.stack) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    console.log('🧹 Closing Firefox...');
+    await firefox.close();
+    console.log('✅ Done!');
+  }
+}
+
+main().catch((error) => {
+  console.error('💥 Fatal error:', error);
+  process.exit(1);
+});

package/scripts/test-input-tools.js

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+
+/**
+ * Test script for UID-based input tools (Task 21)
+ * Tests: clickByUid, fillByUid, hoverByUid, dragByUidToUid, fillFormByUid, uploadFileByUid
+ *
+ * Note: Uses innerHTML injection to avoid Firefox data: URL parsing issues
+ */
+
+import { FirefoxDevTools } from '../dist/index.js';
+import { writeFile, mkdtemp, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { loadHTML, waitShort } from './_helpers/page-loader.js';
+
+async function main() {
+  console.log('🧪 Testing UID-based input tools...\n');
+
+  const firefox = new FirefoxDevTools({
+    firefoxPath: undefined,
+    headless: false,
+    startUrl: 'about:blank',
+  });
+
+  try {
+    console.log('📡 Connecting to Firefox...');
+    await firefox.connect();
+    console.log('✅ Connected!\n');
+
+    // Test 1: Click
+    console.log('🖱️  Test 1: Click By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <button id="btn">Click Me</button>
+        <script>
+          document.getElementById('btn').addEventListener('click', () => {
+            document.body.setAttribute('data-result', 'clicked');
+          });
+        </script>
+      </body>
+    `);
+    let snapshot = await firefox.takeSnapshot();
+    const btnUid = snapshot.json.root.children.find(n => n.tag === 'button')?.uid;
+    if (btnUid) {
+      await firefox.clickByUid(btnUid);
+      await waitShort();
+      const result = await firefox.evaluate("return document.body.getAttribute('data-result')");
+      console.log(`   ${result === 'clicked' ? '✅' : '❌'} Click: ${result}\n`);
+    } else {
+      console.log('   ❌ Button UID not found\n');
+    }
+
+    // Test 2: Fill
+    console.log('✍️  Test 2: Fill By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <input id="inp" type="text">
+        <script>
+          document.getElementById('inp').addEventListener('input', (e) => {
+            document.body.setAttribute('data-value', e.target.value);
+          });
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const inpUid = snapshot.json.root.children.find(n => n.tag === 'input')?.uid;
+    if (inpUid) {
+      await firefox.fillByUid(inpUid, 'Hello Test');
+      await waitShort();
+      const value = await firefox.evaluate("return document.body.getAttribute('data-value')");
+      console.log(`   ${value === 'Hello Test' ? '✅' : '❌'} Fill: ${value}\n`);
+    } else {
+      console.log('   ❌ Input UID not found\n');
+    }
+
+    // Test 3: Hover
+    console.log('🎯 Test 3: Hover By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <div id="hover">Hover Me</div>
+        <script>
+          document.getElementById('hover').addEventListener('mouseenter', () => {
+            document.body.setAttribute('data-hovered', '1');
+          });
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const hoverUid = snapshot.json.root.children.find(n => n.tag === 'div')?.uid;
+    if (hoverUid) {
+      await firefox.hoverByUid(hoverUid);
+      await waitShort();
+      const hovered = await firefox.evaluate("return document.body.getAttribute('data-hovered')");
+      console.log(`   ${hovered === '1' ? '✅' : '❌'} Hover: ${hovered}\n`);
+    } else {
+      console.log('   ❌ Div UID not found\n');
+    }
+
+    // Test 4: Fill Form
+    console.log('📝 Test 4: Fill Form By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <input id="first" type="text" name="firstName">
+        <input id="last" type="text" name="lastName">
+        <script>
+          let values = {};
+          ['first', 'last'].forEach(id => {
+            document.getElementById(id).addEventListener('input', (e) => {
+              values[id] = e.target.value;
+              if (Object.keys(values).length === 2) {
+                document.body.setAttribute('data-form', JSON.stringify(values));
+              }
+            });
+          });
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const inputs = snapshot.json.root.children.filter(n => n.tag === 'input');
+    if (inputs.length === 2) {
+      await firefox.fillFormByUid([
+        { uid: inputs[0].uid, value: 'John' },
+        { uid: inputs[1].uid, value: 'Doe' },
+      ]);
+      await waitShort(500);
+      const formData = await firefox.evaluate("return document.body.getAttribute('data-form')");
+      const parsed = JSON.parse(formData || '{}');
+      const ok = parsed.first === 'John' && parsed.last === 'Doe';
+      console.log(`   ${ok ? '✅' : '❌'} Fill Form: ${formData}\n`);
+    } else {
+      console.log(`   ❌ Expected 2 inputs, found ${inputs.length}\n`);
+    }
+
+    // Test 5: Upload File
+    console.log('📁 Test 5: Upload File By UID');
+    const tmpDir = await mkdtemp(join(tmpdir(), 'test-'));
+    const filePath = join(tmpDir, 'test.txt');
+    await writeFile(filePath, 'test content');
+
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <input id="file" type="file" style="display:none">
+        <script>
+          document.getElementById('file').addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+              document.body.setAttribute('data-filename', e.target.files[0].name);
+            }
+          });
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const fileUid = snapshot.json.root.children.find(n => n.tag === 'input')?.uid;
+    if (fileUid) {
+      await firefox.uploadFileByUid(fileUid, filePath);
+      await waitShort();
+      const filename = await firefox.evaluate("return document.body.getAttribute('data-filename')");
+      console.log(`   ${filename === 'test.txt' ? '✅' : '❌'} Upload: ${filename}\n`);
+    } else {
+      console.log('   ❌ File input UID not found\n');
+    }
+    await rm(tmpDir, { recursive: true, force: true });
+
+    // Test 6: Drag & Drop
+    console.log('🧲 Test 6: Drag & Drop By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <div id="drag" draggable="true">Drag</div>
+        <div id="drop">Drop</div>
+        <script>
+          const drop = document.getElementById('drop');
+          drop.addEventListener('drop', (e) => {
+            e.preventDefault();
+            document.body.setAttribute('data-dropped', '1');
+          });
+          drop.addEventListener('dragover', (e) => e.preventDefault());
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const divs = snapshot.json.root.children.filter(n => n.tag === 'div');
+    if (divs.length === 2) {
+      await firefox.dragByUidToUid(divs[0].uid, divs[1].uid);
+      await waitShort();
+      const dropped = await firefox.evaluate("return document.body.getAttribute('data-dropped')");
+      console.log(`   ${dropped === '1' ? '✅' : '❌'} Drag & Drop: ${dropped}\n`);
+    } else {
+      console.log(`   ❌ Expected 2 divs, found ${divs.length}\n`);
+    }
+
+    // Test 7: Double Click
+    console.log('🖱️🖱️  Test 7: Double Click By UID');
+    await loadHTML(firefox, `
+      <head><title>Test</title></head>
+      <body>
+        <button id="dblBtn">Double Click</button>
+        <script>
+          document.getElementById('dblBtn').addEventListener('dblclick', () => {
+            document.body.setAttribute('data-dblclick', '1');
+          });
+        </script>
+      </body>
+    `);
+    snapshot = await firefox.takeSnapshot();
+    const dblBtnUid = snapshot.json.root.children.find(n => n.tag === 'button')?.uid;
+    if (dblBtnUid) {
+      await firefox.clickByUid(dblBtnUid, true);
+      await waitShort();
+      const dblClicked = await firefox.evaluate("return document.body.getAttribute('data-dblclick')");
+      console.log(`   ${dblClicked === '1' ? '✅' : '❌'} Double Click: ${dblClicked}\n`);
+    } else {
+      console.log('   ❌ Button UID not found\n');
+    }
+
+    console.log('✅ All 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...');
+    await firefox.close();
+    console.log('✅ Done');
+  }
+}
+
+main().catch(console.error);

package/scripts/test-lifecycle-hooks.js

@@ -0,0 +1,124 @@
+/**
+ * Test lifecycle hooks and automatic cleanup on navigation
+ */
+import { FirefoxDevTools } from '../dist/index.js';
+
+async function testLifecycleHooks() {
+  console.log('🧪 Testing lifecycle hooks...\n');
+
+  const client = new FirefoxDevTools({
+    headless: true,
+    args: ['--width=1280', '--height=720'],
+  });
+
+  try {
+    await client.connect();
+    console.log('✅ Connected to Firefox\n');
+
+    // Navigate to example.com
+    console.log('📄 Navigating to example.com...');
+    await client.navigate('https://example.com');
+    console.log('✅ Page loaded\n');
+
+    // Take snapshot and get a UID
+    console.log('📸 Taking snapshot...');
+    const snapshot1 = await client.takeSnapshot();
+    const uid1 = snapshot1.json.root.uid;
+    console.log(`✅ Snapshot 1 taken, root UID: ${uid1}\n`);
+
+    // Verify UID works
+    console.log('🧪 Testing UID resolution before navigation...');
+    const selector1 = client.resolveUidToSelector(uid1);
+    console.log(`✅ UID ${uid1} resolves to: ${selector1}\n`);
+
+    // Start network monitoring
+    console.log('🌐 Starting network monitoring...');
+    await client.startNetworkMonitoring();
+    console.log('✅ Network monitoring started\n');
+
+    // Make some network requests by navigating
+    console.log('📄 Navigating to mozilla.org (triggers lifecycle hooks)...');
+    await client.navigate('https://www.mozilla.org');
+    console.log('✅ Navigation completed\n');
+
+    // Wait a bit for network requests
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    // Check network requests (should have some from mozilla.org)
+    const requests1 = await client.getNetworkRequests();
+    console.log(`📊 Network requests captured: ${requests1.length}`);
+    if (requests1.length > 0) {
+      console.log(`   First request: ${requests1[0].method} ${requests1[0].url}\n`);
+    }
+
+    // Test staleness: old UID should fail
+    console.log('🧪 Testing staleness detection (old UID should fail)...');
+    try {
+      client.resolveUidToSelector(uid1);
+      console.log('❌ FAIL: Old UID should have been invalidated!\n');
+    } catch (err) {
+      console.log(`✅ PASS: Old UID correctly rejected: ${err.message}\n`);
+    }
+
+    // Take new snapshot
+    console.log('📸 Taking new snapshot...');
+    const snapshot2 = await client.takeSnapshot();
+    const uid2 = snapshot2.json.root.uid;
+    console.log(`✅ Snapshot 2 taken, root UID: ${uid2}\n`);
+
+    // Navigate again
+    console.log('📄 Navigating to example.com again (triggers lifecycle hooks)...');
+    await client.navigate('https://example.com');
+    console.log('✅ Navigation completed\n');
+
+    // Wait for page to settle
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Check network requests after navigation (should be cleared automatically)
+    const requests2 = await client.getNetworkRequests();
+    console.log(`📊 Network requests after 2nd navigation: ${requests2.length}`);
+    console.log(
+      requests2.length === 0
+        ? '✅ PASS: Network requests auto-cleared on navigation\n'
+        : '⚠️  WARN: Network requests not cleared (check lifecycle hook)\n'
+    );
+
+    // Test console messages
+    console.log('📝 Checking console messages...');
+    const consoleMessages1 = await client.getConsoleMessages();
+    console.log(`   Console messages: ${consoleMessages1.length}\n`);
+
+    // Trigger console message
+    await client.evaluate(`console.log('Test message from lifecycle hook test')`);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    const consoleMessages2 = await client.getConsoleMessages();
+    console.log(`   Console messages after log: ${consoleMessages2.length}`);
+    console.log(
+      `   Last message: ${consoleMessages2[consoleMessages2.length - 1]?.text || 'none'}\n`
+    );
+
+    // Navigate again and check if console was cleared
+    console.log('📄 Navigating one more time to check console clearing...');
+    await client.navigate('https://example.com');
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const consoleMessages3 = await client.getConsoleMessages();
+    console.log(`📊 Console messages after 3rd navigation: ${consoleMessages3.length}`);
+    console.log(
+      consoleMessages3.length === 0
+        ? '✅ PASS: Console auto-cleared on navigation\n'
+        : '⚠️  INFO: Console has messages (from new page)\n'
+    );
+
+    console.log('✅ All lifecycle hook tests completed! 🎉\n');
+  } catch (error) {
+    console.error('❌ Test failed:', error);
+  } finally {
+    console.log('🧹 Closing connection...');
+    await client.close();
+    console.log('✅ Done');
+  }
+}
+
+testLifecycleHooks();