@wordbricks/playwright-mcp 0.1.3

package/lib/tools/navigate.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { z } from 'zod';
+import { defineTool, defineTabTool } from './tool.js';
+const navigate = defineTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_navigate',
+        title: 'Navigate to a URL',
+        description: 'Navigate to a URL',
+        inputSchema: z.object({
+            url: z.string().describe('The URL to navigate to'),
+        }),
+        type: 'destructive',
+    },
+    handle: async (context, params, response) => {
+        const tab = await context.ensureTab();
+        await tab.navigate(params.url);
+        response.setIncludeSnapshot();
+        response.addCode(`await page.goto('${params.url}');`);
+    },
+});
+const goBack = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_navigate_back',
+        title: 'Go back',
+        description: 'Go back to the previous page',
+        inputSchema: z.object({}),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        await tab.page.goBack();
+        response.setIncludeSnapshot();
+        response.addCode(`await page.goBack();`);
+    },
+});
+const goForward = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_navigate_forward',
+        title: 'Go forward',
+        description: 'Go forward to the next page',
+        inputSchema: z.object({}),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        await tab.page.goForward();
+        response.setIncludeSnapshot();
+        response.addCode(`await page.goForward();`);
+    },
+});
+export default [
+    navigate,
+    goBack,
+    goForward,
+];

package/lib/tools/network.js

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { z } from 'zod';
+import { defineTabTool } from './tool.js';
+import { formatUrlWithTrimmedParams } from '../hooks/networkFilters.js';
+// const requests = defineTool({
+//   capability: 'core',
+//   schema: {
+//     name: 'browser_network_requests',
+//     title: 'List network requests',
+//     description: 'Returns all network requests since loading the page',
+//     inputSchema: z.object({}),
+//     type: 'readOnly',
+//   },
+//   handle: async ctx => {
+//     const reqs = await pipe(
+//         ctx.currentTabOrDie().requests().entries(),
+//         filter(([request, response]) => ['document', 'xhr', 'fetch'].includes(request.resourceType())),
+//         // GET, POST
+//         filter(([request, response]) => ['GET', 'POST'].includes(request.method())),
+//         // 2xx
+//         filter(([request, response]) => response?.ok()),
+//         // 204 No Content
+//         reject(([request, response]) => response?.status() === 204),
+//         // body length > 0
+//         toAsync,
+//         filter(([request, response]) => response ? withTimeout(response.body(), 500).catch(() => []).then(body => body.length > 0) : Promise.resolve(false)),
+//         uniqBy(([request, response]) => JSON.stringify({
+//           url: request.url(),
+//           body: request.postData(),
+//         })),
+//         toArray,
+//     );
+//     const lines = await Promise.all(
+//         reqs.map(([request, response]) => renderRequest(request, response))
+//     );
+//     const log = lines.join('\n');
+//     return {
+//       code: [`// <internal code to list network requests>`],
+//       action: async () => {
+//         return {
+//           content: [{ type: 'text', text: log }]
+//         };
+//       },
+//       captureSnapshot: false,
+//       waitForNetwork: false,
+//     };
+//   },
+// });
+const requests = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_network_requests',
+        title: 'List network requests',
+        description: 'Returns all network requests since loading the page',
+        inputSchema: z.object({}),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        const requests = tab.requests();
+        for (const [req, res] of requests.entries())
+            response.addResult(await renderRequest(req, res));
+    },
+});
+export async function renderRequest(request, response) {
+    const result = [];
+    // Basic request information (trimmed URL params for token efficiency)
+    const trimmedUrl = formatUrlWithTrimmedParams(request.url());
+    result.push(`[${request.method().toUpperCase()}] ${trimmedUrl}`);
+    // Append response status if available with compact content-type
+    if (response) {
+        const ct = response.headers()?.['content-type'];
+        result.push(`=> [${response.status()}] ${response.statusText()}${ct ? ` ct=${ct}` : ''}`);
+    }
+    // Always include request headers (excluding HTTP/2 pseudo-headers and common headers)
+    // const allHeaders = await request.allHeaders();
+    // const headers = Object.fromEntries(
+    //     Object.entries(allHeaders).filter(([key]) => {
+    //       const lowerKey = key.toLowerCase();
+    //       // Filter out HTTP/2 pseudo-headers
+    //       if (lowerKey.startsWith(':'))
+    //         return false;
+    //       // Filter out specified headers
+    //       if (lowerKey === 'accept-encoding' ||
+    //           lowerKey.startsWith('sec-') ||
+    //           lowerKey.startsWith('sentry-') ||
+    //           lowerKey === 'baggage' ||
+    //           lowerKey === 'ect' ||
+    //           lowerKey === 'connection' ||
+    //           lowerKey === 'accept-language' ||
+    //           lowerKey === 'priority' ||
+    //           lowerKey === 'user-agent' ||
+    //           lowerKey === 'upgrade-insecure-requests' ||
+    //           lowerKey === 'cache-control')
+    //         return false;
+    //       return true;
+    //     })
+    // );
+    // result.push(`headers=${JSON.stringify(headers)}`);
+    // Include raw body when method is not GET
+    // if (request.method().toUpperCase() !== 'GET') {
+    //   const body = request.postData();
+    //   if (body)
+    //     result.push(`body=${body}`);
+    // }
+    return result.join('\n');
+}
+export default [
+    requests,
+];

