@democratize-quality/mcp-server 1.0.0

package/src/tools/browser/advanced/browser-keyboard.js

@@ -0,0 +1,343 @@
+const ToolBase = require('../../base/ToolBase');
+const browserService = require('../../../services/browserService');
+
+/**
+ * Enhanced Keyboard Tool - Provides comprehensive keyboard interactions
+ * Inspired by Playwright MCP keyboard capabilities
+ */
+class BrowserKeyboardTool extends ToolBase {
+    static definition = {
+        name: "browser_keyboard",
+        description: "Perform keyboard actions including typing, key presses, and keyboard shortcuts. Supports special keys and modifier combinations.",
+        input_schema: {
+            type: "object",
+            properties: {
+                browserId: { 
+                    type: "string", 
+                    description: "The ID of the browser instance" 
+                },
+                action: {
+                    type: "string",
+                    enum: ["type", "press", "down", "up", "shortcut"],
+                    description: "The keyboard action to perform"
+                },
+                text: {
+                    type: "string",
+                    description: "Text to type (for 'type' action)"
+                },
+                key: {
+                    type: "string",
+                    description: "Key to press (for 'press', 'down', 'up' actions). Examples: 'Enter', 'Tab', 'ArrowLeft', 'F1'"
+                },
+                shortcut: {
+                    type: "string",
+                    description: "Keyboard shortcut (for 'shortcut' action). Examples: 'Ctrl+C', 'Cmd+V', 'Ctrl+Shift+I'"
+                },
+                target: {
+                    type: "object",
+                    properties: {
+                        selector: { 
+                            type: "string", 
+                            description: "CSS selector of element to focus before typing (optional)" 
+                        }
+                    },
+                    description: "Target element to focus before keyboard action"
+                },
+                delay: {
+                    type: "number",
+                    default: 0,
+                    description: "Delay between keystrokes in milliseconds"
+                },
+                modifiers: {
+                    type: "array",
+                    items: { type: "string", enum: ["ctrl", "shift", "alt", "meta"] },
+                    description: "Modifier keys to hold during action"
+                }
+            },
+            required: ["browserId", "action"]
+        },
+        output_schema: {
+            type: "object",
+            properties: {
+                success: { type: "boolean", description: "Whether the keyboard action was successful" },
+                action: { type: "string", description: "The action that was performed" },
+                text: { type: "string", description: "Text that was typed" },
+                key: { type: "string", description: "Key that was pressed" },
+                target: { type: "string", description: "CSS selector of targeted element" },
+                browserId: { type: "string", description: "Browser instance ID" }
+            },
+            required: ["success", "action", "browserId"]
+        }
+    };
+
+    async execute(parameters) {
+        const { browserId, action, text, key, shortcut, target, delay = 0, modifiers = [] } = parameters;
+        
+        const browser = browserService.getBrowserInstance(browserId);
+        if (!browser) {
+            throw new Error(`Browser instance '${browserId}' not found`);
+        }
+
+        const client = browser.client;
+        
+        // Focus target element if specified
+        if (target?.selector) {
+            await this.focusElement(client, target.selector);
+        }
+
+        let result = {
+            success: true,
+            action: action,
+            browserId: browserId
+        };
+
+        // Convert modifiers to CDP format
+        const cdpModifiers = this.convertModifiers(modifiers);
+
+        switch (action) {
+            case 'type':
+                if (!text) {
+                    throw new Error('Text is required for type action');
+                }
+                await this.typeText(client, text, delay);
+                result.text = text;
+                break;
+                
+            case 'press':
+                if (!key) {
+                    throw new Error('Key is required for press action');
+                }
+                await this.pressKey(client, key, cdpModifiers);
+                result.key = key;
+                break;
+                
+            case 'down':
+                if (!key) {
+                    throw new Error('Key is required for down action');
+                }
+                await this.keyDown(client, key, cdpModifiers);
+                result.key = key;
+                break;
+                
+            case 'up':
+                if (!key) {
+                    throw new Error('Key is required for up action');
+                }
+                await this.keyUp(client, key, cdpModifiers);
+                result.key = key;
+                break;
+                
+            case 'shortcut':
+                if (!shortcut) {
+                    throw new Error('Shortcut is required for shortcut action');
+                }
+                await this.executeShortcut(client, shortcut);
+                result.shortcut = shortcut;
+                break;
+                
+            default:
+                throw new Error(`Unsupported keyboard action: ${action}`);
+        }
+
+        if (target?.selector) {
+            result.target = target.selector;
+        }
+
+        return result;
+    }
+
+    /**
+     * Focus an element by CSS selector
+     */
+    async focusElement(client, selector) {
+        const result = await client.Runtime.evaluate({
+            expression: `
+                (() => {
+                    const element = document.querySelector('${selector}');
+                    if (element) {
+                        element.focus();
+                        return true;
+                    }
+                    return false;
+                })()
+            `
+        });
+        
+        if (!result.result.value) {
+            throw new Error(`Could not focus element with selector: ${selector}`);
+        }
+    }
+
+    /**
+     * Type text with optional delay between keystrokes
+     */
+    async typeText(client, text, delay) {
+        for (const char of text) {
+            await client.Input.dispatchKeyEvent({
+                type: 'keyDown',
+                text: char
+            });
+            
+            await client.Input.dispatchKeyEvent({
+                type: 'keyUp',
+                text: char
+            });
+            
+            if (delay > 0) {
+                await new Promise(resolve => setTimeout(resolve, delay));
+            }
+        }
+    }
+
+    /**
+     * Press a key (down and up)
+     */
+    async pressKey(client, key, modifiers = 0) {
+        const keyInfo = this.getKeyInfo(key);
+        
+        await client.Input.dispatchKeyEvent({
+            type: 'keyDown',
+            key: keyInfo.key,
+            code: keyInfo.code,
+            modifiers: modifiers
+        });
+        
+        await client.Input.dispatchKeyEvent({
+            type: 'keyUp',
+            key: keyInfo.key,
+            code: keyInfo.code,
+            modifiers: modifiers
+        });
+    }
+
+    /**
+     * Key down
+     */
+    async keyDown(client, key, modifiers = 0) {
+        const keyInfo = this.getKeyInfo(key);
+        
+        await client.Input.dispatchKeyEvent({
+            type: 'keyDown',
+            key: keyInfo.key,
+            code: keyInfo.code,
+            modifiers: modifiers
+        });
+    }
+
+    /**
+     * Key up
+     */
+    async keyUp(client, key, modifiers = 0) {
+        const keyInfo = this.getKeyInfo(key);
+        
+        await client.Input.dispatchKeyEvent({
+            type: 'keyUp',
+            key: keyInfo.key,
+            code: keyInfo.code,
+            modifiers: modifiers
+        });
+    }
+
+    /**
+     * Execute keyboard shortcut
+     */
+    async executeShortcut(client, shortcut) {
+        const keys = this.parseShortcut(shortcut);
+        
+        // Press modifier keys
+        for (const modifier of keys.modifiers) {
+            await this.keyDown(client, modifier);
+        }
+        
+        // Press main key
+        if (keys.key) {
+            await this.pressKey(client, keys.key, this.convertModifiers(keys.modifiers));
+        }
+        
+        // Release modifier keys in reverse order
+        for (let i = keys.modifiers.length - 1; i >= 0; i--) {
+            await this.keyUp(client, keys.modifiers[i]);
+        }
+    }
+
+    /**
+     * Parse keyboard shortcut string
+     */
+    parseShortcut(shortcut) {
+        const parts = shortcut.split('+');
+        const key = parts.pop();
+        const modifiers = parts.map(mod => mod.toLowerCase());
+        
+        return { key, modifiers };
+    }
+
+    /**
+     * Get key information for CDP
+     */
+    getKeyInfo(key) {
+        const keyMap = {
+            'Enter': { key: 'Enter', code: 'Enter' },
+            'Tab': { key: 'Tab', code: 'Tab' },
+            'Escape': { key: 'Escape', code: 'Escape' },
+            'Space': { key: ' ', code: 'Space' },
+            'ArrowLeft': { key: 'ArrowLeft', code: 'ArrowLeft' },
+            'ArrowRight': { key: 'ArrowRight', code: 'ArrowRight' },
+            'ArrowUp': { key: 'ArrowUp', code: 'ArrowUp' },
+            'ArrowDown': { key: 'ArrowDown', code: 'ArrowDown' },
+            'Backspace': { key: 'Backspace', code: 'Backspace' },
+            'Delete': { key: 'Delete', code: 'Delete' },
+            'Home': { key: 'Home', code: 'Home' },
+            'End': { key: 'End', code: 'End' },
+            'PageUp': { key: 'PageUp', code: 'PageUp' },
+            'PageDown': { key: 'PageDown', code: 'PageDown' },
+            'F1': { key: 'F1', code: 'F1' },
+            'F2': { key: 'F2', code: 'F2' },
+            'F3': { key: 'F3', code: 'F3' },
+            'F4': { key: 'F4', code: 'F4' },
+            'F5': { key: 'F5', code: 'F5' },
+            'F6': { key: 'F6', code: 'F6' },
+            'F7': { key: 'F7', code: 'F7' },
+            'F8': { key: 'F8', code: 'F8' },
+            'F9': { key: 'F9', code: 'F9' },
+            'F10': { key: 'F10', code: 'F10' },
+            'F11': { key: 'F11', code: 'F11' },
+            'F12': { key: 'F12', code: 'F12' }
+        };
+
+        if (keyMap[key]) {
+            return keyMap[key];
+        }
+
+        // For single characters
+        return { key: key, code: `Key${key.toUpperCase()}` };
+    }
+
+    /**
+     * Convert modifier keys to CDP format
+     */
+    convertModifiers(modifiers) {
+        let cdpModifiers = 0;
+        
+        for (const modifier of modifiers) {
+            switch (modifier.toLowerCase()) {
+                case 'ctrl':
+                    cdpModifiers |= 2; // Ctrl
+                    break;
+                case 'shift':
+                    cdpModifiers |= 8; // Shift
+                    break;
+                case 'alt':
+                    cdpModifiers |= 1; // Alt
+                    break;
+                case 'meta':
+                case 'cmd':
+                    cdpModifiers |= 4; // Meta/Cmd
+                    break;
+            }
+        }
+        
+        return cdpModifiers;
+    }
+}
+
+module.exports = BrowserKeyboardTool;

