mcp-web-inspector 0.1.0

package/dist/tools/browser/interaction.js

@@ -0,0 +1,259 @@
+import { BrowserToolBase } from './base.js';
+import { createSuccessResponse, createErrorResponse } from '../common/types.js';
+import { setGlobalPage } from '../../toolHandler.js';
+/**
+ * Tool for clicking elements on the page
+ */
+export class ClickTool extends BrowserToolBase {
+    /**
+     * Execute the click tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            await page.click(selector);
+            return createSuccessResponse(`Clicked element: ${args.selector}`);
+        });
+    }
+}
+/**
+ * Tool for clicking a link and switching to the new tab
+ */
+export class ClickAndSwitchTabTool extends BrowserToolBase {
+    /**
+     * Execute the click and switch tab tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            // Listen for a new tab to open
+            const [newPage] = await Promise.all([
+                //context.browser.waitForEvent('page'), // Wait for a new page (tab) to open
+                page.context().waitForEvent('page'), // Wait for a new page (tab) to open
+                page.click(selector), // Click the link that opens the new tab
+            ]);
+            // Wait for the new page to load
+            await newPage.waitForLoadState('domcontentloaded');
+            // Switch control to the new tab
+            setGlobalPage(newPage);
+            //page= newPage; // Update the current page to the new tab
+            //context.page = newPage;
+            //context.page.bringToFront(); // Bring the new tab to the front
+            return createSuccessResponse(`Clicked link and switched to new tab: ${newPage.url()}`);
+            //return createSuccessResponse(`Clicked link and switched to new tab: ${context.page.url()}`);
+        });
+    }
+}
+/**
+ * Tool for clicking elements inside iframes
+ */
+export class IframeClickTool extends BrowserToolBase {
+    /**
+     * Execute the iframe click tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const iframeSelector = this.normalizeSelector(args.iframeSelector);
+            const selector = this.normalizeSelector(args.selector);
+            const frame = page.frameLocator(iframeSelector);
+            if (!frame) {
+                return createErrorResponse(`Iframe not found: ${args.iframeSelector}`);
+            }
+            await frame.locator(selector).click();
+            return createSuccessResponse(`Clicked element ${args.selector} inside iframe ${args.iframeSelector}`);
+        });
+    }
+}
+/**
+ * Tool for filling elements inside iframes
+ */
+export class IframeFillTool extends BrowserToolBase {
+    /**
+     * Execute the iframe fill tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const iframeSelector = this.normalizeSelector(args.iframeSelector);
+            const selector = this.normalizeSelector(args.selector);
+            const frame = page.frameLocator(iframeSelector);
+            if (!frame) {
+                return createErrorResponse(`Iframe not found: ${args.iframeSelector}`);
+            }
+            await frame.locator(selector).fill(args.value);
+            return createSuccessResponse(`Filled element ${args.selector} inside iframe ${args.iframeSelector} with: ${args.value}`);
+        });
+    }
+}
+/**
+ * Tool for filling form fields
+ */
+export class FillTool extends BrowserToolBase {
+    /**
+     * Execute the fill tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            await page.waitForSelector(selector);
+            await page.fill(selector, args.value);
+            return createSuccessResponse(`Filled ${args.selector} with: ${args.value}`);
+        });
+    }
+}
+/**
+ * Tool for selecting options from dropdown menus
+ */
+export class SelectTool extends BrowserToolBase {
+    /**
+     * Execute the select tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            await page.waitForSelector(selector);
+            await page.selectOption(selector, args.value);
+            return createSuccessResponse(`Selected ${args.selector} with: ${args.value}`);
+        });
+    }
+}
+/**
+ * Tool for hovering over elements
+ */
+export class HoverTool extends BrowserToolBase {
+    /**
+     * Execute the hover tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            await page.waitForSelector(selector);
+            await page.hover(selector);
+            return createSuccessResponse(`Hovered ${args.selector}`);
+        });
+    }
+}
+/**
+ * Tool for uploading files
+ */
+export class UploadFileTool extends BrowserToolBase {
+    /**
+     * Execute the upload file tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const selector = this.normalizeSelector(args.selector);
+            await page.waitForSelector(selector);
+            await page.setInputFiles(selector, args.filePath);
+            return createSuccessResponse(`Uploaded file '${args.filePath}' to '${args.selector}'`);
+        });
+    }
+}
+/**
+ * Tool for executing JavaScript in the browser
+ */
+export class EvaluateTool extends BrowserToolBase {
+    /**
+     * Execute the evaluate tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const result = await page.evaluate(args.script);
+            // Convert result to string for display
+            let resultStr;
+            try {
+                resultStr = JSON.stringify(result, null, 2);
+            }
+            catch (error) {
+                resultStr = String(result);
+            }
+            return createSuccessResponse([
+                `Executed JavaScript:`,
+                `${args.script}`,
+                `Result:`,
+                `${resultStr}`
+            ]);
+        });
+    }
+}
+/**
+ * Tool for dragging elements on the page
+ */
+export class DragTool extends BrowserToolBase {
+    /**
+     * Execute the drag tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            const sourceSelector = this.normalizeSelector(args.sourceSelector);
+            const targetSelector = this.normalizeSelector(args.targetSelector);
+            const sourceElement = await page.waitForSelector(sourceSelector);
+            const targetElement = await page.waitForSelector(targetSelector);
+            const sourceBound = await sourceElement.boundingBox();
+            const targetBound = await targetElement.boundingBox();
+            if (!sourceBound || !targetBound) {
+                return createErrorResponse("Could not get element positions for drag operation");
+            }
+            await page.mouse.move(sourceBound.x + sourceBound.width / 2, sourceBound.y + sourceBound.height / 2);
+            await page.mouse.down();
+            await page.mouse.move(targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2);
+            await page.mouse.up();
+            return createSuccessResponse(`Dragged element from ${args.sourceSelector} to ${args.targetSelector}`);
+        });
+    }
+}
+/**
+ * Tool for pressing keyboard keys
+ */
+export class PressKeyTool extends BrowserToolBase {
+    /**
+     * Execute the key press tool
+     */
+    async execute(args, context) {
+        this.recordInteraction();
+        return this.safeExecute(context, async (page) => {
+            if (args.selector) {
+                const selector = this.normalizeSelector(args.selector);
+                await page.waitForSelector(selector);
+                await page.focus(selector);
+            }
+            await page.keyboard.press(args.key);
+            return createSuccessResponse(`Pressed key: ${args.key}`);
+        });
+    }
+}
+/**
+ * Tool for switching browser tabs
+ */
+// export class SwitchTabTool extends BrowserToolBase {
+//   /**
+//    * Switch the tab to the specified index
+//    */
+//   async execute(args: any, context: ToolContext): Promise<ToolResponse> {
+//     return this.safeExecute(context, async (page) => {
+//       const tabs = await browser.page;      
+//       // Validate the tab index
+//       const tabIndex = Number(args.index);
+//       if (isNaN(tabIndex)) {
+//         return createErrorResponse(`Invalid tab index: ${args.index}. It must be a number.`);
+//       }
+//       if (tabIndex >= 0 && tabIndex < tabs.length) {
+//         await tabs[tabIndex].bringToFront();
+//         return createSuccessResponse(`Switched to tab with index ${tabIndex}`);
+//       } else {
+//         return createErrorResponse(
+//           `Tab index out of range: ${tabIndex}. Available tabs: 0 to ${tabs.length - 1}.`
+//         );
+//       }
+//     });
+//   }
+// }

package/dist/tools/browser/listNetworkRequests.d.ts

@@ -0,0 +1,10 @@
+import type { ToolContext, ToolResponse } from '../common/types.js';
+import { BrowserToolBase } from './base.js';
+interface ListNetworkRequestsArgs {
+    type?: string;
+    limit?: number;
+}
+export declare class ListNetworkRequestsTool extends BrowserToolBase {
+    execute(args: ListNetworkRequestsArgs, context: ToolContext): Promise<ToolResponse>;
+}
+export {};

package/dist/tools/browser/listNetworkRequests.js

@@ -0,0 +1,74 @@
+import { BrowserToolBase } from './base.js';
+import { getNetworkLog } from '../../toolHandler.js';
+export class ListNetworkRequestsTool extends BrowserToolBase {
+    async execute(args, context) {
+        return this.safeExecute(context, async () => {
+            const { type, limit = 50 } = args;
+            const networkLog = getNetworkLog();
+            // Filter by resource type if specified
+            let filtered = type
+                ? networkLog.filter(req => req.resourceType === type)
+                : networkLog;
+            // Get most recent requests (reverse chronological)
+            filtered = filtered.slice(-limit).reverse();
+            if (filtered.length === 0) {
+                return {
+                    content: [{
+                            type: "text",
+                            text: type
+                                ? `No network requests found for type: ${type}`
+                                : "No network requests captured yet"
+                        }],
+                    isError: false
+                };
+            }
+            // Format output in compact text format
+            const lines = [`Network Requests (${filtered.length} of ${networkLog.length}, recent first):\n`];
+            filtered.forEach(req => {
+                const statusInfo = req.status
+                    ? `${req.status} ${req.statusText || 'OK'}`
+                    : 'pending';
+                const timing = req.timing ? `${req.timing}ms` : '...';
+                // Check if cached
+                const cached = req.responseData?.headers['cache-control']?.includes('max-age') ||
+                    req.responseData?.headers['x-cache'] === 'HIT'
+                    ? 'cached'
+                    : '';
+                // Get response size
+                let sizeInfo = '';
+                if (req.responseData?.body) {
+                    const bytes = req.responseData.body.length;
+                    if (bytes < 1024) {
+                        sizeInfo = `${bytes}B`;
+                    }
+                    else {
+                        sizeInfo = `${(bytes / 1024).toFixed(1)}KB`;
+                    }
+                }
+                const parts = [
+                    `[${req.index}]`,
+                    req.method,
+                    req.url.length > 80 ? req.url.substring(0, 77) + '...' : req.url,
+                    statusInfo,
+                    '|',
+                    req.resourceType,
+                    '|',
+                    timing
+                ];
+                if (sizeInfo)
+                    parts.push('|', sizeInfo);
+                if (cached)
+                    parts.push('|', cached);
+                lines.push(parts.join(' '));
+            });
+            lines.push('\nUse get_request_details(index) for full info');
+            return {
+                content: [{
+                        type: "text",
+                        text: lines.join('\n')
+                    }],
+                isError: false
+            };
+        });
+    }
+}

package/dist/tools/browser/measureElement.d.ts

@@ -0,0 +1,9 @@
+import { ToolHandler } from '../common/types.js';
+import { BrowserToolBase } from './base.js';
+import type { ToolContext, ToolResponse } from '../common/types.js';
+export interface MeasureElementArgs {
+    selector: string;
+}
+export declare class MeasureElementTool extends BrowserToolBase implements ToolHandler {
+    execute(args: MeasureElementArgs, context: ToolContext): Promise<ToolResponse>;
+}

package/dist/tools/browser/measureElement.js

@@ -0,0 +1,139 @@
+import { BrowserToolBase } from './base.js';
+export class MeasureElementTool extends BrowserToolBase {
+    async execute(args, context) {
+        return this.safeExecute(context, async (page) => {
+            const normalizedSelector = this.normalizeSelector(args.selector);
+            // Find the element
+            const locator = page.locator(normalizedSelector);
+            const count = await locator.count();
+            if (count === 0) {
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: `✗ Element not found: ${args.selector}`
+                        }
+                    ],
+                    isError: true
+                };
+            }
+            // Handle multiple matches by using first() - show warning (consistent with other tools)
+            const targetLocator = count > 1 ? locator.first() : locator;
+            let warning = '';
+            if (count > 1) {
+                warning = `⚠ Warning: Selector matched ${count} elements, using first\n\n`;
+            }
+            // Get element descriptor
+            const elementInfo = await targetLocator.evaluate((el) => {
+                const tag = el.tagName.toLowerCase();
+                const testId = el.getAttribute('data-testid') || el.getAttribute('data-test') || el.getAttribute('data-cy');
+                const id = el.id ? `#${el.id}` : '';
+                const classes = el.className && typeof el.className === 'string'
+                    ? `.${el.className.split(' ').filter(c => c).slice(0, 2).join('.')}`
+                    : '';
+                let descriptor = `<${tag}`;
+                if (testId)
+                    descriptor += ` data-testid="${testId}"`;
+                else if (id)
+                    descriptor += id;
+                else if (classes)
+                    descriptor += classes;
+                descriptor += '>';
+                return { descriptor };
+            });
+            // Get box model measurements
+            const measurements = await targetLocator.evaluate((el) => {
+                const computed = window.getComputedStyle(el);
+                const rect = el.getBoundingClientRect();
+                const parseValue = (val) => parseFloat(val) || 0;
+                return {
+                    x: Math.round(rect.x),
+                    y: Math.round(rect.y),
+                    width: parseValue(computed.width),
+                    height: parseValue(computed.height),
+                    marginTop: parseValue(computed.marginTop),
+                    marginRight: parseValue(computed.marginRight),
+                    marginBottom: parseValue(computed.marginBottom),
+                    marginLeft: parseValue(computed.marginLeft),
+                    paddingTop: parseValue(computed.paddingTop),
+                    paddingRight: parseValue(computed.paddingRight),
+                    paddingBottom: parseValue(computed.paddingBottom),
+                    paddingLeft: parseValue(computed.paddingLeft),
+                    borderTopWidth: parseValue(computed.borderTopWidth),
+                    borderRightWidth: parseValue(computed.borderRightWidth),
+                    borderBottomWidth: parseValue(computed.borderBottomWidth),
+                    borderLeftWidth: parseValue(computed.borderLeftWidth),
+                    borderStyle: computed.borderStyle,
+                    borderColor: computed.borderColor
+                };
+            });
+            // Calculate dimensions
+            const contentWidth = Math.round(measurements.width - measurements.paddingLeft - measurements.paddingRight);
+            const contentHeight = Math.round(measurements.height - measurements.paddingTop - measurements.paddingBottom);
+            const boxWidth = Math.round(measurements.width);
+            const boxHeight = Math.round(measurements.height);
+            const totalWidth = Math.round(boxWidth + measurements.marginLeft + measurements.marginRight);
+            const totalHeight = Math.round(boxHeight + measurements.marginTop + measurements.marginBottom);
+            // Format border info
+            const formatBorder = () => {
+                const { borderTopWidth: top, borderRightWidth: right, borderBottomWidth: bottom, borderLeftWidth: left, borderStyle: style } = measurements;
+                // Check if all sides are the same
+                if (top === right && right === bottom && bottom === left) {
+                    if (top === 0)
+                        return '  Border:  none';
+                    return `  Border:  ${top}px ${style}`;
+                }
+                // Different sides
+                const lines = [];
+                if (top > 0)
+                    lines.push(`↑${top}px`);
+                if (right > 0)
+                    lines.push(`→${right}px`);
+                if (bottom > 0)
+                    lines.push(`↓${bottom}px`);
+                if (left > 0)
+                    lines.push(`←${left}px`);
+                return lines.length > 0
+                    ? `  Border:  ${lines.join(' ')} ${style}`
+                    : '  Border:  none';
+            };
+            // Format spacing (margin/padding) with directional arrows
+            const formatSpacing = (top, right, bottom, left) => {
+                const parts = [];
+                if (top > 0)
+                    parts.push(`↑${Math.round(top)}px`);
+                if (bottom > 0)
+                    parts.push(`↓${Math.round(bottom)}px`);
+                if (left > 0)
+                    parts.push(`←${Math.round(left)}px`);
+                if (right > 0)
+                    parts.push(`→${Math.round(right)}px`);
+                return parts.length > 0 ? parts.join(' ') : '0px';
+            };
+            // Build output in compact text format
+            const sections = [];
+            if (warning) {
+                sections.push(warning.trim());
+            }
+            sections.push(`Element: ${elementInfo.descriptor}`);
+            sections.push(`@ (${measurements.x},${measurements.y}) ${boxWidth}x${boxHeight}px`);
+            sections.push('');
+            sections.push('Box Model:');
+            sections.push(`  Content: ${contentWidth}x${contentHeight}px`);
+            sections.push(`  Padding: ${formatSpacing(measurements.paddingTop, measurements.paddingRight, measurements.paddingBottom, measurements.paddingLeft)}`);
+            sections.push(formatBorder());
+            sections.push(`  Margin:  ${formatSpacing(measurements.marginTop, measurements.marginRight, measurements.marginBottom, measurements.marginLeft)}`);
+            sections.push('');
+            sections.push(`Total Space: ${totalWidth}x${totalHeight}px (with margin)`);
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: sections.join('\n')
+                    }
+                ],
+                isError: false
+            };
+        });
+    }
+}

package/dist/tools/browser/navigation.d.ts

@@ -0,0 +1,38 @@
+import { BrowserToolBase } from './base.js';
+import { ToolContext, ToolResponse } from '../common/types.js';
+/**
+ * Tool for navigating to URLs
+ */
+export declare class NavigationTool extends BrowserToolBase {
+    /**
+     * Execute the navigation tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}
+/**
+ * Tool for closing the browser
+ */
+export declare class CloseBrowserTool extends BrowserToolBase {
+    /**
+     * Execute the close browser tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}
+/**
+ * Tool for navigating back in browser history
+ */
+export declare class GoBackTool extends BrowserToolBase {
+    /**
+     * Execute the go back tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}
+/**
+ * Tool for navigating forward in browser history
+ */
+export declare class GoForwardTool extends BrowserToolBase {
+    /**
+     * Execute the go forward tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}

package/dist/tools/browser/navigation.js

@@ -0,0 +1,109 @@
+import { BrowserToolBase } from './base.js';
+import { createSuccessResponse, createErrorResponse } from '../common/types.js';
+import { resetBrowserState } from '../../toolHandler.js';
+/**
+ * Tool for navigating to URLs
+ */
+export class NavigationTool extends BrowserToolBase {
+    /**
+     * Execute the navigation tool
+     */
+    async execute(args, context) {
+        // Check if browser is available
+        if (!context.browser || !context.browser.isConnected()) {
+            // If browser is not connected, we need to reset the state to force recreation
+            resetBrowserState();
+            return createErrorResponse("Browser is not connected. The connection has been reset - please retry your navigation.");
+        }
+        // Check if page is available and not closed
+        if (!context.page || context.page.isClosed()) {
+            return createErrorResponse("Page is not available or has been closed. Please retry your navigation.");
+        }
+        this.recordNavigation();
+        return this.safeExecute(context, async (page) => {
+            try {
+                await page.goto(args.url, {
+                    timeout: args.timeout || 30000,
+                    waitUntil: args.waitUntil || "load"
+                });
+                return createSuccessResponse(`Navigated to ${args.url}`);
+            }
+            catch (error) {
+                const errorMessage = error.message;
+                // Check for common disconnection errors
+                if (errorMessage.includes("Target page, context or browser has been closed") ||
+                    errorMessage.includes("Target closed") ||
+                    errorMessage.includes("Browser has been disconnected")) {
+                    // Reset browser state to force recreation on next attempt
+                    resetBrowserState();
+                    return createErrorResponse(`Browser connection issue: ${errorMessage}. Connection has been reset - please retry your navigation.`);
+                }
+                // For other errors, return the standard error
+                throw error;
+            }
+        });
+    }
+}
+/**
+ * Tool for closing the browser
+ */
+export class CloseBrowserTool extends BrowserToolBase {
+    /**
+     * Execute the close browser tool
+     */
+    async execute(args, context) {
+        if (context.browser) {
+            try {
+                // Check if browser is still connected
+                if (context.browser.isConnected()) {
+                    await context.browser.close().catch(error => {
+                        console.error("Error while closing browser:", error);
+                    });
+                }
+                else {
+                    console.error("Browser already disconnected, cleaning up state");
+                }
+            }
+            catch (error) {
+                console.error("Error during browser close operation:", error);
+                // Continue with resetting state even if close fails
+            }
+            finally {
+                // Always reset the global browser and page references
+                resetBrowserState();
+            }
+            return createSuccessResponse("Browser closed successfully");
+        }
+        return createSuccessResponse("No browser instance to close");
+    }
+}
+/**
+ * Tool for navigating back in browser history
+ */
+export class GoBackTool extends BrowserToolBase {
+    /**
+     * Execute the go back tool
+     */
+    async execute(args, context) {
+        this.recordNavigation();
+        return this.safeExecute(context, async (page) => {
+            await page.goBack();
+            return createSuccessResponse("Navigated back in browser history");
+        });
+    }
+}
+/**
+ * Tool for navigating forward in browser history
+ */
+export class GoForwardTool extends BrowserToolBase {
+    /**
+     * Execute the go forward tool
+     */
+    async execute(args, context) {
+        this.recordNavigation();
+        return this.safeExecute(context, async (page) => {
+            await page.goForward();
+            return createSuccessResponse("Navigated forward in browser history");
+        });
+    }
+}

package/dist/tools/browser/output.d.ts

@@ -0,0 +1,11 @@
+import { BrowserToolBase } from './base.js';
+import { ToolContext, ToolResponse } from '../common/types.js';
+/**
+ * Tool for saving page as PDF
+ */
+export declare class SaveAsPdfTool extends BrowserToolBase {
+    /**
+     * Execute the save as PDF tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}

package/dist/tools/browser/output.js

@@ -0,0 +1,29 @@
+import { BrowserToolBase } from './base.js';
+import { createSuccessResponse } from '../common/types.js';
+import * as path from 'path';
+/**
+ * Tool for saving page as PDF
+ */
+export class SaveAsPdfTool extends BrowserToolBase {
+    /**
+     * Execute the save as PDF tool
+     */
+    async execute(args, context) {
+        return this.safeExecute(context, async (page) => {
+            const filename = args.filename || 'page.pdf';
+            const options = {
+                path: path.resolve(args.outputPath || '.', filename),
+                format: args.format || 'A4',
+                printBackground: args.printBackground !== false,
+                margin: args.margin || {
+                    top: '1cm',
+                    right: '1cm',
+                    bottom: '1cm',
+                    left: '1cm'
+                }
+            };
+            await page.pdf(options);
+            return createSuccessResponse(`Saved page as PDF: ${options.path}`);
+        });
+    }
+}