package/lib/tools/networkDetail.js

@@ -0,0 +1,231 @@
+import { z } from 'zod';
+import ms from 'ms';
+import * as cheerio from 'cheerio';
+import { defineTabTool } from './tool.js';
+import { removeNonEssentialLinks, removeMetaTags, removeHtmlComments, stripSvgAttributes, minifyHtml } from '../utils/sanitizeHtml.js';
+import { formatTruncationLine } from '../utils/truncate.js';
+import { withTimeout } from '../utils/withTimeout.js';
+import { getNetworkEventEntry } from '../hooks/networkSetup.js';
+import { parseGraphQLRequestFromHttp, summarizeGraphQL, extractGraphQLResponseInfo, minifyGraphQLQuery, minifyGraphQLRequestBody } from '../utils/graphql.js';
+import { formatNetworkSummaryLine } from '../utils/networkFormat.js';
+const TIMEOUT_MS = ms('5s');
+const CHUNK_BYTES = 8 * 1024; // 8KB per page
+const contextBodyMap = new WeakMap();
+// Skip HTTP/2 pseudo-headers and their non-colon variants in displayed request headers
+const SKIP_REQUEST_HEADER_KEYS = new Set([
+    ':authority',
+    ':method',
+    ':path',
+    ':scheme',
+    'authority',
+    'method',
+    'path',
+    'scheme',
+]);
+const getStateMap = (ctx) => {
+    let m = contextBodyMap.get(ctx);
+    if (!m) {
+        m = new Map();
+        contextBodyMap.set(ctx, m);
+    }
+    return m;
+};
+const networkDetailSchema = z.object({
+    id: z.number().describe('The network event id from events log'),
+});
+const normalizeHeaderKeys = (headers) => {
+    const out = {};
+    for (const [k, v] of Object.entries(headers))
+        out[k.toLowerCase()] = v;
+    return out;
+};
+const formatBytes = (n) => {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let i = 0;
+    let v = n;
+    while (v >= 1024 && i < units.length - 1) {
+        v /= 1024;
+        i++;
+    }
+    const digits = v < 10 && i > 0 ? 1 : 0;
+    return `${v.toFixed(digits)} ${units[i]}`;
+};
+const formatRequestDetail = async (ctx, { request, response, id, }) => {
+    const lines = [];
+    const reqHeaders = normalizeHeaderKeys(await request.allHeaders());
+    const requestBody = request.postData();
+    lines.push(formatNetworkSummaryLine({
+        method: request.method(),
+        url: request.url(),
+        status: response ? response.status() : 0,
+        statusText: response?.statusText(),
+        postData: requestBody,
+        headers: reqHeaders,
+    }, { trimParams: false }));
+    const timing = response ? response.request().timing() : null;
+    if (timing) {
+        const duration = Math.round(timing.responseEnd - timing.requestStart);
+        if (!Number.isNaN(duration))
+            lines.push(`Duration: ${duration}ms`);
+    }
+    lines.push(`Failure: ${request.failure()?.errorText || 'None'}`);
+    if (!response) {
+        lines.push(`\nRequest Headers:`);
+        const headerKeysNoResp = Object.keys(reqHeaders)
+            .filter(k => !SKIP_REQUEST_HEADER_KEYS.has(k))
+            .sort();
+        for (const key of headerKeysNoResp)
+            lines.push(`${key}: ${reqHeaders[key]}`);
+        lines.push(`\nNo response received yet`);
+        return lines.join('\n');
+    }
+    // Determine if this request is GraphQL (used for both request and response sections)
+    const gqlReq = parseGraphQLRequestFromHttp(request.method(), request.url(), reqHeaders, requestBody);
+    const map = getStateMap(ctx);
+    const existing = map.get(id);
+    let state;
+    if (!existing) {
+        state = { cursor: 0, headersShown: false, isGraphQLRequest: !!gqlReq };
+        map.set(id, state);
+    }
+    else {
+        state = existing;
+        state.isGraphQLRequest = !!gqlReq;
+    }
+    // Headers printed once (first call)
+    if (!state.headersShown) {
+        // Print full request headers on the first call (excluding authority/method/path/scheme)
+        lines.push(`\nRequest Headers:`);
+        const headerKeys = Object.keys(reqHeaders)
+            .filter(k => !SKIP_REQUEST_HEADER_KEYS.has(k))
+            .sort();
+        for (const key of headerKeys)
+            lines.push(`${key}: ${reqHeaders[key]}`);
+        const reqCt = reqHeaders['content-type'];
+        // GraphQL request summary (if applicable) and compact body handling
+        if (gqlReq) {
+            lines.push(`\nGraphQL Request: ${summarizeGraphQL(gqlReq)}`);
+            if (gqlReq.variables && typeof gqlReq.variables === 'object' && !Array.isArray(gqlReq.variables)) {
+                const varKeys = Object.keys(gqlReq.variables);
+                if (varKeys.length)
+                    lines.push(`Variables: { ${varKeys.join(', ')} }`);
+            }
+        }
+        if (requestBody) {
+            if (gqlReq) {
+                lines.push(`\nRequest Body (GraphQL):`);
+                try {
+                    if (reqCt && reqCt.includes('application/graphql')) {
+                        lines.push(minifyGraphQLQuery(requestBody));
+                    }
+                    else {
+                        const body = JSON.parse(requestBody);
+                        const minimized = minifyGraphQLRequestBody(body);
+                        lines.push(JSON.stringify(minimized, null, 2));
+                    }
+                }
+                catch {
+                    lines.push(requestBody);
+                }
+            }
+            else {
+                lines.push(`\nRequest Body:`);
+                try {
+                    lines.push(JSON.stringify(JSON.parse(requestBody), null, 2));
+                }
+                catch {
+                    lines.push(requestBody);
+                }
+            }
+        }
+        const resHeaders = normalizeHeaderKeys(await response.allHeaders());
+        const resCt = resHeaders['content-type'];
+        const resCl = resHeaders['content-length'];
+        const headerParts = [];
+        if (resCt)
+            headerParts.push(`content-type=${resCt}`);
+        if (resCl)
+            headerParts.push(`content-length=${resCl}`);
+        if (headerParts.length)
+            lines.push(`\nResponse Headers: { ${headerParts.join(', ')} }`);
+    }
+    // Fetch the full body each time
+    let buf;
+    try {
+        buf = await withTimeout(response.body(), TIMEOUT_MS);
+    }
+    catch (e) {
+        const msg = e instanceof Error ? e.message : String(e);
+        lines.push(`\nFailed to read response body: ${msg}`);
+        return lines.join('\n');
+    }
+    // On first page, summarize GraphQL response if applicable
+    if (!state.headersShown && state.isGraphQLRequest) {
+        try {
+            const fullText = buf.toString('utf8');
+            const gqlInfo = extractGraphQLResponseInfo(fullText);
+            if (gqlInfo) {
+                lines.push(`\nGraphQL Response: ${gqlInfo.hasErrors ? `${gqlInfo.errorCount} error(s)` : 'ok'}`);
+                if (gqlInfo.topMessages.length)
+                    lines.push(`Errors: ${gqlInfo.topMessages.join(' | ')}`);
+                if (gqlInfo.dataKeys.length)
+                    lines.push(`Data keys: ${gqlInfo.dataKeys.join(', ')}`);
+            }
+        }
+        catch { }
+    }
+    // Reset if finished in a prior call
+    if (state.cursor >= buf.length) {
+        state.cursor = 0;
+        state.headersShown = false; // allow headers again after a full pass
+    }
+    let bodyText = buf.toString('utf8');
+    const resHeadersForBody = normalizeHeaderKeys(await response.allHeaders());
+    const resCtForBody = resHeadersForBody['content-type'] || '';
+    const isHtml = resCtForBody.includes('html');
+    if (isHtml) {
+        const $ = cheerio.load(bodyText, { xmlMode: false });
+        removeNonEssentialLinks($);
+        removeMetaTags($);
+        removeHtmlComments($);
+        stripSvgAttributes($);
+        bodyText = minifyHtml($.root().html() || '');
+    }
+    const totalLength = bodyText.length;
+    const start = state.cursor;
+    const end = Math.min(start + CHUNK_BYTES, totalLength);
+    const chunk = bodyText.slice(start, end);
+    const nextCursor = end;
+    const more = nextCursor < totalLength;
+    const percent = totalLength ? Math.round((nextCursor / totalLength) * 100) : 100;
+    lines.push(`\nBody Chunk (text): ${percent}%${more ? ' (more)' : ' (done)'}:`);
+    lines.push(chunk);
+    if (more)
+        lines.push(formatTruncationLine(nextCursor, buf.length, { formatter: formatBytes }));
+    state.cursor = nextCursor;
+    state.headersShown = true;
+    return lines.join('\n');
+};
+const networkDetail = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_network_detail',
+        title: 'Get network request detail',
+        description: 'Show detailed info for a specific network request by event id. Call repeatedly to page through the body.',
+        inputSchema: networkDetailSchema,
+        type: 'readOnly',
+    },
+    handle: async (tab, params, r) => {
+        const entry = getNetworkEventEntry(tab.context, params.id);
+        if (!entry) {
+            r.addResult(`Network request with ID ${params.id} not found`);
+            return;
+        }
+        r.addResult(await formatRequestDetail(tab.context, {
+            request: entry.request,
+            response: entry.response,
+            id: params.id,
+        }));
+    },
+});
+export default [networkDetail];

