mcp-web-inspector 0.1.0

package/dist/tools/browser/getRequestDetails.js

@@ -0,0 +1,137 @@
+import { BrowserToolBase } from './base.js';
+import { getNetworkLog } from '../../toolHandler.js';
+export class GetRequestDetailsTool extends BrowserToolBase {
+    async execute(args, context) {
+        return this.safeExecute(context, async () => {
+            const { index } = args;
+            const networkLog = getNetworkLog();
+            if (index < 0 || index >= networkLog.length) {
+                return {
+                    content: [{
+                            type: "text",
+                            text: `Error: Invalid index ${index}. Valid range: 0-${networkLog.length - 1}`
+                        }],
+                    isError: true
+                };
+            }
+            const req = networkLog[index];
+            // Build compact text response
+            const lines = [];
+            lines.push(`Request Details [${index}]:\n`);
+            lines.push(`${req.method} ${req.url}`);
+            if (req.status) {
+                lines.push(`Status: ${req.status} ${req.statusText || 'OK'} (took ${req.timing}ms)`);
+            }
+            else {
+                lines.push(`Status: Pending (no response yet)`);
+            }
+            // Calculate sizes
+            const requestSize = req.requestData.postData
+                ? req.requestData.postData.length
+                : 0;
+            const responseSize = req.responseData?.body
+                ? req.responseData.body.length
+                : 0;
+            const formatBytes = (bytes) => {
+                if (bytes === 0)
+                    return '0 bytes';
+                if (bytes < 1024)
+                    return `${bytes} bytes`;
+                return `${(bytes / 1024).toFixed(1)}KB`;
+            };
+            if (responseSize > 0) {
+                lines.push(`Size: ${formatBytes(requestSize)} → ${formatBytes(responseSize)}`);
+            }
+            else if (requestSize > 0) {
+                lines.push(`Size: ${formatBytes(requestSize)} →`);
+            }
+            // Request headers (show important ones)
+            const importantRequestHeaders = ['content-type', 'authorization', 'cookie', 'user-agent', 'accept'];
+            const reqHeaders = Object.entries(req.requestData.headers)
+                .filter(([key]) => importantRequestHeaders.includes(key.toLowerCase()));
+            if (reqHeaders.length > 0) {
+                lines.push('\nRequest Headers:');
+                reqHeaders.forEach(([key, value]) => {
+                    // Truncate sensitive values
+                    if (key.toLowerCase() === 'authorization' || key.toLowerCase() === 'cookie') {
+                        const truncated = value.length > 20
+                            ? value.substring(0, 17) + '...'
+                            : value;
+                        lines.push(`  ${key}: ${truncated}`);
+                    }
+                    else {
+                        lines.push(`  ${key}: ${value}`);
+                    }
+                });
+            }
+            // Request body
+            if (req.requestData.postData) {
+                lines.push('\nRequest Body:');
+                // Mask passwords in JSON
+                let displayData = req.requestData.postData;
+                try {
+                    const parsed = JSON.parse(displayData);
+                    if (parsed.password)
+                        parsed.password = '***';
+                    if (parsed.pass)
+                        parsed.pass = '***';
+                    displayData = JSON.stringify(parsed);
+                }
+                catch (e) {
+                    // Not JSON, use as is
+                }
+                // Truncate at 500 chars
+                if (displayData.length > 500) {
+                    lines.push(`  ${displayData.substring(0, 500)}`);
+                    lines.push(`  ... [${displayData.length - 500} more chars]`);
+                }
+                else {
+                    lines.push(`  ${displayData}`);
+                }
+            }
+            // Response headers (show important ones)
+            const importantResponseHeaders = ['content-type', 'set-cookie', 'cache-control', 'location', 'x-cache'];
+            const respHeaders = req.responseData?.headers
+                ? Object.entries(req.responseData.headers)
+                    .filter(([key]) => importantResponseHeaders.includes(key.toLowerCase()))
+                : [];
+            if (respHeaders.length > 0) {
+                lines.push('\nResponse Headers:');
+                respHeaders.forEach(([key, value]) => {
+                    // Truncate cookies
+                    if (key.toLowerCase() === 'set-cookie') {
+                        const truncated = value.length > 60
+                            ? value.substring(0, 57) + '...'
+                            : value;
+                        lines.push(`  ${key}: ${truncated}`);
+                    }
+                    else {
+                        lines.push(`  ${key}: ${value}`);
+                    }
+                });
+            }
+            // Response body
+            if (req.responseData?.body) {
+                lines.push('\nResponse Body (truncated at 500 chars):');
+                const body = req.responseData.body;
+                if (body.length > 500) {
+                    lines.push(`  ${body.substring(0, 500)}`);
+                    lines.push(`  ... [${body.length - 500} more chars]`);
+                }
+                else {
+                    lines.push(`  ${body}`);
+                }
+            }
+            else if (req.status) {
+                lines.push('\nResponse Body: (none or binary data)');
+            }
+            return {
+                content: [{
+                        type: "text",
+                        text: lines.join('\n')
+                    }],
+                isError: false
+            };
+        });
+    }
+}

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

