@wordbricks/playwright-mcp 0.1.3

package/lib/tools/networkSearch/searchHtml.js

@@ -0,0 +1,65 @@
+import * as cheerio from 'cheerio';
+import { highlightMatch } from './helpers.js';
+export const getElementPath = ($el) => {
+    const path = [];
+    let current = $el;
+    while (current.length && current[0].type === 'tag' && current[0].name !== 'html') {
+        let selector = current[0].name.toLowerCase();
+        const id = current.attr('id');
+        if (id) {
+            selector += `#${id}`;
+            path.unshift(selector);
+            break;
+        }
+        const classes = current.attr('class');
+        if (classes)
+            selector += `.${classes.trim().split(/\s+/).join('.')}`;
+        const tagName = current[0].type === 'tag' ? current[0].name : '';
+        const siblings = current.parent().children().filter((_, el) => el.type === 'tag' && el.name === tagName);
+        if (siblings.length > 1) {
+            const index = siblings.index(current) + 1;
+            selector += `:nth-child(${index})`;
+        }
+        path.unshift(selector);
+        current = current.parent();
+    }
+    return path.join(' > ');
+};
+export const searchInHtml = (html, keyword, basePath, matches) => {
+    const $ = cheerio.load(html);
+    $('*').contents().each((_, node) => {
+        if (node.type === 'text') {
+            const text = (node.data || '').trim();
+            if (text && text.toLowerCase().includes(keyword)) {
+                const parent = $(node).parent();
+                if (parent.length) {
+                    const elPath = getElementPath(parent);
+                    const path = elPath ? `${basePath} > ${elPath}` : basePath;
+                    matches.push({
+                        path,
+                        value: text,
+                        context: highlightMatch(text, keyword, 300),
+                    });
+                }
+            }
+        }
+    });
+    $('*').each((_, el) => {
+        if (el.type === 'tag') {
+            const attrs = el.attribs;
+            if (attrs) {
+                Object.entries(attrs).forEach(([key, val]) => {
+                    if (typeof val === 'string' && val.toLowerCase().includes(keyword)) {
+                        const elPath = getElementPath($(el));
+                        const path = elPath ? `${basePath} > ${elPath}@${key}` : `${basePath}@${key}`;
+                        matches.push({
+                            path,
+                            value: val,
+                            context: highlightMatch(val, keyword, 300),
+                        });
+                    }
+                });
+            }
+        }
+    });
+};

package/lib/tools/networkSearch/types.js

@@ -0,0 +1 @@
+export {};

package/lib/tools/networkSearch/urlSearch.js

@@ -0,0 +1,82 @@
+import { highlightMatch } from './helpers.js';
+const CONTEXT_LENGTH_DEFAULT = 300;
+export const searchInUrls = (request, response, keyword, keywordParams, matches) => {
+    try {
+        const reqUrl = request.url();
+        const reqUrlLower = reqUrl.toLowerCase();
+        const keywordPathOnly = keyword.split('?')[0];
+        if (reqUrlLower.includes(keyword)) {
+            matches.push({ path: 'request.url', value: reqUrl, context: `url: ${highlightMatch(reqUrl, keyword, CONTEXT_LENGTH_DEFAULT)}` });
+        }
+        else if (keywordPathOnly && reqUrlLower.includes(keywordPathOnly)) {
+            matches.push({ path: 'request.url', value: reqUrl, context: `url: ${highlightMatch(reqUrl, keywordPathOnly, CONTEXT_LENGTH_DEFAULT)}` });
+        }
+        else {
+            try {
+                const u = new URL(reqUrl);
+                const pathnameLower = u.pathname.toLowerCase();
+                if (pathnameLower.includes(keyword) || (keywordPathOnly && pathnameLower.includes(keywordPathOnly)))
+                    matches.push({ path: 'request.url', value: reqUrl, context: `url: ${highlightMatch(reqUrl, keywordPathOnly || keyword, CONTEXT_LENGTH_DEFAULT)}` });
+            }
+            catch { }
+        }
+        if (keywordParams.length) {
+            try {
+                const u = new URL(reqUrl);
+                for (const { name, value } of keywordParams) {
+                    if (!name)
+                        continue;
+                    const pageVal = u.searchParams.get(name);
+                    if (!pageVal)
+                        continue;
+                    const valLower = (value || '').toLowerCase();
+                    if (!valLower)
+                        continue;
+                    const pageValLower = pageVal.toLowerCase();
+                    if (pageValLower.includes(valLower))
+                        matches.push({ path: `request.url.query.${name}`, value: pageVal, context: `${name}=${highlightMatch(pageVal, value, CONTEXT_LENGTH_DEFAULT)}` });
+                }
+            }
+            catch { }
+        }
+        if (response) {
+            const resUrl = response.url();
+            const resUrlLower = resUrl.toLowerCase();
+            if (resUrlLower.includes(keyword)) {
+                matches.push({ path: 'response.url', value: resUrl, context: `url: ${highlightMatch(resUrl, keyword, CONTEXT_LENGTH_DEFAULT)}` });
+            }
+            else if (keywordPathOnly && resUrlLower.includes(keywordPathOnly)) {
+                matches.push({ path: 'response.url', value: resUrl, context: `url: ${highlightMatch(resUrl, keywordPathOnly, CONTEXT_LENGTH_DEFAULT)}` });
+            }
+            else {
+                try {
+                    const u2 = new URL(resUrl);
+                    const pathnameLower2 = u2.pathname.toLowerCase();
+                    if (pathnameLower2.includes(keyword) || (keywordPathOnly && pathnameLower2.includes(keywordPathOnly)))
+                        matches.push({ path: 'response.url', value: resUrl, context: `url: ${highlightMatch(resUrl, keywordPathOnly || keyword, CONTEXT_LENGTH_DEFAULT)}` });
+                }
+                catch { }
+            }
+            if (keywordParams.length) {
+                try {
+                    const u2 = new URL(resUrl);
+                    for (const { name, value } of keywordParams) {
+                        if (!name)
+                            continue;
+                        const pageVal = u2.searchParams.get(name);
+                        if (!pageVal)
+                            continue;
+                        const valLower = (value || '').toLowerCase();
+                        if (!valLower)
+                            continue;
+                        const pageValLower = pageVal.toLowerCase();
+                        if (pageValLower.includes(valLower))
+                            matches.push({ path: `response.url.query.${name}`, value: pageVal, context: `${name}=${highlightMatch(pageVal, value, CONTEXT_LENGTH_DEFAULT)}` });
+                    }
+                }
+                catch { }
+            }
+        }
+    }
+    catch { }
+};

