chrometools-mcp 3.2.4 → 3.2.10

package/CHANGELOG.md

@@ -2,6 +2,126 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.2.10] - 2026-01-29
+
+### Fixed
+- **Network request deduplication** — Fixed duplicate pending requests in diagnostics
+  - Prevented same requestId from being added multiple times during redirects/retries
+  - Added deduplication check in Network.requestWillBeSent event handler
+  - Updates existing request instead of creating duplicate entry
+  - Example: example.com showed 4 pending (2 URLs × 2 duplicates) → now shows 2 pending (correct count)
+- **Memory leak prevention** — Limited networkRequests array growth
+  - Keeps maximum 500 most recent network requests in memory
+  - Automatically removes oldest requests when limit exceeded
+  - Prevents unbounded memory growth during long browser sessions
+  - Example: After 100 page navigations, memory stays bounded
+
+## [3.2.9] - 2026-01-29
+
+### Added
+- **navigateTo diagnostics** — Post-navigation diagnostics for navigateTo tool
+  - Detects chrome-error:// pages (unreachable servers, DNS failures)
+  - Waits 20s for slow page loads and network requests
+  - Reports JS console errors and network errors after navigation
+  - Shows pending requests if page loads slowly
+  - Same comprehensive diagnostics as click tool
+  - Example: Navigate to offline backend → instant error report instead of silent failure
+- **openBrowser diagnostics** — Post-navigation diagnostics for openBrowser tool
+  - Same comprehensive diagnostics as navigateTo and click
+  - Critical for first action in session - shows errors immediately
+  - Detects chrome-error:// pages on initial load
+  - Reports network errors, console errors, pending requests
+  - Example: Open unreachable backend → instant error report with details
+
+### Changed
+- **Diagnostics naming** — Renamed for clarity and universal use
+  - "POST-CLICK DIAGNOSTICS" → "POST-ACTION DIAGNOSTICS"
+  - Function parameters: beforeClickTimestamp → beforeActionTimestamp
+  - Comments updated to reflect use in both click and navigate actions
+  - File remains post-click-diagnostics.js for backward compatibility
+
+## [3.2.8] - 2026-01-29
+
+### Changed
+- **Network wait timeout** — Increased from 5s to 20s for slow APIs
+  - Gives slow backend APIs time to complete before timeout
+  - AI gets complete success/error status instead of "pending unknown"
+  - Pending requests after 20s are reported with details (URL, method, runtime)
+  - Clear warning: "Status unknown - may complete successfully or fail"
+
+### Fixed
+- **Click timeout on network errors** — No more 30s timeout when backend unreachable
+  - Detects chrome-error:// pages (ERR_CONNECTION_REFUSED, DNS_PROBE_FINISHED_NXDOMAIN, etc.)
+  - Returns error details immediately after 500ms diagnostic wait
+  - Shows error code and suggestion: "Backend likely not running or unreachable"
+  - Reduces diagnosis from 3 API calls to 1
+  - Example: Form submits to localhost:8001 (not running) → instant error report instead of 30s timeout
+- **Network request tracking** — Now tracks ALL requests triggered by click, not just pending at 500ms
+  - Filters requests by timestamp (only those started AFTER click)
+  - Catches slow-starting requests that begin after initial 500ms wait
+  - Shows accurate count: completed/pending/total requests
+  - Prevents false "No network requests triggered" when requests start late
+- **Delayed error collection** — Errors from requests that complete during maxWait are now captured
+  - Added 100ms delay after network wait before collecting errors
+  - Catches errors from requests that finish right as timeout expires
+  - Network summary shows: "⚠️ Network: 2 OK, 1 failed" when errors present
+  - Ensures AI sees errors even if request completes at edge of timeout window
+- **Pending request reporting** — AI now sees details about slow/hanging requests
+  - Lists pending requests with URL, method, and elapsed time
+  - Suggests backend performance check or network connectivity issues
+  - Example: "POST /api/slow - Running for: 20145ms"
+
+## [3.2.7] - 2026-01-29
+
+### Added
+- **Post-click diagnostics** — Click tool now automatically detects and reports errors
+  - Waits 500ms after click to capture async events
+  - Detects pending network requests and waits for completion (up to 5s)
+  - Collects JavaScript console errors and network errors
+  - **Error limit**: Max 15 console errors + 15 network errors to prevent spam
+  - Shows omitted error count if limit exceeded
+  - Returns diagnostics in click response for immediate AI feedback
+  - Prevents AI from making blind follow-up requests when errors occur
+  - New module: `utils/post-click-diagnostics.js`
+
+### Changed
+- **Click behavior** — Enhanced UX for AI agents
+  - Click now includes network activity summary (requests completed, timing)
+  - Errors displayed immediately in click response
+  - AI can see what broke without additional tool calls
+  - Better error context: timestamp, location, status codes
+  - Smart error limiting prevents overwhelming AI with hundreds of errors
+
+## [3.2.6] - 2026-01-28
+
+### Removed
+- **getAllInteractiveElements tool** — Removed redundant tool, fully replaced by analyzePage (54 → 53 tools)
+  - `analyzePage` provides superior functionality: hierarchical tree, element registration, APOM IDs, metadata
+  - `getAllInteractiveElements` only returned flat list with CSS selectors
+  - Affected files: `index.js`, `server/tool-definitions.js`, `server/tool-schemas.js`, `server/tool-groups.js`, `README.md`
+
+### Fixed
+- **analyzePage visibility detection** — Fixed critical bug where analyzePage returned tree: null with interactiveCount: 0 on Angular Material pages
+  - Changed `isVisible()` check from `offsetParent` to `offsetWidth/offsetHeight > 0`
+  - Now correctly detects elements inside `position: fixed` containers (Angular Material overlays, dialogs, selects)
+  - Handles `position: sticky` elements properly
+  - Testing on my-autotests.segmento.ru: interactiveCount increased from 0 → 329 elements
+  - Affected file: `pom/apom-tree-converter.js`
+- **type() text corruption** — Fixed text input corruption (duplicated/swapped characters)
+  - Changed default keystroke delay from 0ms to 30ms
+  - Prevents character corruption on fast-reacting inputs (Google Search, autocomplete fields)
+  - Example: "puppeteer automation" no longer becomes "ppuuppppeetteeeerr baruotwosmeart"
+  - Affected file: `index.js:454`
+
+## [3.2.5] - 2026-01-28
+
+### Fixed
+- **CSS selector validation** — Fixed analyzePage crash when elements have numeric IDs
+  - Added validation to skip IDs starting with digits (e.g., `id="301178"`)
+  - CSS selectors don't support IDs starting with numbers (per CSS specification)
+  - Added try-catch for invalid selector edge cases
+  - Affected file: `pom/apom-tree-converter.js`
+
 ## [3.2.4] - 2026-01-27
 
 ### Performance