@@ -0,0 +1,12 @@
+import { BrowserToolBase } from './base.js';
+import { ToolContext, ToolResponse } from '../common/types.js';
+/**
+ * Tool for discovering all test identifiers on the page
+ * Returns compact text format showing all data-testid, data-test, data-cy attributes
+ */
+export declare class GetTestIdsTool extends BrowserToolBase {
+    /**
+     * Execute the test ID discovery tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}

package/dist/tools/browser/getTestIds.js

@@ -0,0 +1,148 @@
+import { BrowserToolBase } from './base.js';
+import { createSuccessResponse, createErrorResponse } from '../common/types.js';
+/**
+ * Tool for discovering all test identifiers on the page
+ * Returns compact text format showing all data-testid, data-test, data-cy attributes
+ */
+export class GetTestIdsTool extends BrowserToolBase {
+    /**
+     * Execute the test ID discovery tool
+     */
+    async execute(args, context) {
+        return this.safeExecute(context, async (page) => {
+            const attributes = args.attributes
+                ? args.attributes.split(',').map((a) => a.trim())
+                : ['data-testid', 'data-test', 'data-cy'];
+            const showAll = args.showAll === true;
+            try {
+                // Discover all test IDs on the page
+                const discoveryData = await page.evaluate((attrs) => {
+                    const byAttribute = {};
+                    const duplicates = {};
+                    let totalCount = 0;
+                    attrs.forEach((attr) => {
+                        const elements = document.querySelectorAll(`[${attr}]`);
+                        const values = [];
+                        const counts = {};
+                        elements.forEach((el) => {
+                            const value = el.getAttribute(attr);
+                            if (value) {
+                                values.push(value);
+                                totalCount++;
+                                // Track duplicates
+                                counts[value] = (counts[value] || 0) + 1;
+                            }
+                        });
+                        if (values.length > 0) {
+                            byAttribute[attr] = values;
+                            // Store duplicates (values that appear more than once)
+                            const attrDuplicates = {};
+                            Object.entries(counts).forEach(([value, count]) => {
+                                if (count > 1) {
+                                    attrDuplicates[value] = count;
+                                }
+                            });
+                            if (Object.keys(attrDuplicates).length > 0) {
+                                duplicates[attr] = attrDuplicates;
+                            }
+                        }
+                    });
+                    return {
+                        totalCount,
+                        byAttribute,
+                        duplicates,
+                    };
+                }, attributes);
+                // Format compact text output
+                const lines = [];
+                if (discoveryData.totalCount === 0) {
+                    lines.push('Found 0 test IDs');
+                    lines.push('');
+                    lines.push('⚠ No test ID attributes found on this page.');
+                    lines.push('');
+                    lines.push('Searched for:');
+                    attributes.forEach((attr) => {
+                        lines.push(`  • ${attr}`);
+                    });
+                    lines.push('');
+                    lines.push('Suggestions:');
+                    lines.push('  - Use inspect_dom to see page structure');
+                    lines.push('  - Consider adding test IDs to interactive elements');
+                    lines.push('  - Example: <button data-testid="submit-button">Submit</button>');
+                }
+                else {
+                    lines.push(`Found ${discoveryData.totalCount} test ID${discoveryData.totalCount > 1 ? 's' : ''}:`);
+                    lines.push('');
+                    // Group by attribute type
+                    Object.entries(discoveryData.byAttribute).forEach(([attr, values]) => {
+                        lines.push(`${attr} (${values.length}):`);
+                        // Format values in a compact way
+                        if (showAll || values.length <= 10) {
+                            // Show all if requested or if 10 or fewer
+                            lines.push(`  ${values.join(', ')}`);
+                        }
+                        else {
+                            // Show first 8, then indicate more
+                            const shown = values.slice(0, 8);
+                            const remaining = values.length - 8;
+                            lines.push(`  ${shown.join(', ')},`);
+                            lines.push(`  ... and ${remaining} more`);
+                            lines.push(`  💡 Use showAll: true to see all ${values.length} test IDs`);
+                        }
+                        lines.push('');
+                    });
+                    // Add duplicate warnings
+                    const hasDuplicates = Object.keys(discoveryData.duplicates).length > 0;
+                    if (hasDuplicates) {
+                        lines.push('⚠ Warning: Duplicate test IDs found (test IDs should be unique):');
+                        lines.push('');
+                        Object.entries(discoveryData.duplicates).forEach(([attr, dups]) => {
+                            Object.entries(dups).forEach(([value, count]) => {
+                                lines.push(`  ${attr}: "${value}" appears ${count} times`);
+                            });
+                        });
+                        lines.push('');
+                        lines.push('⚠ Impact of Duplicate Test IDs:');
+                        lines.push('   - Flaky tests (selectors match multiple elements)');
+                        lines.push('   - Ambiguous interactions (which element to click?)');
+                        lines.push('   - Test automation will fail or behave unpredictably');
+                        lines.push('');
+                        lines.push('🔧 How to Fix:');
+                        lines.push('   1. Use query_selector_all to locate all duplicates');
+                        // Add example for the first duplicate
+                        const firstDupAttr = Object.keys(discoveryData.duplicates)[0];
+                        const firstDupValue = Object.keys(discoveryData.duplicates[firstDupAttr])[0];
+                        const firstDupCount = discoveryData.duplicates[firstDupAttr][firstDupValue];
+                        if (firstDupAttr === 'data-testid') {
+                            lines.push(`      query_selector_all({ selector: "testid:${firstDupValue}" })`);
+                        }
+                        else {
+                            lines.push(`      query_selector_all({ selector: "[${firstDupAttr}='${firstDupValue}']" })`);
+                        }
+                        lines.push('   2. Identify which elements should keep the test ID');
+                        lines.push('   3. Rename duplicates to be unique and descriptive');
+                        lines.push(`      Example: "${firstDupValue}" → "${firstDupValue}-primary", "${firstDupValue}-mobile"`);
+                        lines.push('   4. If one is hidden/unused, consider removing it entirely');
+                        lines.push('');
+                        lines.push('💡 Best Practice: Test IDs must be unique across the entire page');
+                        lines.push('');
+                    }
+                    // Add usage tip
+                    lines.push('💡 Tip: Use these test IDs with selector shortcuts:');
+                    const firstAttr = Object.keys(discoveryData.byAttribute)[0];
+                    const firstValue = discoveryData.byAttribute[firstAttr][0];
+                    if (firstAttr === 'data-testid') {
+                        lines.push(`   testid:${firstValue} → [data-testid="${firstValue}"]`);
+                    }
+                    else {
+                        lines.push(`   ${firstAttr}:${firstValue} → [${firstAttr}="${firstValue}"]`);
+                    }
+                }
+                return createSuccessResponse(lines.join('\n'));
+            }
+            catch (error) {
+                return createErrorResponse(`Failed to discover test IDs: ${error.message}`);
+            }
+        });
+    }
+}

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

@@ -0,0 +1,7 @@
+export * from './base.js';
+export * from './screenshot.js';
+export * from './navigation.js';
+export * from './console.js';
+export * from './interaction.js';
+export * from './response.js';
+export * from './useragent.js';

package/dist/tools/browser/index.js

@@ -0,0 +1,7 @@
+export * from './base.js';
+export * from './screenshot.js';
+export * from './navigation.js';
+export * from './console.js';
+export * from './interaction.js';
+export * from './response.js';
+export * from './useragent.js';

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

@@ -0,0 +1,12 @@
+import { BrowserToolBase } from './base.js';
+import { ToolContext, ToolResponse } from '../common/types.js';
+/**
+ * Tool for progressive DOM inspection with semantic filtering and spatial layout
+ * This is the PRIMARY tool for understanding page structure
+ */
+export declare class InspectDomTool extends BrowserToolBase {
+    /**
+     * Execute the DOM inspection tool
+     */
+    execute(args: any, context: ToolContext): Promise<ToolResponse>;
+}