@democratize-quality/mcp-server 1.0.0

package/src/tools/browser/type.js

@@ -0,0 +1,174 @@
+const ToolBase = require('../base/ToolBase');
+const browserService = require('../../services/browserService');
+
+/**
+ * Browser Type Tool
+ * Types text into a specific input field in the browser with Playwright-style locators
+ */
+class BrowserTypeTool extends ToolBase {
+    static definition = {
+        name: "browser_type",
+        description: "Types text into a specific input field in the browser.",
+        input_schema: {
+            type: "object",
+            properties: {
+                browserId: {
+                    type: "string",
+                    description: "The ID of the browser instance."
+                },
+                locatorType: {
+                    type: "string",
+                    enum: ["css", "xpath", "text", "role", "label", "placeholder", "testId", "altText"],
+                    default: "css",
+                    description: "The type of locator to use"
+                },
+                locatorValue: {
+                    type: "string",
+                    description: "The locator value (CSS selector, XPath, text content, etc.)"
+                },
+                text: {
+                    type: "string",
+                    description: "The text to type into the input field."
+                },
+                // Keep backward compatibility
+                selector: {
+                    type: "string",
+                    description: "The CSS selector of the input field (deprecated, use locatorType and locatorValue instead)."
+                },
+                options: {
+                    type: "object",
+                    properties: {
+                        timeout: {
+                            type: "number",
+                            default: 30000,
+                            description: "Timeout in milliseconds"
+                        },
+                        delay: {
+                            type: "number",
+                            default: 0,
+                            description: "Delay between keystrokes in milliseconds"
+                        },
+                        clear: {
+                            type: "boolean",
+                            default: true,
+                            description: "Clear the field before typing"
+                        },
+                        noWaitAfter: {
+                            type: "boolean",
+                            default: false,
+                            description: "Do not wait for navigation after typing"
+                        }
+                    },
+                    description: "Additional typing options"
+                }
+            },
+            anyOf: [
+                { required: ["browserId", "locatorType", "locatorValue", "text"] },
+                { required: ["browserId", "selector", "text"] }
+            ]
+        },
+        output_schema: {
+            type: "object",
+            properties: {
+                success: { type: "boolean", description: "Indicates if the typing was successful." },
+                locatorType: { type: "string", description: "The locator type that was used." },
+                locatorValue: { type: "string", description: "The locator value that was used." },
+                text: { type: "string", description: "The text that was typed." },
+                browserId: { type: "string", description: "The browser instance ID that was used." },
+                elementFound: { type: "boolean", description: "Whether the element was found." },
+                message: { type: "string", description: "Success or error message." }
+            },
+            required: ["success", "browserId"]
+        }
+    };
+
+    async execute(parameters) {
+        const { browserId, locatorType, locatorValue, selector, text, options = {} } = parameters;
+
+        // Handle backward compatibility
+        let finalLocatorType, finalLocatorValue;
+        if (selector) {
+            finalLocatorType = "css";
+            finalLocatorValue = selector;
+        } else {
+            finalLocatorType = locatorType || "css";
+            finalLocatorValue = locatorValue;
+        }
+
+        console.error(`[BrowserTypeTool] Typing in browser ${browserId} with locator: ${finalLocatorType}="${finalLocatorValue}"`);
+
+        try {
+            // Convert Playwright-style locator to appropriate format for browser service
+            const elementSelector = this.convertLocatorToSelector(finalLocatorType, finalLocatorValue);
+            
+            await browserService.typeIntoElement(browserId, elementSelector, text, options);
+            
+            console.error(`[BrowserTypeTool] Successfully typed in browser: ${browserId}`);
+            
+            return { 
+                success: true, 
+                browserId: browserId,
+                locatorType: finalLocatorType,
+                locatorValue: finalLocatorValue,
+                text: text,
+                elementFound: true,
+                message: `Successfully typed "${text}" into element with ${finalLocatorType} locator: ${finalLocatorValue}`
+            };
+        } catch (error) {
+            console.error(`[BrowserTypeTool] Failed to type in element:`, error.message);
+            
+            return {
+                success: false,
+                browserId: browserId,
+                locatorType: finalLocatorType,
+                locatorValue: finalLocatorValue,
+                text: text,
+                elementFound: false,
+                message: `Failed to type into element: ${error.message}`
+            };
+        }
+    }
+
+    /**
+     * Convert Playwright-style locator to CSS selector or XPath
+     */
+    convertLocatorToSelector(locatorType, locatorValue) {
+        switch (locatorType) {
+            case "css":
+                return locatorValue;
+            
+            case "xpath":
+                return locatorValue;
+            
+            case "text":
+                // Convert text locator to XPath for input elements
+                return `//input[contains(@placeholder, "${locatorValue}")] | //input[contains(@value, "${locatorValue}")] | //textarea[contains(text(), "${locatorValue}")] | //label[contains(text(), "${locatorValue}")]/following-sibling::input | //label[contains(text(), "${locatorValue}")]/following::input[1]`;
+            
+            case "role":
+                // Convert role locator to CSS attribute selector
+                return `[role="${locatorValue}"]`;
+            
+            case "label":
+                // Convert label locator to XPath for label association
+                return `//input[@aria-label="${locatorValue}"] | //input[@id=//label[contains(text(), "${locatorValue}")]/@for] | //label[contains(text(), "${locatorValue}")]/following-sibling::input | //label[contains(text(), "${locatorValue}")]/following::input[1]`;
+            
+            case "placeholder":
+                // Convert placeholder locator to CSS attribute selector
+                return `[placeholder="${locatorValue}"]`;
+            
+            case "testId":
+                // Convert test ID to CSS attribute selector (assuming data-testid)
+                return `[data-testid="${locatorValue}"]`;
+            
+            case "altText":
+                // Convert alt text to CSS attribute selector (less common for input fields)
+                return `[alt="${locatorValue}"]`;
+            
+            default:
+                // Default to CSS selector
+                return locatorValue;
+        }
+    }
+}
+
+module.exports = BrowserTypeTool;

