chrometools-mcp 3.3.8 → 3.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrometools-mcp",
-  "version": "3.3.8",
+  "version": "3.3.9",
   "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",
@@ -48,6 +48,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.20.2",
     "jimp": "^0.22.12",
+    "js-yaml": "^4.1.1",
     "pixelmatch": "^7.1.0",
     "puppeteer": "^24.27.0",
     "ws": "^8.18.0",

package/pom/apom-tree-converter.js

@@ -354,9 +354,9 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
         // tabindex (except -1)
         (el.hasAttribute('tabindex') && el.getAttribute('tabindex') !== '-1') ||
         // contenteditable
-        el.getAttribute('contenteditable') === 'true'
-        // Note: We skip event listener check here for performance
-        // as querySelectorAll can return thousands of elements
+        el.getAttribute('contenteditable') === 'true' ||
+        // Click event listeners (Angular, React, Vue) via monkey-patched addEventListener tracker
+        hasExplicitClickBinding(el)
       );
 
       if (isInteractive && isVisible(el)) {
@@ -597,27 +597,6 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
     };
   }
 
-  /**
-   * Check if element has click event listeners
-   */
-  function hasClickListener(element) {
-    try {
-      // Check for getEventListeners (available in Chrome DevTools context)
-      if (typeof getEventListeners === 'function') {
-        const listeners = getEventListeners(element);
-        return listeners && listeners.click && listeners.click.length > 0;
-      }
-
-      // Fallback: check for common event listener markers
-      // Note: This is not 100% reliable but catches common cases
-      return element._events?.click ||
-             element.__listeners?.click ||
-             element.__eventListeners?.click;
-    } catch (e) {
-      return false;
-    }
-  }
-
   /**
    * Check if tag is a custom element (Web Component / Framework component)
    */
@@ -732,8 +711,8 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
       return { isInteractive: true, reason: 'cursor-pointer' };
     }
 
-    // 6. Elements with click event listeners
-    if (hasClickListener(element)) {
+    // 6. Elements with click event listeners (framework handlers: Angular, React, Vue)
+    if (hasExplicitClickBinding(element)) {
       return { isInteractive: true, reason: 'event-listener' };
     }
 

package/recorder/page-object-generator.js

@@ -33,6 +33,19 @@ export async function generatePageObject(page, options = {}) {
   // Generate code based on framework
   const code = await generateCode(finalClassName, elementGroups, pageAnalysis, framework, includeComments);
 
+  // Build structured elements metadata for POM integration
+  const allElements = Object.values(elementGroups).flat();
+  const uniqueElements = deduplicateElements(allElements);
+  const lang = framework.includes('python') ? 'python' : framework.includes('java') ? 'java' : 'typescript';
+  const elements = uniqueElements.map(el => ({
+    name: sanitizeIdentifier(el.name, lang),
+    selector: el.selector,
+    tag: el.tag,
+    type: el.type,
+    methodName: generateMethodName(el, framework),
+    methodType: getMethodType(el)
+  }));
+
   return {
     success: true,
     className: finalClassName,
@@ -41,7 +54,8 @@ export async function generatePageObject(page, options = {}) {
     elementCount: pageAnalysis.elements.length,
     groups: Object.keys(elementGroups),
     framework,
-    code
+    code,
+    elements
   };
 }
 
@@ -728,6 +742,36 @@ function generateSeleniumJavaActionMethods(lines, elements) {
   });
 }
 
+/**
+ * Helper: Determine method type for element
+ * @param {Object} el - Element info
+ * @returns {string} - "fill" | "click" | "select"
+ */
+function getMethodType(el) {
+  if (el.tag === 'select') return 'select';
+  if (el.tag === 'input' || el.tag === 'textarea') return 'fill';
+  return 'click';
+}
+
+/**
+ * Helper: Generate method name for element based on framework
+ * @param {Object} el - Element info
+ * @param {string} framework - Target framework
+ * @returns {string} - Method name (e.g., "fillUsername", "clickSubmit", "fill_username")
+ */
+function generateMethodName(el, framework) {
+  const methodType = getMethodType(el);
+  const isPython = framework.includes('python');
+  const lang = isPython ? 'python' : framework.includes('java') ? 'java' : 'typescript';
+  const name = sanitizeIdentifier(el.name, lang);
+
+  if (isPython) {
+    return `${methodType}_${name}`;
+  }
+  // TypeScript/Java: camelCase
+  return `${methodType}${capitalize(name)}`;
+}
+
 /**
  * Helper: Capitalize first letter
  */