package/README.md

@@ -1,6 +1,29 @@
 # chrometools-mcp
 
-MCP server for Chrome automation using Puppeteer with persistent browser sessions.
+> 🌐 [Русская версия README](./README.ru.md)
+
+**AI-powered Chrome automation through natural language.** No more fighting with CSS selectors, XPath expressions, or brittle test scripts. Just tell your AI assistant what you want to do on a web page, and ChromeTools MCP makes it happen.
+
+## Why ChromeTools MCP?
+
+**For AI Agents & Developers:**
+- 🎯 **54 specialized tools** for browser automation - from simple clicks to Figma comparisons
+- 🧠 **APOM (Agent Page Object Model)** - AI-friendly page representation (~8-10k tokens vs 15-25k for screenshots)
+- 🔄 **Persistent browser sessions** - pages stay open between commands for iterative workflows
+- ⚡ **Framework-aware** - handles React, Vue, Angular events and state updates automatically
+- 📸 **Visual testing** - compare designs pixel-by-pixel with Figma integration
+- 🎬 **Scenario recording** - record browser actions, replay them, or export as Playwright/Selenium tests
+- 🌍 **Cross-platform** - works seamlessly on Windows, WSL, Linux, and macOS
+
+**Perfect for:**
+- 🤖 Building AI agents that interact with web applications
+- 🧪 Automated testing without writing code - let AI generate tests from scenarios
+- 🔍 Web scraping and data extraction with natural language instructions
+- 🎨 Design validation - compare implemented UI with Figma designs
+- 🚀 Rapid prototyping - test user flows by describing them to AI
+- 📊 Monitoring and health checks for web applications
+
+Stop writing brittle automation scripts. Start describing what you want in plain English.
 
 ## Installation
 
@@ -152,7 +175,7 @@ The Chrome Extension is **required** for scenario recording and other advanced f
 **Step 3:** Download and Extract the Extension
 
 **Option A - Download from GitHub (Recommended):**
