chrometools-mcp 3.2.10 → 3.3.8

package/utils/post-click-diagnostics.js

@@ -4,51 +4,74 @@
  */
 
 import { consoleLogs, networkRequests } from '../browser/page-manager.js';
+import { getNetworkRequestsFromBridge, isBridgeConnected } from '../bridge/bridge-client.js';
 
 /**
- * Wait for pending network requests to complete
+ * Wait for network requests to complete
+ * Tracks all requests (GET, POST, PUT, PATCH, DELETE) that started within detection window
  * @param {number} beforeActionTimestamp - Timestamp before action to track new requests
- * @param {number} initialWaitMs - Initial wait time before checking (default: 500ms)
- * @param {number} maxWaitMs - Maximum time to wait for requests (default: 5000ms)
+ * @param {number} detectionWindowMs - Time window to detect requests (default: 200ms)
+ * @param {number} maxWaitMs - Maximum time to wait for requests (default: 10000ms)
  * @returns {Promise<{pendingFound: boolean, waitedMs: number, completedRequests: number, totalRequests: number}>}
  */
-export async function waitForPendingRequests(beforeActionTimestamp, initialWaitMs = 500, maxWaitMs = 5000) {
+export async function waitForPendingRequests(beforeActionTimestamp, detectionWindowMs = 200, maxWaitMs = 10000) {
   const startTime = Date.now();
 
-  // Step 1: Wait initial period to let requests start
-  await new Promise(resolve => setTimeout(resolve, initialWaitMs));
+  // Step 1: Wait for detection window to let requests start
+  await new Promise(resolve => setTimeout(resolve, detectionWindowMs));
 
-  // Step 2: Get requests that started AFTER action
-  const getPostActionRequests = () => {
-    const cutoffDate = new Date(beforeActionTimestamp).toISOString();
-    return networkRequests.filter(req => req.timestamp >= cutoffDate);
-  };
+  // Step 2: Find all requests (GET, POST, PUT, PATCH, DELETE) that started within detection window
+  const cutoffStart = new Date(beforeActionTimestamp).toISOString();
+  const cutoffEnd = new Date(beforeActionTimestamp + detectionWindowMs).toISOString();
+
+  const trackedRequests = networkRequests.filter(req => {
+    // Track all HTTP methods
+    if (!['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].includes(req.method)) {
+      return false;
+    }
+    // Only requests in detection window [T0, T0+200ms]
+    return req.timestamp >= cutoffStart && req.timestamp <= cutoffEnd;
+  });
+
+  // If no requests found, return immediately
+  if (trackedRequests.length === 0) {
+    return {
+      pendingFound: false,
+      waitedMs: Date.now() - startTime,
+      completedRequests: 0,
+      stillPending: 0,
+      pendingRequests: [],
+      totalRequests: 0,
+      trackedRequests: []
+    };
+  }
+
+  // Step 3: Wait for these specific requests to complete
+  const trackedRequestIds = new Set(trackedRequests.map(req => req.requestId));
 
-  // Step 3: Check for pending requests (from post-action requests)
   const checkPending = () => {
-    return getPostActionRequests().filter(req => req.status === 'pending');
+    return networkRequests.filter(req =>
+      trackedRequestIds.has(req.requestId) && req.status === 'pending'
+    );
   };
 
   let pending = checkPending();
-  let allPostActionRequests = getPostActionRequests();
   const initialPendingCount = pending.length;
 
-  // Step 4: If there are pending requests OR new requests appeared, wait for completion
-  if (pending.length > 0 || allPostActionRequests.length > 0) {
-    // Wait for pending requests to complete (with timeout)
-    while (pending.length > 0 && (Date.now() - startTime) < maxWaitMs) {
-      await new Promise(resolve => setTimeout(resolve, 100)); // Check every 100ms
-      pending = checkPending();
-      allPostActionRequests = getPostActionRequests(); // Update total count
-    }
+  // Wait for requests to complete (with configurable timeout)
+  while (pending.length > 0 && (Date.now() - startTime) < maxWaitMs) {
+    await new Promise(resolve => setTimeout(resolve, 100)); // Check every 100ms
+    pending = checkPending();
   }
 
-  const finalRequests = getPostActionRequests();
+  // Collect final results for tracked requests
+  const finalRequests = networkRequests.filter(req => trackedRequestIds.has(req.requestId));
   const completedRequests = finalRequests.filter(req => req.status === 'completed' || (typeof req.status === 'number'));
-  const pendingRequests = pending.map(req => ({
+  const stillPendingRequests = pending.map(req => ({
     url: req.url,
     method: req.method,
-    timestamp: req.timestamp
+    timestamp: req.timestamp,
+    status: 'pending' // Still waiting after timeout
   }));
 
   return {
@@ -56,8 +79,14 @@ export async function waitForPendingRequests(beforeActionTimestamp, initialWaitM
     waitedMs: Date.now() - startTime,
     completedRequests: completedRequests.length,
     stillPending: pending.length,
-    pendingRequests: pendingRequests,
-    totalRequests: finalRequests.length
+    pendingRequests: stillPendingRequests,
+    totalRequests: finalRequests.length,
+    trackedRequests: finalRequests.map(req => ({
+      method: req.method,
+      url: req.url,
+      status: req.status,
+      statusText: req.statusText
+    }))
   };
 }
 
@@ -133,19 +162,54 @@ export function collectErrors(sinceTimestamp = null, maxConsoleErrors = 15, maxN
  * Full post-action diagnostics: wait for requests and collect errors
  * @param {Page} page - Puppeteer page instance
  * @param {number} beforeActionTimestamp - Timestamp before action (to filter errors)
+ * @param {Object} options - Options for diagnostics
+ * @param {boolean} options.skipNetworkWait - Skip waiting for network requests (default: false)
+ * @param {number} options.networkWaitTimeout - Custom timeout for network wait in ms (default: 10000)
+ * @param {string} options.urlBeforeAction - URL before action (to detect navigation/form submit)
  * @returns {Promise<Object>} Diagnostics result with errors and network info
  */
-export async function runPostClickDiagnostics(page, beforeActionTimestamp) {
-  // Wait for network requests (passing timestamp to track post-action requests)
-  // maxWait = 20s to give slow APIs time to complete
-  const networkInfo = await waitForPendingRequests(beforeActionTimestamp, 500, 20000);
+export async function runPostClickDiagnostics(page, beforeActionTimestamp, options = {}) {
+  const { skipNetworkWait = false, networkWaitTimeout = 10000, urlBeforeAction = null } = options;
+
+  // Wait for network requests (all methods within 200ms detection window)
+  // Default maxWait = 10s for click, configurable via networkWaitTimeout parameter
+  const networkInfo = skipNetworkWait
+    ? { pendingFound: false, waitedMs: 0, completedRequests: 0, stillPending: 0, pendingRequests: [], totalRequests: 0, trackedRequests: [], allRecentRequests: [] }
+    : await waitForPendingRequests(beforeActionTimestamp, 200, networkWaitTimeout);
 
   // Small delay to let pending requests update their error status
   // (handles case where request completes with error right after maxWait expires)
   await new Promise(resolve => setTimeout(resolve, 100));
 
+  // Check for page navigation (indicates form submit in non-SPA apps)
+  const currentUrl = page.url();
+  let navigationDetected = null;
+  if (urlBeforeAction && currentUrl !== urlBeforeAction) {
+    navigationDetected = {
+      from: urlBeforeAction,
+      to: currentUrl,
+      likelyFormSubmit: true // Page URL changed after click - likely form POST with redirect
+    };
+  }
+
+  // Fetch network requests from Bridge (Extension webRequest API)
+  // These persist across page navigations, unlike CDP requests
+  let bridgeRequests = [];
+  if (isBridgeConnected()) {
+    try {
+      const allBridgeRequests = await getNetworkRequestsFromBridge({ timeout: 2000 });
+      // Filter to requests after beforeActionTimestamp
+      const cutoffTime = beforeActionTimestamp - 1000; // 1s buffer
+      bridgeRequests = allBridgeRequests.filter(req =>
+        req.timestamp >= cutoffTime
+      );
+    } catch (e) {
+      // Bridge not available, continue without
+    }
+  }
+
   // Check for chrome error page (ERR_CONNECTION_REFUSED, etc.)
-  const url = page.url();
+  const url = currentUrl;
   let chromeErrorInfo = null;
   if (url.startsWith('chrome-error://')) {
     chromeErrorInfo = await page.evaluate(() => {
@@ -169,8 +233,19 @@ export async function runPostClickDiagnostics(page, beforeActionTimestamp) {
       stillPending: networkInfo.stillPending,
       pendingRequests: networkInfo.pendingRequests,
       totalRequests: networkInfo.totalRequests,
-      waitedMs: networkInfo.waitedMs
+      waitedMs: networkInfo.waitedMs,
+      trackedRequests: networkInfo.trackedRequests || [],
+      allRecentRequests: networkInfo.allRecentRequests || [],
+      // Bridge requests (from Extension webRequest API) - persist across page navigations
+      bridgeRequests: bridgeRequests.map(req => ({
+        method: req.method,
+        url: req.url,
+        type: req.type,
+        status: req.status,
+        timestamp: req.timestamp
+      }))
     },
+    navigation: navigationDetected,
     chromeError: chromeErrorInfo,
     errors: {
       consoleErrors: errors.consoleErrors,
@@ -201,25 +276,49 @@ export function formatDiagnosticsForAI(diagnostics) {
     output += `\n   → Backend likely not running or unreachable`;
   }
 
-  // Network activity
+  // Page navigation detection (form submit in non-SPA apps)
+  if (diagnostics.navigation) {
+    output += `\n\n🔄 Page navigation detected (form submit):`;
+    output += `\n   From: ${diagnostics.navigation.from}`;
+    output += `\n   To: ${diagnostics.navigation.to}`;
+    output += `\n   → This indicates a successful form POST with page reload`;
+  }
+
+  // Network activity - show all tracked requests (GET/POST/PUT/PATCH/DELETE)
   const netActivity = diagnostics.networkActivity;
-  if (netActivity.totalRequests > 0) {
-    const errorCount = diagnostics.errors.networkErrors.length;
-    const successCount = netActivity.completedRequests - errorCount;
+  const trackedRequests = netActivity.trackedRequests || [];
 
-    // Show warning if there are pending requests after timeout
+  // Show requests detected within 200ms after action
+  if (trackedRequests.length > 0) {
+    output += `\n\n📡 Network requests (${trackedRequests.length}):`;
+    trackedRequests.forEach((req, idx) => {
+      const statusIcon = req.status === 'pending' ? '⏳' :
+                        (req.status === 'completed' || (typeof req.status === 'number' && req.status < 400) ? '✓' : '✗');
+      const statusText = req.statusText || req.status || 'pending';
+      output += `\n  ${idx + 1}. ${statusIcon} ${req.method} ${req.url}`;
+      output += `\n     → Status: ${statusText}`;
+    });
+
+    // Show if some requests are still pending after timeout
     if (netActivity.stillPending > 0) {
-      output += `\n⚠️  Network: ${successCount} OK, ${errorCount} failed, ${netActivity.stillPending} PENDING`;
-      output += `\n   ⏱️  Timeout: Stopped waiting after ${netActivity.waitedMs}ms`;
-      output += `\n   → ${netActivity.stillPending} request(s) still running - status unknown`;
-      output += `\n   → May complete successfully or fail - cannot determine outcome`;
-    } else if (errorCount > 0) {
-      output += `\n⚠️  Network: ${successCount} OK, ${errorCount} failed (${netActivity.waitedMs}ms)`;
-    } else {
-      output += `\n✓ Network: ${netActivity.completedRequests} completed (${netActivity.waitedMs}ms)`;
+      output += `\n\n⏳ ${netActivity.stillPending} request(s) still pending after ${Math.round(netActivity.waitedMs)}ms timeout`;
     }
   } else {
-    output += '\n✓ No network requests triggered';
+    output += '\n\n📡 No network requests detected within 200ms';
+  }
+
+  // Bridge requests (from Extension - persist across page reloads)
+  const bridgeRequests = netActivity.bridgeRequests || [];
+  if (bridgeRequests.length > 0) {
+    output += `\n\n📡 Browser-level requests (via Extension):`;
+    bridgeRequests.forEach((req, idx) => {
+      const statusIcon = req.status === 'pending' ? '⏳' :
+                        (req.status === 'completed' || (typeof req.status === 'number' && req.status < 400) ? '✓' : '✗');
+      output += `\n  ${idx + 1}. ${statusIcon} ${req.method} ${req.url}`;
+      if (req.status !== 'pending') {
+        output += ` → ${req.status}`;
+      }
+    });
   }
 
   // Errors