package/server/tool-definitions.js

@@ -238,7 +238,7 @@ export const toolDefinitions = [
       },
       {
         name: "drag",
-        description: "Drag element in any direction. For maps, charts, SVG, canvas, sliders. Use scrollHorizontal for scrollbars.",
+        description: "Drag element in any direction. For maps, charts, SVG, canvas, sliders. Use mode='synthetic' for JS libraries (frappe-gantt, jQuery UI). Use scrollHorizontal for scrollbars.",
         inputSchema: {
           type: "object",
           properties: {
@@ -246,6 +246,7 @@ export const toolDefinitions = [
             direction: { type: "string", enum: ["up", "down", "left", "right", "up-left", "up-right", "down-left", "down-right"], description: "Drag direction" },
             distance: { type: "number", description: "Distance in pixels (default: 100)" },
             duration: { type: "number", description: "Drag duration in ms (default: 500)" },
+            mode: { type: "string", enum: ["native", "synthetic"], description: "Drag mode: 'native' (default, faster) or 'synthetic' (better for JS libraries)" },
           },
           required: ["selector", "direction"],
         },
@@ -685,7 +686,7 @@ export const toolDefinitions = [
       },
       {
         name: "exportScenarioAsCode",
-        description: "Export scenario as test code for NEW file. Cleans unstable selectors, optionally generates Page Object. Use appendScenarioToFile for existing files.",
+        description: "Export scenario as test code for NEW file. Supports Page Object integration: 'generate-integrated' generates POM + test using it, 'use-existing' generates test using existing POM file. Use appendScenarioToFile for existing files.",
         inputSchema: {
           type: "object",
           properties: {
@@ -708,19 +709,28 @@ export const toolDefinitions = [
             },
             generatePageObject: {
               type: "boolean",
-              description: "Also generate Page Object class for the page (default: false)"
+              description: "Also generate Page Object class for the page (default: false). Legacy - use pageObjectMode instead."
             },
             pageObjectClassName: {
               type: "string",
               description: "Page Object class name (optional, auto-generated if not provided)"
             },
+            pageObjectMode: {
+              type: "string",
+              enum: ["none", "generate", "generate-integrated", "use-existing"],
+              description: "POM integration: 'none' (default), 'generate' (separate POM), 'generate-integrated' (POM + test using it), 'use-existing' (test uses existing POM file)"
+            },
+            pageObjectFile: {
+              type: "string",
+              description: "Path to existing POM file (required for 'use-existing' mode)"
+            },
           },
           required: ["scenarioName", "language"],
         },
       },
       {
         name: "appendScenarioToFile",
-        description: "Append scenario as test code to EXISTING file. Cleans unstable selectors, optionally generates Page Object. Use exportScenarioAsCode for new files.",
+        description: "Append scenario as test code to EXISTING file. Supports Page Object integration: 'generate-integrated' generates POM + test using it, 'use-existing' generates test using existing POM file. Use exportScenarioAsCode for new files.",
         inputSchema: {
           type: "object",
           properties: {
@@ -760,7 +770,16 @@ export const toolDefinitions = [
             },
             generatePageObject: {
               type: "boolean",
-              description: "Also generate Page Object class for the page (default: false)"
+              description: "Also generate Page Object class for the page (default: false). Legacy - use pageObjectMode instead."
+            },
+            pageObjectMode: {
+              type: "string",
+              enum: ["none", "generate", "generate-integrated", "use-existing"],
+              description: "POM integration: 'none' (default), 'generate' (separate POM), 'generate-integrated' (POM + test using it), 'use-existing' (test uses existing POM file)"
+            },
+            pageObjectFile: {
+              type: "string",
+              description: "Path to existing POM file (required for 'use-existing' mode)"
             },
             pageObjectClassName: {
               type: "string",
@@ -821,4 +840,34 @@ export const toolDefinitions = [
           required: ["tab"],
         },
       },
+      {
+        name: "loadSwagger",
+        description: "Load and parse OpenAPI/Swagger spec from URL or local file. Returns structured summary: endpoints, schemas, auth types, base URL. Supports both OpenAPI 2.0 (Swagger) and 3.x, JSON and YAML formats. Use this first to understand an API before generating models or client code.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            source: { type: "string", description: "URL (http/https) or local file path to swagger.json / openapi.yaml" },
+            format: { type: "string", enum: ["auto", "json", "yaml"], description: "Spec format. 'auto' (default) detects from extension/content" },
+          },
+          required: ["source"],
+        },
+      },
+      {
+        name: "generateApiModels",
+        description: "Generate typed data models from OpenAPI/Swagger spec. Creates TypeScript interfaces/types or Python dataclasses/pydantic/TypedDict from API schemas. Handles $ref resolution, enums, allOf/oneOf, nested objects. Use after loadSwagger to generate model files.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            source: { type: "string", description: "URL or file path to OpenAPI spec" },
+            language: { type: "string", enum: ["typescript", "python"], description: "Target language for models" },
+            format: { type: "string", enum: ["auto", "json", "yaml"], description: "Spec format (default: auto)" },
+            style: { type: "string", enum: ["interface", "type"], description: "TypeScript only: 'interface' (default) or 'type' aliases" },
+            pythonStyle: { type: "string", enum: ["dataclass", "pydantic", "typeddict"], description: "Python only: 'dataclass' (default), 'pydantic', or 'typeddict'" },
+            includeEnums: { type: "boolean", description: "Generate enum types (default: true)" },
+            includeValidation: { type: "boolean", description: "Include validation constraints as comments (default: false)" },
+            schemas: { type: "array", items: { type: "string" }, description: "Generate only these schemas (default: all)" },
+          },
+          required: ["source", "language"],
+        },
+      },
 ];