-1. Download the extension archive: [chrome-extension.zip](https://github.com/modelcontextprotocol/servers/raw/main/src/chrometools/chrome-extension.zip)
+1. Download the extension archive: [chrome-extension.zip](https://github.com/docentovich/chrometools-mcp/raw/main/chrome-extension.zip)
 2. Extract the ZIP file to a folder on your computer
 3. Remember the extraction path (you'll need it in the next step)
 
@@ -197,7 +220,7 @@ The Chrome Extension is **required** for scenario recording and other advanced f
   - [Chrome Extension Setup](#chrome-extension-setup)
 - [AI Optimization Features](#ai-optimization-features)- [Scenario Recorder](#scenario-recorder)  - Visual UI-based recording with smart optimization
 - [Available Tools](#available-tools) - **46+ Tools Total**
-  - [AI-Powered Tools](#ai-powered-tools)  - smartFindElement, analyzePage, getElementDetails, getAllInteractiveElements, findElementsByText
+  - [AI-Powered Tools](#ai-powered-tools)  - smartFindElement, analyzePage, getElementDetails, findElementsByText
   - [Core Tools](#1-core-tools) - ping, openBrowser
   - [Interaction Tools](#2-interaction-tools) - click, type, scrollTo, selectOption, selectFromGroup, drag, scrollHorizontal
   - [Inspection Tools](#3-inspection-tools) - getElement, getComputedCss, getBoxModel, screenshot
@@ -238,7 +261,7 @@ AI: smartFindElement("login button")
 1. **`analyzePage`** - 🔥 **USE FREQUENTLY** - Get current page state after loads, clicks, submissions (cached, use refresh:true)
 2. **`smartFindElement`** - Natural language element search with multilingual support
 3. **AI Hints** - Automatic context in all tools (page type, available actions, suggestions)
-4. **Batch helpers** - `getAllInteractiveElements`, `findElementsByText`
+4. **Text search** - `findElementsByText` for finding elements by visible text
 
 **Performance:** 3-5x faster, 5-10x fewer requests
 
@@ -438,12 +461,6 @@ executeScenario({ name: "login_flow", parameters: { email: "user@test.com" } })
   getElementDetails({ id: "container_123", analyzeChildren: true, refresh: true }) // Analyze modal contents with children tree
   ```
 
-#### getAllInteractiveElements
-Get all clickable/fillable elements with their selectors.
-- **Parameters**:
-  - `includeHidden` (optional): Include hidden elements (default: false)
-- **Returns**: Array of all interactive elements with selectors and metadata
-
 #### findElementsByText
 Find elements by their visible text content.
 - **Parameters**:
@@ -1431,11 +1448,11 @@ Each tool definition is sent to the AI in every request, consuming context token
 | `interaction` | User interaction | `click`, `type`, `scrollTo`, `waitForElement`, `hover` (5) |
 | `inspection` | Page inspection | `getComputedCss`, `getBoxModel`, `screenshot`, `saveScreenshot` (4) |
 | `debug` | Debugging & network | `getConsoleLogs`, `listNetworkRequests`, `getNetworkRequest`, `filterNetworkRequests` (4) |
-| `advanced` | Advanced automation & AI | `executeScript`, `setStyles`, `setViewport`, `getViewport`, `navigateTo`, `smartFindElement`, `analyzePage`, `getAllInteractiveElements`, `findElementsByText` (9) |
+| `advanced` | Advanced automation & AI | `executeScript`, `setStyles`, `setViewport`, `getViewport`, `navigateTo`, `smartFindElement`, `analyzePage`, `findElementsByText` (8) |
 | `recorder` | Scenario recording | `enableRecorder`, `executeScenario`, `listScenarios`, `searchScenarios`, `getScenarioInfo`, `deleteScenario`, `exportScenarioAsCode`, `appendScenarioToFile`, `generatePageObject` (9) |
 | `figma` | Figma integration | `getFigmaFrame`, `compareFigmaToElement`, `getFigmaSpecs`, `parseFigmaUrl`, `listFigmaPages`, `searchFigmaFrames`, `getFigmaComponents`, `getFigmaStyles`, `getFigmaColorPalette`, `convertFigmaToCode` (10) |
 
-**Total:** 43 tools across 7 groups
+**Total:** 42 tools across 7 groups
 
 **Configuration:**
 
@@ -1603,7 +1620,7 @@ npx @modelcontextprotocol/inspector node index.js
   - Interaction: click, type, scrollTo, selectOption, selectFromGroup, drag, scrollHorizontal
   - Inspection: getElement, getComputedCss, getBoxModel, screenshot, saveScreenshot
   - Advanced: executeScript, getConsoleLogs, listNetworkRequests, getNetworkRequest, filterNetworkRequests, hover, setStyles, setViewport, getViewport, navigateTo, waitForElement
-  - AI-Powered: smartFindElement, analyzePage, getElementDetails (with children analysis), getAllInteractiveElements, findElementsByText  - Recorder: enableRecorder, executeScenario, listScenarios, searchScenarios, getScenarioInfo, deleteScenario, exportScenarioAsCode, appendScenarioToFile, generatePageObject
+  - AI-Powered: smartFindElement, analyzePage, getElementDetails (with children analysis), findElementsByText  - Recorder: enableRecorder, executeScenario, listScenarios, searchScenarios, getScenarioInfo, deleteScenario, exportScenarioAsCode, appendScenarioToFile, generatePageObject
   - Figma: getFigmaFrame, compareFigmaToElement, getFigmaSpecs, parseFigmaUrl, listFigmaPages, searchFigmaFrames, getFigmaComponents, getFigmaStyles, getFigmaColorPalette, convertFigmaToCode
 - **UI Framework Detection**: Automatic detection of MUI, Ant Design, Chakra UI, Bootstrap, Vuetify, Semantic UI- **Smart Dropdown Handling**: Extracts options from both native `<select>` and custom UI framework components- **APOM (Agent Page Object Model)**: Automatic element ID assignment for reliable interaction  - `analyzePage()` returns elements with unique IDs (e.g., `input_20`, `button_45`)
   - Use `id` parameter in click/type/hover/selectOption for stable targeting

package/README.ru.md

@@ -1,8 +1,29 @@
 # chrometools-mcp
 
-MCP сервер для автоматизации Chrome с использованием Puppeteer и постоянными сессиями браузера.
+> 🌐 [English version](./README.md)
 
-[English version](README.md)
+**Автоматизация Chrome через естественный язык для ИИ.** Забудьте о борьбе с CSS селекторами, XPath выражениями и хрупкими тестовыми скриптами. Просто скажите своему ИИ-помощнику, что вы хотите сделать на веб-странице, и ChromeTools MCP сделает это.
+
+## Зачем нужен ChromeTools MCP?
+
+**Для ИИ-агентов и разработчиков:**
+- 🎯 **54 специализированных инструмента** для автоматизации браузера — от простых кликов до сравнения с Figma
+- 🧠 **APOM (Agent Page Object Model)** — представление страницы для ИИ (~8-10k токенов против 15-25k для скриншотов)
+- 🔄 **Постоянные сессии браузера** — страницы остаются открытыми между командами для итеративной работы
+- ⚡ **Поддержка фреймворков** — автоматически обрабатывает события и состояние React, Vue, Angular
+- 📸 **Визуальное тестирование** — попиксельное сравнение дизайна с макетами Figma
+- 🎬 **Запись сценариев** — записывайте действия в браузере, воспроизводите их или экспортируйте в Playwright/Selenium
+- 🌍 **Кросс-платформенность** — работает на Windows, WSL, Linux и macOS
+
+**Идеально для:**
+- 🤖 Создания ИИ-агентов, взаимодействующих с веб-приложениями
+- 🧪 Автоматизированного тестирования без написания кода — пусть ИИ генерирует тесты из сценариев
+- 🔍 Парсинга веб-страниц и извлечения данных с помощью естественного языка
+- 🎨 Валидации дизайна — сравнение реализованного UI с дизайном в Figma
+- 🚀 Быстрого прототипирования — тестирование пользовательских сценариев через их описание
+- 📊 Мониторинга и проверки работоспособности веб-приложений
+
+Перестаньте писать хрупкие скрипты автоматизации. Начните описывать желаемое на обычном языке.
 
 ## Установка
 
@@ -91,7 +112,7 @@ npx chrometools-mcp
 **Шаг 3:** Скачайте и распакуйте расширение
 
 **Вариант A - Скачать с GitHub (Рекомендуется):**
-1. Скачайте архив расширения: [chrome-extension.zip](https://github.com/modelcontextprotocol/servers/raw/main/src/chrometools/chrome-extension.zip)
+1. Скачайте архив расширения: [chrome-extension.zip](https://github.com/docentovich/chrometools-mcp/raw/main/chrome-extension.zip)
 2. Распакуйте ZIP файл в папку на вашем компьютере
 3. Запомните путь распаковки (он понадобится на следующем шаге)
 

package/browser/page-manager.js

@@ -30,6 +30,21 @@ export const consoleLogs = [];
 // Network requests storage
 export const networkRequests = [];
 
+// Maximum number of network requests to keep in memory (prevent unbounded growth)
+const MAX_NETWORK_REQUESTS = 500;
+
+/**
+ * Clean old network requests to prevent memory leak
+ * Keeps only the most recent MAX_NETWORK_REQUESTS requests
+ */
+function cleanOldNetworkRequests() {
+  if (networkRequests.length > MAX_NETWORK_REQUESTS) {
+    // Remove oldest requests (keep most recent)
+    const removeCount = networkRequests.length - MAX_NETWORK_REQUESTS;
+    networkRequests.splice(0, removeCount);
+  }
+}
+
 // Page analysis cache
 export const pageAnalysisCache = new Map();
 
@@ -52,6 +67,19 @@ export async function setupNetworkMonitoring(page) {
 
   client.on('Network.requestWillBeSent', (event) => {
     const timestamp = new Date().toISOString();
+
+    // Check if request already exists (prevent duplicates from redirects/retries)
+    const existingReq = networkRequests.find(r => r.requestId === event.requestId);
+    if (existingReq) {
+      // Update existing request instead of creating duplicate
+      existingReq.url = event.request.url;
+      existingReq.method = event.request.method;
+      existingReq.headers = event.request.headers;
+      existingReq.postData = event.request.postData;
+      existingReq.timestamp = timestamp;
+      return;
+    }
+
     networkRequests.push({
       requestId: event.requestId,
       url: event.request.url,
@@ -64,6 +92,9 @@ export async function setupNetworkMonitoring(page) {
       status: 'pending',
       documentURL: event.documentURL
     });
+
+    // Clean old requests to prevent unbounded memory growth
+    cleanOldNetworkRequests();
   });
 
   client.on('Network.responseReceived', (event) => {

package/index.js

@@ -54,6 +54,8 @@ import {getToolsFromGroups, getAllGroupNames} from './server/tool-groups.js';
 import {executeElementAction} from './utils/element-actions.js';
 // Import hints generator
 import {generateClickHints, generateNavigationHints} from './utils/hints-generator.js';
+// Import post-click diagnostics
+import {runPostClickDiagnostics, formatDiagnosticsForAI} from './utils/post-click-diagnostics.js';
 
 // Import Recorder modules
 // Note: injectRecorder removed - now using Chrome Extension
@@ -313,12 +315,22 @@ async function executeToolInternal(name, args) {
 
     if (name === "openBrowser") {
       const validatedArgs = schemas.OpenBrowserSchema.parse(args);
+
+      // Capture timestamp BEFORE opening for diagnostics
+      const beforeOpenTimestamp = Date.now();
+
       const page = await getOrCreatePage(validatedArgs.url);
       const title = await page.title();
 
+      // Run post-navigation diagnostics (same as navigateTo)
+      const diagnostics = await runPostClickDiagnostics(page, beforeOpenTimestamp);
+
       // Generate AI hints
       const hints = await generateNavigationHints(page, validatedArgs.url);
 
+      // Format diagnostics for output
+      const diagnosticsText = formatDiagnosticsForAI(diagnostics);
+
       // Check if extension is connected
       const extensionConnected = isExtensionConnected();
       const usedExistingChrome = isConnectedToExistingChrome();
@@ -329,11 +341,20 @@ async function executeToolInternal(name, args) {
         extensionNote = `\n\n⚠️ EXTENSION NOT CONNECTED\nConnected to existing Chrome - extension needs manual installation.\n${instructions.installSteps.join('\n')}\n\nAlternative: ${instructions.alternativeFix}`;
       }
 
+      let hintsText = '\n\n** AI HINTS **';
+      hintsText += `\nPage type: ${hints.pageType}`;
+      if (hints.availableActions.length > 0) {
+        hintsText += `\nAvailable actions: ${hints.availableActions.join(', ')}`;
+      }
+      if (hints.suggestedNext.length > 0) {
+        hintsText += `\nSuggested next: ${hints.suggestedNext.join('; ')}`;
+      }
+
       return {
         content: [
           {
             type: "text",
-            text: `Browser opened successfully!\nURL: ${validatedArgs.url}\nPage title: ${title}\n\nBrowser remains open for interaction.\n\n** AI HINTS **\nPage type: ${hints.pageType}\nAvailable actions: ${hints.availableActions.join(', ')}\nSuggested next: ${hints.suggestedNext.join('; ')}${extensionNote}`,
+            text: `Browser opened successfully!\nURL: ${validatedArgs.url}\nPage title: ${title}\n\nBrowser remains open for interaction.${hintsText}${diagnosticsText}${extensionNote}`,
           },
         ],
       };
@@ -380,6 +401,9 @@ async function executeToolInternal(name, args) {
           throw new Error(`Element not found: ${identifier}`);
         }
 
+        // Capture timestamp BEFORE click for error filtering
+        const beforeClickTimestamp = Date.now();
+
         // Try multiple click methods for better reliability
         try {
           // Method 1: Puppeteer click (most reliable for most cases)
@@ -395,11 +419,15 @@ async function executeToolInternal(name, args) {
             await element.evaluate(el => el.click());
           }
         }
-        await new Promise(resolve => setTimeout(resolve, validatedArgs.waitAfter || 1500));
 
-        // Generate AI hints after click
+        // NEW POST-CLICK PATTERN:
+        // 1. Run post-click diagnostics (waits 500ms, checks pending requests, collects errors)
+        const diagnostics = await runPostClickDiagnostics(page, beforeClickTimestamp);
+
+        // 2. Generate AI hints after click
         const hints = await generateClickHints(page, identifier);
 
+        // 3. Format output with hints and diagnostics
         let hintsText = '\n\n** AI HINTS **';
         if (hints.modalOpened) hintsText += '\nModal opened - interact with it or close';
         if (hints.newElements.length > 0) {
@@ -409,8 +437,11 @@ async function executeToolInternal(name, args) {
           hintsText += `\nSuggested next: ${hints.suggestedNext.join('; ')}`;
         }
 
+        // 4. Add diagnostics to output
+        const diagnosticsText = formatDiagnosticsForAI(diagnostics);
+
         const content = [
-          { type: "text", text: `Clicked: ${identifier}${hintsText}` }
+          { type: "text", text: `Clicked: ${identifier}${hintsText}${diagnosticsText}` }
         ];
 
         // Only add screenshot if requested
@@ -451,7 +482,7 @@ async function executeToolInternal(name, args) {
       // Use input model to handle the element appropriately
       const model = await getInputModel(element, page);
       const options = {
-        delay: validatedArgs.delay || 0,
+        delay: validatedArgs.delay !== undefined ? validatedArgs.delay : 30,
         clearFirst: validatedArgs.clearFirst !== undefined ? validatedArgs.clearFirst : true,
       };
 
@@ -1343,6 +1374,9 @@ async function executeToolInternal(name, args) {
         browserOpened = true;
       }
 
+      // Capture timestamp BEFORE navigation for diagnostics
+      const beforeNavTimestamp = Date.now();
+
       // Navigate to the new URL (skip if we just created page with this URL)
       if (!browserOpened) {
         await page.goto(validatedArgs.url, { waitUntil: validatedArgs.waitUntil || 'networkidle2' });
@@ -1350,17 +1384,32 @@ async function executeToolInternal(name, args) {
 
       const title = await page.title();
 
+      // Run post-navigation diagnostics (same as post-click)
+      const diagnostics = await runPostClickDiagnostics(page, beforeNavTimestamp);
+
       // Generate AI hints
       const hints = await generateNavigationHints(page, validatedArgs.url);
 
+      // Format diagnostics for output
+      const diagnosticsText = formatDiagnosticsForAI(diagnostics);
+
       const message = browserOpened
         ? `Browser opened and navigated to: ${validatedArgs.url}`
         : `Navigated to: ${validatedArgs.url}`;
 
+      let hintsText = '\n\n** AI HINTS **';
+      hintsText += `\nPage type: ${hints.pageType}`;
+      if (hints.availableActions.length > 0) {
+        hintsText += `\nAvailable actions: ${hints.availableActions.join(', ')}`;
+      }
+      if (hints.suggestedNext.length > 0) {
+        hintsText += `\nSuggested next: ${hints.suggestedNext.join('; ')}`;
+      }
+
       return {
         content: [{
           type: "text",
-          text: `${message}\nPage title: ${title}\n\n** AI HINTS **\nPage type: ${hints.pageType}\nAvailable actions: ${hints.availableActions.join(', ')}\nSuggested next: ${hints.suggestedNext.join('; ')}`
+          text: `${message}\nPage title: ${title}${hintsText}${diagnosticsText}`
         }],
       };
     }
@@ -2250,54 +2299,6 @@ Start coding now.`;
       };
     }
 
-    if (name === "getAllInteractiveElements") {
-      const validatedArgs = schemas.GetAllInteractiveElementsSchema.parse(args);
-      const page = await getLastOpenPage();
-
-      const elements = await page.evaluate((includeHidden, utilsCode) => {
-        eval(utilsCode);
-
-        const results = [];
-        const selector = 'button, a[href], input, select, textarea, [onclick], [role="button"], [tabindex]:not([tabindex="-1"])';
-
-        document.querySelectorAll(selector).forEach(el => {
-          const isVisible = el.offsetWidth > 0 && el.offsetHeight > 0;
-
-          if (!includeHidden && !isVisible) return;
-
-          const text = (el.textContent || el.value || el.getAttribute('aria-label') || el.placeholder || '').trim();
-
-          results.push({
-            selector: getUniqueSelectorInPage(el),
-            type: el.tagName.toLowerCase(),
-            text: text.substring(0, 100),
-            visible: isVisible,
-            attributes: {
-              id: el.id || null,
-              class: el.className || null,
-              role: el.getAttribute('role') || null,
-              type: el.type || null,
-            }
-          });
-        });
-
-        return results;
-      }, validatedArgs.includeHidden || false, elementFinderUtils);
-
-      return {
-        content: [{
-          type: 'text',
-          text: JSON.stringify({
-            count: elements.length,
-            elements,
-            hints: {
-              suggestion: 'Use these selectors directly with click, type, or other tools'
-            }
-          }, null, 2)
-        }]
-      };
-    }
-
     if (name === "findElementsByText") {
       const validatedArgs = schemas.FindElementsByTextSchema.parse(args);
       const page = await getLastOpenPage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrometools-mcp",
-  "version": "3.2.4",
+  "version": "3.2.10",
   "description": "MCP (Model Context Protocol) server for Chrome automation using Puppeteer. Persistent browser sessions, UI framework detection (MUI, Ant Design, etc.), Page Object support, visual testing, Figma comparison. Works seamlessly in WSL, Linux, macOS, and Windows.",
   "type": "module",
   "main": "index.js",

package/pom/apom-tree-converter.js

@@ -231,13 +231,26 @@ function buildAPOMTree(interactiveOnly = true) {
 
   /**
    * Check if element is visible
+   * More reliable check that works with position:fixed elements (Angular Material, etc.)
    */
   function isVisible(el) {
-    if (!el.offsetParent && el !== document.body) return false;
+    // Check dimensions first (works for fixed position elements)
+    if (el.offsetWidth === 0 || el.offsetHeight === 0) return false;
+
+    // Check computed styles
     const style = window.getComputedStyle(el);
-    return style.display !== 'none' &&
-           style.visibility !== 'hidden' &&
-           style.opacity !== '0';
+    if (style.display === 'none' ||
+        style.visibility === 'hidden' ||
+        style.opacity === '0') {
+      return false;
+    }
+
+    // For body element, always consider visible if dimensions > 0
+    if (el === document.body) return true;
+
+    // Additional check: element should be in viewport or have offsetParent
+    // This handles elements inside position:fixed containers (Angular Material)
+    return el.offsetParent !== null || style.position === 'fixed' || style.position === 'sticky';
   }
 
   /**
@@ -682,9 +695,17 @@ function buildAPOMTree(interactiveOnly = true) {
    * Excludes framework-specific dynamic attributes (React, Vue, Angular)
    */
   function generateSelector(element) {
-    // Use ID if available and unique
-    if (element.id && document.querySelectorAll(`#${element.id}`).length === 1) {
-      return `#${element.id}`;
+    // Use ID if available, valid (not starting with digit), and unique
+    // CSS selectors don't support IDs starting with digits (e.g., #301178 is invalid)
+    if (element.id && !/^[0-9]/.test(element.id)) {
+      try {
+        const selector = `#${CSS.escape(element.id)}`;
+        if (document.querySelectorAll(selector).length === 1) {
+          return selector;
+        }
+      } catch (e) {
+        // Invalid selector, continue to other strategies
+      }
     }
 
     // Try to find stable class name (excluding framework-specific dynamic classes)

package/server/tool-definitions.js

@@ -49,7 +49,7 @@ export const toolDefinitions = [
             id: { type: "string", description: "APOM element ID from analyzePage (e.g., 'input_20'). Either id or selector required." },
             selector: { type: "string", description: "CSS selector (e.g., '#email'). Either id or selector required." },
             text: { type: "string", description: "Text to type" },
-            delay: { type: "number", description: "Keystroke delay ms (default: 0)" },
+            delay: { type: "number", description: "Keystroke delay ms (default: 30)" },
             clearFirst: { type: "boolean", description: "Clear first (default: true)" },
           },
           required: ["text"],
@@ -503,16 +503,6 @@ export const toolDefinitions = [
           required: ["id"],
         },
       },
-      {
-        name: "getAllInteractiveElements",
-        description: "Get all interactive elements with selectors. For understanding available actions.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            includeHidden: { type: "boolean", description: "Include hidden (default: false)" },
-          },
-        },
-      },
       {
         name: "findElementsByText",
         description: "Find elements by visible text content and get their selectors. Use this INSTEAD of executeScript when you need to find elements. Returns working selectors that can be used with click/type tools. Can optionally perform actions directly.",

package/server/tool-groups.js

@@ -24,7 +24,6 @@ export const toolGroups = {
     'getViewport',
     'smartFindElement',
     'analyzePage',
-    'getAllInteractiveElements',
     'findElementsByText'
   ],
 

package/server/tool-schemas.js

@@ -29,7 +29,7 @@ export const TypeSchema = z.object({
   id: z.string().optional().describe("APOM element ID from analyzePage (e.g., 'input_20', 'input_33'). Mutually exclusive with selector."),
   selector: z.string().optional().describe("CSS selector for input element. Mutually exclusive with id."),
   text: z.string().describe("Text to type"),
-  delay: z.number().optional().describe("Delay between keystrokes in ms (default: 0)"),
+  delay: z.number().optional().describe("Delay between keystrokes in ms (default: 30)"),
   clearFirst: z.boolean().optional().describe("Clear field before typing (default: true)"),
 }).refine(data => (data.id && !data.selector) || (!data.id && data.selector), {
   message: "Either 'id' or 'selector' must be provided, but not both"
@@ -269,10 +269,6 @@ export const GetElementDetailsSchema = z.object({
   refresh: z.boolean().optional().describe("Force refresh of cached analysis (default: false)"),
 });
 
-export const GetAllInteractiveElementsSchema = z.object({
-  includeHidden: z.boolean().optional().describe("Include hidden elements (default: false)"),
-});
-
 export const FindElementsByTextSchema = z.object({
   text: z.string().describe("Text to search for in elements"),
   exact: z.boolean().optional().describe("Exact match only (default: false)"),

package/utils/post-click-diagnostics.js

@@ -0,0 +1,277 @@
+/**
+ * Post-Action Diagnostics
+ * Collects errors and waits for network requests after user actions (click, navigation, etc.)
+ */
+
+import { consoleLogs, networkRequests } from '../browser/page-manager.js';
+
+/**
+ * Wait for pending network requests to complete
+ * @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)
+ * @returns {Promise<{pendingFound: boolean, waitedMs: number, completedRequests: number, totalRequests: number}>}
+ */
+export async function waitForPendingRequests(beforeActionTimestamp, initialWaitMs = 500, maxWaitMs = 5000) {
+  const startTime = Date.now();
+
+  // Step 1: Wait initial period to let requests start
+  await new Promise(resolve => setTimeout(resolve, initialWaitMs));
+
+  // Step 2: Get requests that started AFTER action
+  const getPostActionRequests = () => {
+    const cutoffDate = new Date(beforeActionTimestamp).toISOString();
+    return networkRequests.filter(req => req.timestamp >= cutoffDate);
+  };
+
+  // Step 3: Check for pending requests (from post-action requests)
+  const checkPending = () => {
+    return getPostActionRequests().filter(req => 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
+    }
+  }
+
+  const finalRequests = getPostActionRequests();
+  const completedRequests = finalRequests.filter(req => req.status === 'completed' || (typeof req.status === 'number'));
+  const pendingRequests = pending.map(req => ({
+    url: req.url,
+    method: req.method,
+    timestamp: req.timestamp
+  }));
+
+  return {
+    pendingFound: initialPendingCount > 0,
+    waitedMs: Date.now() - startTime,
+    completedRequests: completedRequests.length,
+    stillPending: pending.length,
+    pendingRequests: pendingRequests,
+    totalRequests: finalRequests.length
+  };
+}
+
+/**
+ * Collect errors from console logs and network requests
+ * @param {number} sinceTimestamp - Only collect errors after this timestamp (default: collect recent errors)
+ * @param {number} maxConsoleErrors - Maximum console errors to return (default: 15)
+ * @param {number} maxNetworkErrors - Maximum network errors to return (default: 15)
+ * @returns {Object} Object with consoleErrors and networkErrors arrays
+ */
+export function collectErrors(sinceTimestamp = null, maxConsoleErrors = 15, maxNetworkErrors = 15) {
+  const errors = {
+    consoleErrors: [],
+    networkErrors: [],
+    jsExceptions: [],
+    consoleErrorsOmitted: 0,
+    networkErrorsOmitted: 0
+  };
+
+  // If no timestamp provided, look back 10 seconds
+  const cutoffTime = sinceTimestamp || (Date.now() - 10000);
+  const cutoffDate = new Date(cutoffTime).toISOString();
+
+  // Collect console errors (with limit)
+  let consoleErrorCount = 0;
+  consoleLogs.forEach(log => {
+    if (log.type === 'error') {
+      // Check if error is recent
+      const logTime = new Date(log.timestamp || 0).toISOString();
+      if (!sinceTimestamp || logTime >= cutoffDate) {
+        if (consoleErrorCount < maxConsoleErrors) {
+          errors.consoleErrors.push({
+            message: log.text,
+            timestamp: log.timestamp,
+            location: log.location || 'unknown'
+          });
+        } else {
+          errors.consoleErrorsOmitted++;
+        }
+        consoleErrorCount++;
+      }
+    }
+  });
+
+  // Collect network errors (failed requests, with limit)
+  let networkErrorCount = 0;
+  networkRequests.forEach(req => {
+    if (req.status === 'failed' || (typeof req.status === 'number' && req.status >= 400)) {
+      // Check if error is recent
+      const reqTime = req.timestamp;
+      if (!sinceTimestamp || reqTime >= cutoffDate) {
+        if (networkErrorCount < maxNetworkErrors) {
+          errors.networkErrors.push({
+            url: req.url,
+            method: req.method,
+            status: req.status,
+            statusText: req.statusText,
+            errorText: req.errorText,
+            timestamp: req.timestamp
+          });
+        } else {
+          errors.networkErrorsOmitted++;
+        }
+        networkErrorCount++;
+      }
+    }
+  });
+
+  return errors;
+}
+
+/**
+ * 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)
+ * @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);
+
+  // 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 chrome error page (ERR_CONNECTION_REFUSED, etc.)
+  const url = page.url();
+  let chromeErrorInfo = null;
+  if (url.startsWith('chrome-error://')) {
+    chromeErrorInfo = await page.evaluate(() => {
+      const errorCode = document.querySelector('#error-code');
+      const suggestionText = document.querySelector('.suggestions');
+      return {
+        errorCode: errorCode?.textContent || 'UNKNOWN_ERROR',
+        suggestion: suggestionText?.textContent?.trim() || 'Connection failed'
+      };
+    }).catch(() => ({ errorCode: 'PAGE_LOAD_ERROR', suggestion: 'Navigation failed' }));
+  }
+
+  // Collect errors that occurred after the action (including errors from just-completed requests)
+  const errors = collectErrors(beforeActionTimestamp);
+
+  // Combine into diagnostics report
+  const diagnostics = {
+    networkActivity: {
+      hadPendingRequests: networkInfo.pendingFound,
+      completedRequests: networkInfo.completedRequests,
+      stillPending: networkInfo.stillPending,
+      pendingRequests: networkInfo.pendingRequests,
+      totalRequests: networkInfo.totalRequests,
+      waitedMs: networkInfo.waitedMs
+    },
+    chromeError: chromeErrorInfo,
+    errors: {
+      consoleErrors: errors.consoleErrors,
+      networkErrors: errors.networkErrors,
+      consoleErrorsOmitted: errors.consoleErrorsOmitted,
+      networkErrorsOmitted: errors.networkErrorsOmitted,
+      totalErrors: errors.consoleErrors.length + errors.networkErrors.length
+    },
+    hasErrors: (errors.consoleErrors.length + errors.networkErrors.length) > 0 || chromeErrorInfo !== null
+  };
+
+  return diagnostics;
+}
+
+/**
+ * Format diagnostics for AI-friendly output
+ * @param {Object} diagnostics - Diagnostics object from runPostClickDiagnostics
+ * @returns {string} Formatted text for AI
+ */
+export function formatDiagnosticsForAI(diagnostics) {
+  let output = '\n\n** POST-ACTION DIAGNOSTICS **';
+
+  // Chrome error page (connection refused, DNS failed, etc.)
+  if (diagnostics.chromeError) {
+    output += `\n\n🔴 CRITICAL: Navigation Failed`;
+    output += `\n   Error: ${diagnostics.chromeError.errorCode}`;
+    output += `\n   Suggestion: ${diagnostics.chromeError.suggestion}`;
+    output += `\n   → Backend likely not running or unreachable`;
+  }
+
+  // Network activity
+  const netActivity = diagnostics.networkActivity;
+  if (netActivity.totalRequests > 0) {
+    const errorCount = diagnostics.errors.networkErrors.length;
+    const successCount = netActivity.completedRequests - errorCount;
+
+    // Show warning if there are pending requests 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)`;
+    }
+  } else {
+    output += '\n✓ No network requests triggered';
+  }
+
+  // Errors
+  if (diagnostics.errors.totalErrors > 0) {
+    output += `\n\n⚠️  ERRORS DETECTED (${diagnostics.errors.totalErrors} total):`;
+
+    // Console errors
+    if (diagnostics.errors.consoleErrors.length > 0) {
+      output += `\n\nJavaScript Console Errors (${diagnostics.errors.consoleErrors.length}):`;
+      diagnostics.errors.consoleErrors.forEach((err, idx) => {
+        output += `\n  ${idx + 1}. ${err.message}`;
+        if (err.location && err.location !== 'unknown') {
+          output += ` [${err.location}]`;
+        }
+      });
+      // Show if some errors were omitted
+      if (diagnostics.errors.consoleErrorsOmitted > 0) {
+        output += `\n  ... and ${diagnostics.errors.consoleErrorsOmitted} more console error(s) (omitted to prevent spam)`;
+      }
+    }
+
+    // Network errors
+    if (diagnostics.errors.networkErrors.length > 0) {
+      output += `\n\nNetwork Errors (${diagnostics.errors.networkErrors.length}):`;
+      diagnostics.errors.networkErrors.forEach((err, idx) => {
+        output += `\n  ${idx + 1}. ${err.method} ${err.url}`;
+        output += `\n     Status: ${err.status}${err.statusText ? ' ' + err.statusText : ''}`;
+        if (err.errorText) {
+          output += `\n     Error: ${err.errorText}`;
+        }
+      });
+      // Show if some errors were omitted
+      if (diagnostics.errors.networkErrorsOmitted > 0) {
+        output += `\n  ... and ${diagnostics.errors.networkErrorsOmitted} more network error(s) (omitted to prevent spam)`;
+      }
+    }
+  } else {
+    output += '\n✓ No errors detected';
+  }
+
+  // Pending requests (if any still running after timeout)
+  if (netActivity.stillPending > 0 && netActivity.pendingRequests.length > 0) {
+    output += `\n\n⏳ PENDING REQUESTS (${netActivity.stillPending} still running):`;
+    netActivity.pendingRequests.forEach((req, idx) => {
+      output += `\n  ${idx + 1}. ${req.method} ${req.url}`;
+      const elapsed = Date.now() - new Date(req.timestamp).getTime();
+      output += `\n     Running for: ${elapsed}ms`;
+    });
+    output += `\n\n💡 Suggestion: These requests may be slow or hanging`;
+    output += `\n   → Check backend performance or network connectivity`;
+    output += `\n   → Consider using getNetworkRequest() to monitor progress`;
+  }
+
+  return output;
+}