chrometools-mcp 3.2.4 → 3.2.6

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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/index.js

@@ -451,7 +451,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,
       };
 
@@ -2250,54 +2250,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.6",
   "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)"),