mcp-web-inspector 0.1.0

package/dist/tools.d.ts

@@ -0,0 +1,557 @@
+interface SessionConfig {
+    saveSession: boolean;
+    userDataDir: string;
+    screenshotsDir: string;
+}
+export declare function createToolDefinitions(sessionConfig?: SessionConfig): [{
+    readonly name: "navigate";
+    readonly description: string;
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly url: {
+                readonly type: "string";
+                readonly description: "URL to navigate to the website specified";
+            };
+            readonly browserType: {
+                readonly type: "string";
+                readonly description: "Browser type to use (chromium, firefox, webkit). Defaults to chromium";
+                readonly enum: readonly ["chromium", "firefox", "webkit"];
+            };
+            readonly device: {
+                readonly type: "string";
+                readonly description: "Mobile device preset to emulate. Uses Playwright's built-in device configurations for viewport, user agent, and device scale factor. When specified, overrides width/height parameters.";
+                readonly enum: readonly ["iphone-se", "iphone-14", "iphone-14-pro", "pixel-5", "ipad", "samsung-s21"];
+            };
+            readonly width: {
+                readonly type: "number";
+                readonly description: "Viewport width in pixels (default: 1280). Ignored if device is specified.";
+            };
+            readonly height: {
+                readonly type: "number";
+                readonly description: "Viewport height in pixels (default: 720). Ignored if device is specified.";
+            };
+            readonly timeout: {
+                readonly type: "number";
+                readonly description: "Navigation timeout in milliseconds";
+            };
+            readonly waitUntil: {
+                readonly type: "string";
+                readonly description: "Navigation wait condition";
+            };
+            readonly headless: {
+                readonly type: "boolean";
+                readonly description: "Run browser in headless mode (default: false)";
+            };
+        };
+        readonly required: readonly ["url"];
+    };
+}, {
+    readonly name: "screenshot";
+    readonly description: `Take a screenshot of the current page or a specific element. Screenshots are saved to ${string} by default. Example: { name: "login-page", fullPage: true } or { name: "submit-btn", selector: "testid:submit" }`;
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly name: {
+                readonly type: "string";
+                readonly description: "Name for the screenshot file (without extension). Example: 'login-page' or 'error-state'";
+            };
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector or testid shorthand for element to screenshot. Example: '#submit-button' or 'testid:login-form'. Omit to capture full viewport.";
+            };
+            readonly fullPage: {
+                readonly type: "boolean";
+                readonly description: "Capture entire scrollable page instead of just viewport (default: false)";
+            };
+            readonly downloadsDir: {
+                readonly type: "string";
+                readonly description: `Custom directory for saving screenshot (default: ${string}). Example: './my-screenshots'`;
+            };
+        };
+        readonly required: readonly ["name"];
+    };
+}, {
+    readonly name: "click";
+    readonly description: "Click an element on the page";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector for the element to click";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "fill";
+    readonly description: "fill out an input field";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector for input field";
+            };
+            readonly value: {
+                readonly type: "string";
+                readonly description: "Value to fill";
+            };
+        };
+        readonly required: readonly ["selector", "value"];
+    };
+}, {
+    readonly name: "select";
+    readonly description: "Select an element on the page with Select tag";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector for element to select";
+            };
+            readonly value: {
+                readonly type: "string";
+                readonly description: "Value to select";
+            };
+        };
+        readonly required: readonly ["selector", "value"];
+    };
+}, {
+    readonly name: "hover";
+    readonly description: "Hover an element on the page";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector for element to hover";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "upload_file";
+    readonly description: "Upload a file to an input[type='file'] element on the page";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector for the file input element";
+            };
+            readonly filePath: {
+                readonly type: "string";
+                readonly description: "Absolute path to the file to upload";
+            };
+        };
+        readonly required: readonly ["selector", "filePath"];
+    };
+}, {
+    readonly name: "evaluate";
+    readonly description: "Execute JavaScript in the browser console";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly script: {
+                readonly type: "string";
+                readonly description: "JavaScript code to execute";
+            };
+        };
+        readonly required: readonly ["script"];
+    };
+}, {
+    readonly name: "get_console_logs";
+    readonly description: "Retrieve console logs from the browser with filtering options";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly type: {
+                readonly type: "string";
+                readonly description: "Type of logs to retrieve (all, error, warning, log, info, debug, exception)";
+                readonly enum: readonly ["all", "error", "warning", "log", "info", "debug", "exception"];
+            };
+            readonly search: {
+                readonly type: "string";
+                readonly description: "Text to search for in logs (handles text with square brackets)";
+            };
+            readonly limit: {
+                readonly type: "number";
+                readonly description: "Maximum number of logs to return";
+            };
+            readonly since: {
+                readonly type: "string";
+                readonly description: "Filter logs since a specific event: 'last-call' (since last get_console_logs call), 'last-navigation' (since last page navigation), or 'last-interaction' (since last user interaction like click, fill, etc.)";
+                readonly enum: readonly ["last-call", "last-navigation", "last-interaction"];
+            };
+            readonly clear: {
+                readonly type: "boolean";
+                readonly description: "Whether to clear logs after retrieval (default: false)";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "close";
+    readonly description: "Close the browser and release all resources";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {};
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "get_text";
+    readonly description: "Get the visible text content of the current page";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {};
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "get_html";
+    readonly description: "Get the HTML content of the current page. By default, all <script> tags are removed from the output unless removeScripts is explicitly set to false.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector to limit the HTML to a specific container";
+            };
+            readonly removeScripts: {
+                readonly type: "boolean";
+                readonly description: "Remove all script tags from the HTML (default: true)";
+            };
+            readonly removeComments: {
+                readonly type: "boolean";
+                readonly description: "Remove all HTML comments (default: false)";
+            };
+            readonly removeStyles: {
+                readonly type: "boolean";
+                readonly description: "Remove all style tags from the HTML (default: false)";
+            };
+            readonly removeMeta: {
+                readonly type: "boolean";
+                readonly description: "Remove all meta tags from the HTML (default: false)";
+            };
+            readonly cleanHtml: {
+                readonly type: "boolean";
+                readonly description: "Perform comprehensive HTML cleaning (default: false)";
+            };
+            readonly minify: {
+                readonly type: "boolean";
+                readonly description: "Minify the HTML output (default: false)";
+            };
+            readonly maxLength: {
+                readonly type: "number";
+                readonly description: "Maximum number of characters to return (default: 20000)";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "go_back";
+    readonly description: "Navigate back in browser history";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {};
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "go_forward";
+    readonly description: "Navigate forward in browser history";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {};
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "drag";
+    readonly description: "Drag an element to a target location";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly sourceSelector: {
+                readonly type: "string";
+                readonly description: "CSS selector for the element to drag";
+            };
+            readonly targetSelector: {
+                readonly type: "string";
+                readonly description: "CSS selector for the target location";
+            };
+        };
+        readonly required: readonly ["sourceSelector", "targetSelector"];
+    };
+}, {
+    readonly name: "press_key";
+    readonly description: "Press a keyboard key";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly key: {
+                readonly type: "string";
+                readonly description: "Key to press (e.g. 'Enter', 'ArrowDown', 'a')";
+            };
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "Optional CSS selector to focus before pressing key";
+            };
+        };
+        readonly required: readonly ["key"];
+    };
+}, {
+    readonly name: "check_visibility";
+    readonly description: "Check if an element is visible to the user. CRITICAL for debugging click/interaction failures. Returns detailed visibility information including viewport intersection, clipping by overflow:hidden, and whether element needs scrolling. Supports testid shortcuts (e.g., 'testid:submit-button').";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:login-button', '#submit', 'text=Click here')";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "get_position";
+    readonly description: "Get the position and size of an element. Returns x, y coordinates and width/height in pixels. Useful for finding where to click or checking element layout. Supports testid shortcuts (e.g., 'testid:submit-button').";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:login-button', '#submit', 'text=Click here')";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "inspect_dom";
+    readonly description: "Progressive DOM inspection with semantic filtering and spatial layout info. This is the PRIMARY tool for understanding page structure. Returns immediate semantic children only (header, nav, main, form, button, elements with test IDs, ARIA roles, etc.) while automatically drilling through non-semantic wrapper elements (div, span, etc.) up to maxDepth levels. Use without selector for page overview, then drill down by calling again with a child's selector. Returns compact text format with position, visibility, and layout pattern detection. Supports testid shortcuts.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand to inspect. Omit for page overview (defaults to body). Use 'testid:login-form', '#main', etc.";
+            };
+            readonly includeHidden: {
+                readonly type: "boolean";
+                readonly description: "Include hidden elements in results (default: false)";
+            };
+            readonly maxChildren: {
+                readonly type: "number";
+                readonly description: "Maximum number of children to show (default: 20)";
+            };
+            readonly maxDepth: {
+                readonly type: "number";
+                readonly description: "Maximum depth to drill through non-semantic wrapper elements when looking for semantic children (default: 5). Increase for extremely deeply nested components, decrease to 1 to see only immediate children without drilling.";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "get_test_ids";
+    readonly description: "Discover all test identifiers on the page (data-testid, data-test, data-cy, etc.). Returns a compact text list grouped by attribute type. Essential for test-driven workflows and understanding what elements can be reliably selected. Use the returned test IDs with selector shortcuts like 'testid:submit-button'.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly attributes: {
+                readonly type: "string";
+                readonly description: "Comma-separated list of test ID attributes to search for (default: 'data-testid,data-test,data-cy')";
+            };
+            readonly showAll: {
+                readonly type: "boolean";
+                readonly description: "If true, display all test IDs without truncation. If false (default), shows first 8 test IDs per attribute with a summary for longer lists.";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "query_selector";
+    readonly description: "Test a selector and return detailed information about all matched elements. Essential for selector debugging and finding the right element to interact with. Returns compact text format with element tag, position, text content, visibility status, and interaction capability. Shows why elements are hidden (display:none, opacity:0, zero size). Supports testid shortcuts (e.g., 'testid:submit-button'). Use limit parameter to control how many matches to show (default: 10). NEW: Use onlyVisible parameter to filter results (true=visible only, false=hidden only, undefined=all).";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand to test (e.g., 'button.submit', 'testid:login-form', 'text=Sign In')";
+            };
+            readonly limit: {
+                readonly type: "number";
+                readonly description: "Maximum number of elements to return detailed info for (default: 10, recommended max: 50)";
+            };
+            readonly onlyVisible: {
+                readonly type: "boolean";
+                readonly description: "Filter results by visibility: true = show only visible elements, false = show only hidden elements, undefined/not specified = show all elements (default: undefined)";
+            };
+            readonly showAttributes: {
+                readonly type: "string";
+                readonly description: "Comma-separated list of HTML attributes to display for each element (e.g., 'id,name,aria-label,href,type'). If not specified, attributes are not shown.";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "find_by_text";
+    readonly description: "Find elements by their text content. Essential for finding elements without good selectors, especially in poorly structured DOM. Returns elements with position, visibility, and interaction state. Supports exact match, case-sensitive search, and NEW: regex pattern matching for advanced text searching (e.g., '/\\d+ items?/' to find elements with numbers).";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly text: {
+                readonly type: "string";
+                readonly description: "Text to search for in elements. If regex=true, this can be a regex pattern in /pattern/flags format (e.g., '/\\d+/i' for case-insensitive numbers) or a raw pattern string.";
+            };
+            readonly exact: {
+                readonly type: "boolean";
+                readonly description: "Whether to match text exactly (default: false, allows partial matches). Ignored if regex=true.";
+            };
+            readonly caseSensitive: {
+                readonly type: "boolean";
+                readonly description: "Whether search should be case-sensitive (default: false). Ignored if regex=true (use regex flags instead).";
+            };
+            readonly regex: {
+                readonly type: "boolean";
+                readonly description: "Whether to treat 'text' as a regex pattern (default: false). If true, supports /pattern/flags format or raw pattern. Examples: '/sign.*/i' (case-insensitive), '/\\d+ items?/' (numbers + optional 's').";
+            };
+            readonly limit: {
+                readonly type: "number";
+                readonly description: "Maximum number of elements to return (default: 10)";
+            };
+        };
+        readonly required: readonly ["text"];
+    };
+}, {
+    readonly name: "get_computed_styles";
+    readonly description: "Get computed CSS styles for an element. Essential for understanding why elements behave unexpectedly and debugging layout issues. Returns styles grouped by category (Layout, Visibility, Spacing, Typography). Use properties parameter to request specific CSS properties, or omit for common layout properties.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')";
+            };
+            readonly properties: {
+                readonly type: "string";
+                readonly description: "Comma-separated list of CSS properties to retrieve (e.g., 'display,width,color'). If not specified, returns common layout properties: display, position, width, height, opacity, visibility, z-index, overflow, margin, padding, font-size, font-weight, color, background-color";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "measure_element";
+    readonly description: "Get box model measurements (position, size, margin, padding, border) for an element. Use for layout debugging, spacing validation, and understanding CSS box model. Returns compact visual representation of content, padding, border, and margin with directional arrows.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector or testid shorthand (e.g., 'testid:submit', '#login-button')";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "element_exists";
+    readonly description: "Quick check if an element exists on the page. Ultra-lightweight alternative to query_selector_all when you only need existence confirmation. Returns simple exists/not found status. Most common check before attempting interaction. Supports testid shortcuts.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "compare_positions";
+    readonly description: "Compare positions and alignment of two elements. Validates layout consistency by checking if elements are aligned (top, left, right, bottom) or have the same dimensions (width, height). Essential for visual regression testing and ensuring consistent spacing across components. Returns compact text format with alignment status and difference in pixels.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector1: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand for the first element (e.g., 'testid:main-header', '#header')";
+            };
+            readonly selector2: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand for the second element (e.g., 'testid:chat-header', '#secondary-header')";
+            };
+            readonly checkAlignment: {
+                readonly type: "string";
+                readonly description: "What to check: 'top', 'left', 'right', 'bottom' (edge alignment), or 'width', 'height' (dimension matching)";
+                readonly enum: readonly ["top", "left", "right", "bottom", "width", "height"];
+            };
+        };
+        readonly required: readonly ["selector1", "selector2", "checkAlignment"];
+    };
+}, {
+    readonly name: "wait_for_element";
+    readonly description: "Wait for an element to reach a specific state (visible, hidden, attached, detached). Better than sleep() for waiting on dynamic content. Returns duration and current element status. Supports testid shortcuts (e.g., 'testid:submit-button').";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly selector: {
+                readonly type: "string";
+                readonly description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#loading-spinner')";
+            };
+            readonly state: {
+                readonly type: "string";
+                readonly description: "State to wait for: 'visible' (default), 'hidden', 'attached', 'detached'";
+                readonly enum: readonly ["visible", "hidden", "attached", "detached"];
+            };
+            readonly timeout: {
+                readonly type: "number";
+                readonly description: "Maximum time to wait in milliseconds (default: 10000)";
+            };
+        };
+        readonly required: readonly ["selector"];
+    };
+}, {
+    readonly name: "wait_for_network_idle";
+    readonly description: "Wait for network activity to settle. Waits until there are no network connections for at least 500ms. Better than fixed delays when waiting for AJAX calls or dynamic content loading. Returns actual wait duration and confirmation of idle state.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly timeout: {
+                readonly type: "number";
+                readonly description: "Maximum time to wait in milliseconds (default: 10000)";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "list_network_requests";
+    readonly description: "List recent network requests captured by the browser. Returns compact text format with method, URL, status, resource type, timing, and size. Essential for debugging API calls and performance issues. Use get_request_details() to inspect full headers and body for specific requests.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly type: {
+                readonly type: "string";
+                readonly description: "Filter by resource type: 'xhr', 'fetch', 'script', 'stylesheet', 'image', 'font', 'document', etc. Omit to show all types.";
+            };
+            readonly limit: {
+                readonly type: "number";
+                readonly description: "Maximum number of requests to return, most recent first (default: 50)";
+            };
+        };
+        readonly required: readonly [];
+    };
+}, {
+    readonly name: "get_request_details";
+    readonly description: "Get detailed information about a specific network request by index (from list_network_requests). Returns request/response headers, body (truncated at 500 chars), timing, and size. Request bodies with passwords are automatically masked. Essential for debugging API responses and investigating failed requests.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly index: {
+                readonly type: "number";
+                readonly description: "Index of the request from list_network_requests output (e.g., [0], [1], etc.)";
+            };
+        };
+        readonly required: readonly ["index"];
+    };
+}];
+export declare const BROWSER_TOOLS: string[];
+export declare const tools: string[];
+export {};