package/lib/tools/networkSearch/bodySearch.js

@@ -0,0 +1,141 @@
+import { withTimeout } from '../../utils/withTimeout.js';
+import { searchInHtml } from './searchHtml.js';
+import { highlightMatch } from './helpers.js';
+const CONTEXT_LENGTH_BODY = 400;
+const CONTEXT_LENGTH_DEFAULT = 300;
+const MAX_SEARCH_DEPTH = 20;
+export const searchInObject = (obj, keyword, path, matches, depth = 0) => {
+    if (depth > MAX_SEARCH_DEPTH || !obj || typeof obj !== 'object')
+        return;
+    for (const key in obj) {
+        const newPath = path ? `${path}.${key}` : key;
+        const value = obj[key];
+        if (key.toLowerCase().includes(keyword)) {
+            const highlightedKey = highlightMatch(key, keyword, CONTEXT_LENGTH_DEFAULT);
+            const valueContext = typeof value === 'object' && value !== null
+                ? truncateJsonPreview(value)
+                : truncateStringPreview(String(value));
+            matches.push({
+                path: newPath,
+                value: typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value),
+                context: `${highlightedKey}: ${valueContext}`,
+            });
+        }
+        if (typeof value === 'string' && value.toLowerCase().includes(keyword)) {
+            matches.push({
+                path: newPath,
+                value: value,
+                context: `${key}: ${highlightMatch(value, keyword, CONTEXT_LENGTH_DEFAULT)}`,
+            });
+        }
+        else if (typeof value === 'number' && String(value).includes(keyword)) {
+            const valueStr = String(value);
+            matches.push({
+                path: newPath,
+                value: valueStr,
+                context: `${key}: ${highlightMatch(valueStr, keyword, CONTEXT_LENGTH_DEFAULT)}`,
+            });
+        }
+        if (typeof value === 'object' && value !== null)
+            searchInObject(value, keyword, newPath, matches, depth + 1);
+    }
+};
+const truncateStringPreview = (text) => text.length > CONTEXT_LENGTH_DEFAULT ? text.slice(0, CONTEXT_LENGTH_DEFAULT) + '...' : text;
+const truncateJsonPreview = (obj) => {
+    try {
+        return JSON.stringify(obj).slice(0, CONTEXT_LENGTH_BODY) + '...';
+    }
+    catch {
+        return '[Object]';
+    }
+};
+export const searchInRequestBody = (request, keyword, matches) => {
+    const body = request.postData();
+    if (!body || !body.toLowerCase().includes(keyword))
+        return;
+    const requestContentType = request.headers()['content-type'] || '';
+    let handled = false;
+    if (requestContentType.includes('application/json') || body.trim().startsWith('{') || body.trim().startsWith('[')) {
+        try {
+            const parsed = JSON.parse(body);
+            searchInObject(parsed, keyword, 'request.body', matches);
+            handled = true;
+        }
+        catch { }
+    }
+    if (!handled && (requestContentType.includes('text/html') || body.trim().startsWith('<'))) {
+        searchInHtml(body, keyword, 'request.body', matches);
+        handled = true;
+    }
+    if (!handled && requestContentType.includes('application/x-www-form-urlencoded')) {
+        try {
+            const sp = new URLSearchParams(body);
+            for (const [k, v] of sp.entries()) {
+                const vStr = v || '';
+                if (!vStr.toLowerCase().includes(keyword))
+                    continue;
+                const trimmed = vStr.trim();
+                let parsedOk = false;
+                if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+                    try {
+                        const parsed = JSON.parse(trimmed);
+                        searchInObject(parsed, keyword, `request.body.form.${k}`, matches);
+                        parsedOk = true;
+                    }
+                    catch { }
+                }
+                if (!parsedOk) {
+                    matches.push({
+                        path: `request.body.form.${k}`,
+                        value: vStr,
+                        context: `${k}=${highlightMatch(vStr, keyword, CONTEXT_LENGTH_DEFAULT)}`,
+                    });
+                }
+            }
+            handled = true;
+        }
+        catch { }
+    }
+    if (!handled) {
+        matches.push({
+            path: 'request.body',
+            value: body,
+            context: highlightMatch(body, keyword, CONTEXT_LENGTH_BODY),
+        });
+    }
+};
+export const searchInResponseBody = async (response, keyword, matches) => {
+    const contentTypeHeader = response.headers()['content-type'] || '';
+    if (!(contentTypeHeader.startsWith('text/') || contentTypeHeader.includes('application/json') || contentTypeHeader.includes('application/xml')))
+        return;
+    try {
+        const responseBody = await withTimeout(response.text(), 2000);
+        if (!responseBody || !responseBody.toLowerCase().includes(keyword))
+            return;
+        let handled = false;
+        const trimmed = responseBody.trimStart();
+        const xssiPrefix = ")]}'";
+        const hasXssi = trimmed.startsWith(xssiPrefix);
+        const jsonCandidate = hasXssi ? trimmed.slice(xssiPrefix.length) : trimmed;
+        if (contentTypeHeader.includes('application/json') || jsonCandidate.startsWith('{') || jsonCandidate.startsWith('[')) {
+            try {
+                const parsed = JSON.parse(jsonCandidate);
+                searchInObject(parsed, keyword, 'response.body', matches);
+                handled = true;
+            }
+            catch { }
+        }
+        if (!handled && (contentTypeHeader.includes('text/html') || responseBody.trim().startsWith('<'))) {
+            searchInHtml(responseBody, keyword, 'response.body', matches);
+            handled = true;
+        }
+        if (!handled) {
+            matches.push({
+                path: 'response.body',
+                value: responseBody,
+                context: highlightMatch(responseBody, keyword, CONTEXT_LENGTH_BODY),
+            });
+        }
+    }
+    catch { }
+};