package/src/tools/browser/advanced/browser-mouse.js

@@ -0,0 +1,332 @@
+const ToolBase = require('../../base/ToolBase');
+const browserService = require('../../../services/browserService');
+
+/**
+ * Enhanced Mouse Tool - Provides precise mouse interactions with coordinate support
+ * Inspired by Playwright MCP mouse capabilities
+ */
+class BrowserMouseTool extends ToolBase {
+    static definition = {
+        name: "browser_mouse",
+        description: "Perform mouse actions including clicks, moves, and drags with precise coordinate control. Supports both CSS selectors and direct coordinates.",
+        input_schema: {
+            type: "object",
+            properties: {
+                browserId: { 
+                    type: "string", 
+                    description: "The ID of the browser instance" 
+                },
+                action: {
+                    type: "string",
+                    enum: ["click", "move", "drag", "hover", "rightClick", "doubleClick"],
+                    description: "The mouse action to perform"
+                },
+                target: {
+                    type: "object",
+                    oneOf: [
+                        {
+                            type: "object",
+                            properties: {
+                                type: { type: "string", enum: ["coordinates"] },
+                                x: { type: "number", description: "X coordinate" },
+                                y: { type: "number", description: "Y coordinate" }
+                            },
+                            required: ["type", "x", "y"]
+                        },
+                        {
+                            type: "object", 
+                            properties: {
+                                type: { type: "string", enum: ["selector"] },
+                                selector: { type: "string", description: "CSS selector" },
+                                offset: {
+                                    type: "object",
+                                    properties: {
+                                        x: { type: "number", description: "X offset from element center" },
+                                        y: { type: "number", description: "Y offset from element center" }
+                                    }
+                                }
+                            },
+                            required: ["type", "selector"]
+                        }
+                    ],
+                    description: "Target for the mouse action - either coordinates or CSS selector"
+                },
+                dragTo: {
+                    type: "object",
+                    properties: {
+                        x: { type: "number", description: "End X coordinate for drag" },
+                        y: { type: "number", description: "End Y coordinate for drag" }
+                    },
+                    description: "End coordinates for drag actions"
+                },
+                button: {
+                    type: "string",
+                    enum: ["left", "right", "middle"],
+                    default: "left",
+                    description: "Mouse button to use"
+                },
+                modifiers: {
+                    type: "array",
+                    items: { type: "string", enum: ["ctrl", "shift", "alt", "meta"] },
+                    description: "Keyboard modifiers to hold during action"
+                }
+            },
+            required: ["browserId", "action", "target"]
+        },
+        output_schema: {
+            type: "object",
+            properties: {
+                success: { type: "boolean", description: "Whether the mouse action was successful" },
+                action: { type: "string", description: "The action that was performed" },
+                coordinates: {
+                    type: "object",
+                    properties: {
+                        x: { type: "number" },
+                        y: { type: "number" }
+                    },
+                    description: "Final coordinates of the mouse action"
+                },
+                element: { type: "string", description: "CSS selector if targeting an element" },
+                browserId: { type: "string", description: "Browser instance ID" }
+            },
+            required: ["success", "action", "browserId"]
+        }
+    };
+
+    async execute(parameters) {
+        const { browserId, action, target, dragTo, button = 'left', modifiers = [] } = parameters;
+        
+        const browser = browserService.getBrowserInstance(browserId);
+        if (!browser) {
+            throw new Error(`Browser instance '${browserId}' not found`);
+        }
+
+        const client = browser.client;
+        
+        // Calculate target coordinates
+        let targetX, targetY;
+        let elementInfo = null;
+        
+        if (target.type === 'coordinates') {
+            targetX = target.x;
+            targetY = target.y;
+        } else if (target.type === 'selector') {
+            // Get element bounds using DOM API
+            const result = await client.Runtime.evaluate({
+                expression: `
+                    (() => {
+                        const element = document.querySelector('${target.selector}');
+                        if (!element) return null;
+                        const rect = element.getBoundingClientRect();
+                        return {
+                            x: rect.left + rect.width / 2,
+                            y: rect.top + rect.height / 2,
+                            width: rect.width,
+                            height: rect.height,
+                            selector: '${target.selector}'
+                        };
+                    })()
+                `
+            });
+            
+            if (!result.result.value) {
+                throw new Error(`Element not found with selector: ${target.selector}`);
+            }
+            
+            const elementData = result.result.value;
+            targetX = elementData.x + (target.offset?.x || 0);
+            targetY = elementData.y + (target.offset?.y || 0);
+            elementInfo = {
+                selector: target.selector,
+                bounds: elementData
+            };
+        }
+
+        // Convert modifiers to CDP format
+        const cdpModifiers = this.convertModifiers(modifiers);
+
+        // Perform the mouse action
+        let actionResult;
+        
+        switch (action) {
+            case 'move':
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseMoved',
+                    x: targetX,
+                    y: targetY,
+                    modifiers: cdpModifiers
+                });
+                actionResult = { type: 'move', x: targetX, y: targetY };
+                break;
+                
+            case 'click':
+                await client.Input.dispatchMouseEvent({
+                    type: 'mousePressed',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseReleased',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                actionResult = { type: 'click', x: targetX, y: targetY };
+                break;
+                
+            case 'doubleClick':
+                // First click
+                await client.Input.dispatchMouseEvent({
+                    type: 'mousePressed',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseReleased',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                
+                // Second click (double click)
+                await client.Input.dispatchMouseEvent({
+                    type: 'mousePressed',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 2,
+                    modifiers: cdpModifiers
+                });
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseReleased',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 2,
+                    modifiers: cdpModifiers
+                });
+                actionResult = { type: 'doubleClick', x: targetX, y: targetY };
+                break;
+                
+            case 'rightClick':
+                await client.Input.dispatchMouseEvent({
+                    type: 'mousePressed',
+                    x: targetX,
+                    y: targetY,
+                    button: 'right',
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseReleased',
+                    x: targetX,
+                    y: targetY,
+                    button: 'right',
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                actionResult = { type: 'rightClick', x: targetX, y: targetY };
+                break;
+                
+            case 'hover':
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseMoved',
+                    x: targetX,
+                    y: targetY,
+                    modifiers: cdpModifiers
+                });
+                actionResult = { type: 'hover', x: targetX, y: targetY };
+                break;
+                
+            case 'drag':
+                if (!dragTo) {
+                    throw new Error('dragTo coordinates required for drag action');
+                }
+                
+                // Start drag
+                await client.Input.dispatchMouseEvent({
+                    type: 'mousePressed',
+                    x: targetX,
+                    y: targetY,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                
+                // Move to end position
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseMoved',
+                    x: dragTo.x,
+                    y: dragTo.y,
+                    modifiers: cdpModifiers
+                });
+                
+                // Release
+                await client.Input.dispatchMouseEvent({
+                    type: 'mouseReleased',
+                    x: dragTo.x,
+                    y: dragTo.y,
+                    button: button,
+                    clickCount: 1,
+                    modifiers: cdpModifiers
+                });
+                
+                actionResult = { 
+                    type: 'drag', 
+                    from: { x: targetX, y: targetY },
+                    to: { x: dragTo.x, y: dragTo.y }
+                };
+                break;
+                
+            default:
+                throw new Error(`Unsupported mouse action: ${action}`);
+        }
+
+        return {
+            success: true,
+            action: action,
+            coordinates: action === 'drag' ? actionResult : { x: targetX, y: targetY },
+            element: elementInfo?.selector,
+            browserId: browserId,
+            actionDetails: actionResult
+        };
+    }
+
+    /**
+     * Convert modifier keys to CDP format
+     */
+    convertModifiers(modifiers) {
+        let cdpModifiers = 0;
+        
+        for (const modifier of modifiers) {
+            switch (modifier) {
+                case 'ctrl':
+                    cdpModifiers |= 2; // Ctrl
+                    break;
+                case 'shift':
+                    cdpModifiers |= 8; // Shift
+                    break;
+                case 'alt':
+                    cdpModifiers |= 1; // Alt
+                    break;
+                case 'meta':
+                    cdpModifiers |= 4; // Meta/Cmd
+                    break;
+            }
+        }
+        
+        return cdpModifiers;
+    }
+}
+
+module.exports = BrowserMouseTool;