package/server/tool-schemas.js

@@ -61,6 +61,7 @@ export const DragSchema = z.object({
     .describe("Direction to drag: vertical (up, down), horizontal (left, right), or diagonal (up-left, up-right, down-left, down-right)"),
   distance: z.number().min(1).optional().describe("Distance to drag in pixels (default: 100)"),
   duration: z.number().min(100).optional().describe("Duration of drag operation in milliseconds (default: 500)"),
+  mode: z.enum(['native', 'synthetic']).optional().describe("Drag mode: 'native' uses Puppeteer mouse API (default, faster), 'synthetic' dispatches DOM events (better compatibility with JS libraries like frappe-gantt, jQuery UI)"),
 });
 
 export const ScrollHorizontalSchema = z.object({
@@ -341,6 +342,10 @@ export const ExportScenarioAsCodeSchema = z.object({
   includeComments: z.boolean().optional().describe("Include descriptive comments (default: true)"),
   generatePageObject: z.boolean().optional().describe("Also generate Page Object class for the page (default: false)"),
   pageObjectClassName: z.string().optional().describe("Page Object class name (optional, auto-generated if not provided)"),
+  pageObjectMode: z.enum(['none', 'generate', 'generate-integrated', 'use-existing']).optional()
+    .describe("POM integration: 'none' (default), 'generate' (separate POM, current behavior), 'generate-integrated' (POM + test using it), 'use-existing' (test uses existing POM file)"),
+  pageObjectFile: z.string().optional()
+    .describe("Path to existing POM file (for 'use-existing' mode)"),
   directory: z.string().optional().describe("Directory where scenarios are stored (optional)"),
   appendToFile: z.string().optional().describe("Path to existing test file to append to (enables append mode)"),
   testName: z.string().optional().describe("Override test name (default: from scenario name)"),
@@ -365,3 +370,27 @@ export const SwitchTabSchema = z.object({
   ]).describe("Tab identifier: index number or URL pattern to match"),
 });
 
+// API / Swagger tools
+export const LoadSwaggerSchema = z.object({
+  source: z.string().describe("URL (http/https) or local file path to swagger.json / openapi.yaml"),
+  format: z.enum(['auto', 'json', 'yaml']).optional()
+    .describe("Spec format. 'auto' (default) detects from extension/content"),
+});
+
+export const GenerateApiModelsSchema = z.object({
+  source: z.string().describe("URL or file path to OpenAPI spec"),
+  language: z.enum(['typescript', 'python']).describe("Target language for models"),
+  format: z.enum(['auto', 'json', 'yaml']).optional()
+    .describe("Spec format (default: auto)"),
+  style: z.enum(['interface', 'type']).optional()
+    .describe("TypeScript only: 'interface' (default) or 'type' aliases"),
+  pythonStyle: z.enum(['dataclass', 'pydantic', 'typeddict']).optional()
+    .describe("Python only: 'dataclass' (default), 'pydantic', or 'typeddict'"),
+  includeEnums: z.boolean().optional()
+    .describe("Generate enum types (default: true)"),
+  includeValidation: z.boolean().optional()
+    .describe("Include validation constraints as comments (default: false)"),
+  schemas: z.array(z.string()).optional()
+    .describe("Generate only these schemas (default: all)"),
+});
+