package/lib/tools/networkSearch/grouping.js

@@ -0,0 +1,28 @@
+export const normalizePath = (path) => {
+    if (path.includes(' > '))
+        return path.replace(/:nth-child\(\d+\)/g, ':nth-child(*)');
+    return path.replace(/\.(?:\d+)(?=\.|$)/g, '.*');
+};
+export const getDepth = (path) => {
+    const separators = path.match(/\.|>/g) || [];
+    return separators.length;
+};
+export const mergeGroupedMatches = (a, b) => {
+    const map = new Map();
+    for (const g of a)
+        map.set(g.normalized, { normalized: g.normalized, count: g.count, examples: g.examples.slice(0, 3) });
+    for (const g of b) {
+        const existing = map.get(g.normalized);
+        if (existing) {
+            existing.count += g.count;
+            for (const e of g.examples) {
+                if (existing.examples.length < 3 && !existing.examples.some(x => x.context === e.context))
+                    existing.examples.push(e);
+            }
+        }
+        else {
+            map.set(g.normalized, { normalized: g.normalized, count: g.count, examples: g.examples.slice(0, 3) });
+        }
+    }
+    return Array.from(map.values());
+};

package/lib/tools/networkSearch/helpers.js

@@ -0,0 +1,32 @@
+import { truncateStringTo } from '../../utils/truncate.js';
+export const parseKeywordParams = (keyword) => {
+    const out = [];
+    try {
+        const sp = new URLSearchParams(keyword);
+        sp.forEach((value, key) => {
+            if (key)
+                out.push({ name: key, value });
+        });
+    }
+    catch { }
+    return out;
+};
+export const highlightMatch = (text, keyword, maxLength = 50) => {
+    const lowerText = text.toLowerCase();
+    const index = lowerText.indexOf(keyword);
+    if (index === -1)
+        return truncateStringTo(text, maxLength).text;
+    const contextBefore = Math.floor((maxLength - keyword.length) / 2);
+    const contextAfter = maxLength - keyword.length - contextBefore;
+    const start = Math.max(0, index - contextBefore);
+    const end = Math.min(text.length, index + keyword.length + contextAfter);
+    let result = '';
+    if (start > 0)
+        result += '...';
+    result += text.substring(start, index);
+    result += text.substring(index, index + keyword.length);
+    result += text.substring(index + keyword.length, end);
+    if (end < text.length)
+        result += '...';
+    return result;
+};