package/lib/tools/networkSearch.js

@@ -0,0 +1,168 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+import { getNetworkEventEntry } from '../hooks/networkSetup.js';
+import { listNetworkEvents } from '../hooks/networkTrackingHook.js';
+import { normalizeUrlForGrouping } from '../hooks/networkFilters.js';
+import { formatNetworkSummaryLine } from '../utils/networkFormat.js';
+import { toJsonPathNormalized } from '../utils/truncate.js';
+import { searchInUrls } from './networkSearch/urlSearch.js';
+import { searchInRequestBody, searchInResponseBody } from './networkSearch/bodySearch.js';
+import { normalizePath, getDepth, mergeGroupedMatches } from './networkSearch/grouping.js';
+import { parseKeywordParams } from './networkSearch/helpers.js';
+const MAX_SEARCH_RESULTS = 10;
+const MAX_GROUPS_TO_SHOW = 3;
+const networkSearchSchema = z.object({
+    keyword: z.string().describe('Keyword or phrase; avoid generic words—specific terms reduce noise and improve precision.'),
+});
+const networkSearch = defineTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_network_search',
+        title: 'Search network requests',
+        description: 'Search for keywords in network request/response bodies and URLs',
+        inputSchema: networkSearchSchema,
+        type: 'readOnly',
+    },
+    handle: async (context, params, response) => {
+        await context.ensureTab();
+        try {
+            const keyword = params.keyword?.toLowerCase();
+            if (!keyword) {
+                response.addResult('keyword parameter is required');
+                return;
+            }
+            const events = listNetworkEvents(context);
+            const keywordParams = parseKeywordParams(params.keyword);
+            const searchMatches = [];
+            for (const ev of events) {
+                const entry = getNetworkEventEntry(context, ev.id);
+                if (!entry)
+                    continue;
+                const request = entry.request;
+                const resp = entry.response ?? null;
+                const matches = [];
+                searchInUrls(request, resp, keyword, keywordParams, matches);
+                searchInRequestBody(request, keyword, matches);
+                if (resp)
+                    await searchInResponseBody(resp, keyword, matches);
+                if (matches.length > 0) {
+                    const groupMap = new Map();
+                    for (const m of matches) {
+                        const normalized = normalizePath(m.path);
+                        let group = groupMap.get(normalized);
+                        if (!group) {
+                            group = { normalized, count: 0, examples: [] };
+                            groupMap.set(normalized, group);
+                        }
+                        group.count++;
+                        if (group.examples.length < 3) {
+                            const example = { context: m.context, value: m.value, originalPath: m.path !== normalized ? m.path : undefined };
+                            if (!group.examples.some(e => e.context === example.context))
+                                group.examples.push(example);
+                        }
+                    }
+                    const groups = Array.from(groupMap.values()).sort((a, b) => b.count - a.count || getDepth(b.normalized) - getDepth(a.normalized));
+                    const totalMatches = matches.length;
+                    searchMatches.push({
+                        requestId: ev.id,
+                        count: 1,
+                        groups,
+                        totalMatches,
+                        request,
+                        response: resp,
+                    });
+                }
+            }
+            if (searchMatches.length === 0) {
+                response.addResult(`No network requests found containing keyword: "${params.keyword}"`);
+                return;
+            }
+            const aggMap = new Map();
+            for (const m of searchMatches) {
+                const key = `${m.request.method().toUpperCase()} ${normalizeUrlForGrouping(m.request.url())}`;
+                const existing = aggMap.get(key);
+                if (!existing) {
+                    aggMap.set(key, {
+                        key,
+                        request: m.request,
+                        response: m.response,
+                        ids: [m.requestId],
+                        count: m.count,
+                        totalMatches: m.totalMatches,
+                        groups: [...m.groups],
+                    });
+                }
+                else {
+                    existing.ids.push(m.requestId);
+                    existing.count += m.count;
+                    existing.totalMatches += m.totalMatches;
+                    existing.groups = mergeGroupedMatches(existing.groups, m.groups);
+                    if (!existing.response && m.response)
+                        existing.response = m.response;
+                }
+            }
+            const aggregatedMatches = Array.from(aggMap.values()).sort((a, b) => b.totalMatches - a.totalMatches);
+            const topMatches = aggregatedMatches.slice(0, MAX_SEARCH_RESULTS);
+            const structured = {
+                keyword: params.keyword,
+                requests: topMatches.map(m => {
+                    const method = m.request.method().toUpperCase();
+                    const url = m.request.url();
+                    // Normalize URL for grouping only; not returned in output
+                    const status = m.response ? m.response.status() : undefined;
+                    const queryKeys = (() => {
+                        try {
+                            const u = new URL(url);
+                            const keys = new Set();
+                            u.searchParams.forEach((_, k) => {
+                                if (k)
+                                    keys.add(k);
+                            });
+                            return Array.from(keys);
+                        }
+                        catch {
+                            return [];
+                        }
+                    })();
+                    const paths = m.groups
+                        .sort((a, b) => b.count - a.count || getDepth(b.normalized) - getDepth(a.normalized))
+                        .slice(0, MAX_GROUPS_TO_SHOW)
+                        .map(g => {
+                        const normJson = toJsonPathNormalized(g.normalized);
+                        if (normJson)
+                            return `json: ${normJson.jsonPath}`;
+                        if (g.normalized.includes(' > ')) {
+                            let cleaned = g.normalized.replace(/:nth-child\(\*\)/g, '');
+                            if (cleaned.startsWith('response.body'))
+                                cleaned = cleaned.slice('response.body'.length).trim();
+                            else if (cleaned.startsWith('request.body'))
+                                cleaned = cleaned.slice('request.body'.length).trim();
+                            if (cleaned.startsWith('>'))
+                                cleaned = cleaned.slice(1).trim();
+                            return `css: ${cleaned}`;
+                        }
+                        return g.normalized;
+                    });
+                    return {
+                        summary: formatNetworkSummaryLine({
+                            method,
+                            url,
+                            status: status || 0,
+                            statusText: m.response?.statusText(),
+                            postData: m.request.postData(),
+                            headers: {},
+                        }),
+                        eventIds: m.ids.slice(0, 5),
+                        params: queryKeys.slice(0, 6),
+                        paths,
+                    };
+                })
+            };
+            response.addResult(JSON.stringify(structured));
+        }
+        catch (error) {
+            response.addResult(`Failed to search network requests: ${error.message}`);
+        }
+    },
+});
+export default [networkSearch];

package/lib/tools/pdf.js

@@ -0,0 +1,40 @@
+/**
+ * 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 * as javascript from '../utils/codegen.js';
+const pdfSchema = z.object({
+    filename: z.string().optional().describe('File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.'),
+});
+const pdf = defineTabTool({
+    capability: 'pdf',
+    schema: {
+        name: 'browser_pdf_save',
+        title: 'Save as PDF',
+        description: 'Save page as PDF',
+        inputSchema: pdfSchema,
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        const fileName = await tab.context.outputFile(params.filename ?? `page-${new Date().toISOString()}.pdf`);
+        response.addCode(`await page.pdf(${javascript.formatObject({ path: fileName })});`);
+        response.addResult(`Saved page as ${fileName}`);
+        await tab.page.pdf({ path: fileName });
+    },
+});
+export default [
+    pdf,
+];