package/src/tools/index.js

@@ -0,0 +1,95 @@
+const ToolRegistry = require('./base/ToolRegistry');
+const path = require('path');
+
+/**
+ * Initialize and configure the tool registry
+ * This file serves as the main entry point for the tools system
+ */
+
+// Create the global tool registry instance
+const toolRegistry = new ToolRegistry();
+
+/**
+ * Initialize the tool registry by discovering and loading all tools
+ * @param {boolean} debugMode - Whether to enable debug logging
+ * @returns {Promise<ToolRegistry>} - The initialized tool registry
+ */
+async function initializeTools(debugMode = false) {
+    if (debugMode) {
+        console.error('[Tools] Initializing tool system...');
+    }
+    
+    try {
+        // Get the tools directory path
+        const toolsDir = path.join(__dirname);
+        
+        // Discover and load all tools
+        await toolRegistry.discoverTools(toolsDir, debugMode);
+        
+        // Log registry statistics
+        const stats = toolRegistry.getStats();
+        console.error(`[Tools] Tool system initialized successfully:`);
+        console.error(`[Tools] - Total tools: ${stats.total_tools}`);
+        if (debugMode) {
+            console.error(`[Tools] - Available tools: ${stats.tool_names.join(', ')}`);
+        }
+        
+        return toolRegistry;
+        
+    } catch (error) {
+        console.error('[Tools] Failed to initialize tool system:', error.message);
+        throw error;
+    }
+}
+
+/**
+ * Get the tool registry instance
+ * @returns {ToolRegistry} - The tool registry instance
+ */
+function getToolRegistry() {
+    return toolRegistry;
+}
+
+/**
+ * Get all tool definitions for MCP tools/list response
+ * @returns {Array} - Array of tool definitions
+ */
+function getToolDefinitions() {
+    return toolRegistry.getDefinitions();
+}
+
+/**
+ * Execute a tool by name
+ * @param {string} toolName - The name of the tool to execute
+ * @param {object} parameters - The parameters to pass to the tool
+ * @returns {Promise<object>} - The tool execution result
+ */
+async function executeTool(toolName, parameters) {
+    return await toolRegistry.executeTool(toolName, parameters);
+}
+
+/**
+ * Check if a tool is available
+ * @param {string} toolName - The name of the tool to check
+ * @returns {boolean} - True if the tool is available
+ */
+function isToolAvailable(toolName) {
+    return toolRegistry.hasTool(toolName);
+}
+
+/**
+ * Get list of available tool names
+ * @returns {Array<string>} - Array of available tool names
+ */
+function getAvailableTools() {
+    return toolRegistry.getToolNames();
+}
+
+module.exports = {
+    initializeTools,
+    getToolRegistry,
+    getToolDefinitions,
+    executeTool,
+    isToolAvailable,
+    getAvailableTools
+};

package/src/utils/browserHelpers.js

@@ -0,0 +1,83 @@
+const path = require('path'); // Ensure path is imported if needed for other helpers
+
+/**
+ * Finds a DOM node by selector (CSS or XPath) and returns its NodeId.
+ * @param {object} cdpClient - The Chrome DevTools Protocol client.
+ * @param {string} selectorType - 'css' or 'xpath'.
+ * @param {string} selectorValue - The CSS selector or XPath string.
+ * @returns {Promise<number|null>} - The NodeId of the found element, or null if not found.
+ */
+async function findNodeBySelector(cdpClient, selectorType, selectorValue) {
+    const { DOM, Runtime } = cdpClient;
+    let nodeId = null;
+
+    try {
+        const rootNode = await DOM.getDocument({ depth: 1 }); // Get root document node
+
+        if (selectorType === 'css') {
+            const result = await DOM.querySelector({
+                nodeId: rootNode.root.nodeId,
+                selector: selectorValue
+            });
+            nodeId = result.nodeId;
+        } else if (selectorType === 'xpath') {
+            // Use Runtime.evaluate to execute XPath in the browser context
+            const expression = `document.evaluate("${selectorValue}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue`;
+            const { result: jsResult } = await Runtime.evaluate({ expression: expression, returnByValue: false });
+
+            if (jsResult.objectId) {
+                // Convert the JS objectId (remote object) back to a DOM NodeId
+                const { nodeId: resolvedNodeId } = await DOM.requestNode({ objectId: jsResult.objectId });
+                nodeId = resolvedNodeId;
+            }
+        } else {
+            console.warn(`[findNodeBySelector] Unsupported selector type: ${selectorType}`);
+        }
+
+        return nodeId;
+
+    } catch (error) {
+        console.error(`[findNodeBySelector] Error finding node by selector (${selectorType}: ${selectorValue}):`, error.message);
+        return null;
+    }
+}
+
+/**
+ * Scrolls an element into view and calculates its center coordinates for clicking.
+ * @param {object} cdpClient - The Chrome DevTools Protocol client.
+ * @param {number} nodeId - The NodeId of the element to interact with.
+ * @returns {Promise<{x: number, y: number}|null>} - Object with x, y coordinates, or null if error.
+ */
+async function getElementClickCoordinates(cdpClient, nodeId) {
+    const { DOM } = cdpClient; // Page is not directly used here
+    try {
+        // Scroll the element into view first
+        await DOM.scrollIntoViewIfNeeded({ nodeId: nodeId });
+        // Give browser a moment to render after scroll
+        await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for rendering
+
+        // Get the box model to find coordinates
+        const { model } = await DOM.getBoxModel({ nodeId: nodeId });
+
+        if (!model) {
+            console.error(`[getElementClickCoordinates] No box model found for nodeId: ${nodeId}`);
+            return null;
+        }
+
+        // Calculate center coordinates based on the content box
+        // model.content is an array of 8 numbers: [x1, y1, x2, y2, x3, y3, x4, y4]
+        // representing the four corners of the content box (top-left, top-right, bottom-right, bottom-left)
+        const centerX = (model.content[0] + model.content[2]) / 2;
+        const centerY = (model.content[1] + model.content[5]) / 2;
+
+        return { x: centerX, y: centerY };
+    } catch (error) {
+        console.error(`[getElementClickCoordinates] Error getting element coordinates for nodeId ${nodeId}:`, error.message);
+        return null;
+    }
+}
+
+module.exports = {
+    findNodeBySelector,
+    getElementClickCoordinates
+};