@wordbricks/playwright-mcp 0.1.24 → 0.1.26

package/lib/tools/keyboard.js

@@ -0,0 +1,83 @@
+/**
+ * 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 * as javascript from "../utils/codegen.js";
+import { elementSchema } from "./snapshot.js";
+import { defineTabTool } from "./tool.js";
+import { generateLocator } from "./utils.js";
+const pressKey = defineTabTool({
+    capability: "core",
+    schema: {
+        name: "browser_press_key",
+        title: "Press a key",
+        description: "Press a key on the keyboard",
+        inputSchema: z.object({
+            key: z
+                .string()
+                .describe("Name of the key to press or a character to generate, such as `ArrowLeft` or `a`"),
+        }),
+        type: "input",
+    },
+    handle: async (tab, params, response) => {
+        response.setIncludeSnapshot();
+        response.addCode(`// Press ${params.key}`);
+        response.addCode(`await page.keyboard.press('${params.key}');`);
+        await tab.waitForCompletion(async () => {
+            await tab.page.keyboard.press(params.key);
+        });
+    },
+});
+const typeSchema = elementSchema.extend({
+    text: z.string().describe("Text to type into the element"),
+    submit: z
+        .boolean()
+        .optional()
+        .describe("Whether to submit entered text (press Enter after)"),
+    slowly: z
+        .boolean()
+        .optional()
+        .describe("Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once."),
+});
+const type = defineTabTool({
+    capability: "core",
+    schema: {
+        name: "browser_type",
+        title: "Type text",
+        description: "Type text into editable element",
+        inputSchema: typeSchema,
+        type: "input",
+    },
+    handle: async (tab, params, response) => {
+        const locator = await tab.refLocator(params);
+        await tab.waitForCompletion(async () => {
+            if (params.slowly) {
+                response.setIncludeSnapshot();
+                response.addCode(`await page.${await generateLocator(locator)}.pressSequentially(${javascript.quote(params.text)});`);
+                await locator.pressSequentially(params.text);
+            }
+            else {
+                response.addCode(`await page.${await generateLocator(locator)}.fill(${javascript.quote(params.text)});`);
+                await locator.fill(params.text);
+            }
+            if (params.submit) {
+                response.setIncludeSnapshot();
+                response.addCode(`await page.${await generateLocator(locator)}.press('Enter');`);
+                await locator.press("Enter");
+            }
+        });
+    },
+});
+export default [pressKey, type];

package/lib/tools/mouse.js

@@ -0,0 +1,97 @@
+/**
+ * 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";
+const elementSchema = z.object({
+    element: z
+        .string()
+        .describe("Human-readable element description used to obtain permission to interact with the element"),
+});
+const mouseMove = defineTabTool({
+    capability: "vision",
+    schema: {
+        name: "browser_mouse_move_xy",
+        title: "Move mouse",
+        description: "Move mouse to a given position",
+        inputSchema: elementSchema.extend({
+            x: z.number().describe("X coordinate"),
+            y: z.number().describe("Y coordinate"),
+        }),
+        type: "readOnly",
+    },
+    handle: async (tab, params, response) => {
+        response.addCode(`// Move mouse to (${params.x}, ${params.y})`);
+        response.addCode(`await page.mouse.move(${params.x}, ${params.y});`);
+        await tab.waitForCompletion(async () => {
+            await tab.page.mouse.move(params.x, params.y);
+        });
+    },
+});
+const mouseClick = defineTabTool({
+    capability: "vision",
+    schema: {
+        name: "browser_mouse_click_xy",
+        title: "Click",
+        description: "Click left mouse button at a given position",
+        inputSchema: elementSchema.extend({
+            x: z.number().describe("X coordinate"),
+            y: z.number().describe("Y coordinate"),
+        }),
+        type: "input",
+    },
+    handle: async (tab, params, response) => {
+        response.setIncludeSnapshot();
+        response.addCode(`// Click mouse at coordinates (${params.x}, ${params.y})`);
+        response.addCode(`await page.mouse.move(${params.x}, ${params.y});`);
+        response.addCode(`await page.mouse.down();`);
+        response.addCode(`await page.mouse.up();`);
+        await tab.waitForCompletion(async () => {
+            await tab.page.mouse.move(params.x, params.y);
+            await tab.page.mouse.down();
+            await tab.page.mouse.up();
+        });
+    },
+});
+const mouseDrag = defineTabTool({
+    capability: "vision",
+    schema: {
+        name: "browser_mouse_drag_xy",
+        title: "Drag mouse",
+        description: "Drag left mouse button to a given position",
+        inputSchema: elementSchema.extend({
+            startX: z.number().describe("Start X coordinate"),
+            startY: z.number().describe("Start Y coordinate"),
+            endX: z.number().describe("End X coordinate"),
+            endY: z.number().describe("End Y coordinate"),
+        }),
+        type: "input",
+    },
+    handle: async (tab, params, response) => {
+        response.setIncludeSnapshot();
+        response.addCode(`// Drag mouse from (${params.startX}, ${params.startY}) to (${params.endX}, ${params.endY})`);
+        response.addCode(`await page.mouse.move(${params.startX}, ${params.startY});`);
+        response.addCode(`await page.mouse.down();`);
+        response.addCode(`await page.mouse.move(${params.endX}, ${params.endY});`);
+        response.addCode(`await page.mouse.up();`);
+        await tab.waitForCompletion(async () => {
+            await tab.page.mouse.move(params.startX, params.startY);
+            await tab.page.mouse.down();
+            await tab.page.mouse.move(params.endX, params.endY);
+            await tab.page.mouse.up();
+        });
+    },
+});
+export default [mouseMove, mouseClick, mouseDrag];

package/lib/tools/navigate.js

@@ -0,0 +1,66 @@
+/**
+ * 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, defineTool } 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: "action",
+    },
+    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,121 @@
+/**
+ * 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 { formatUrlWithTrimmedParams } from "../hooks/networkFilters.js";
+import { defineTabTool } from "./tool.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,238 @@
+import ms from "ms";
+import { z } from "zod";
+import { getNetworkEventEntry } from "../hooks/networkSetup.js";
+import { extractGraphQLResponseInfo, minifyGraphQLQuery, minifyGraphQLRequestBody, parseGraphQLRequestFromHttp, summarizeGraphQL, } from "../utils/graphql.js";
+import { formatNetworkSummaryLine } from "../utils/networkFormat.js";
+import { sanitizeHtml } from "../utils/sanitizeHtml.js";
+import { formatTruncationLine } from "../utils/truncate.js";
+import { withTimeout } from "../utils/withTimeout.js";
+import { defineTabTool } from "./tool.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(", ")} }`);
+        const setCookieHeaders = await response
+            .headerValues("set-cookie")
+            .catch(() => []);
+        if (setCookieHeaders.length) {
+            lines.push(`\nSet-Cookie Headers (${setCookieHeaders.length}):`);
+            for (const cookie of setCookieHeaders)
+                lines.push(cookie);
+        }
+    }
+    // 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 { }
+    }
+    let bodyText = buf.toString("utf8");
+    const resHeadersForBody = normalizeHeaderKeys(await response.allHeaders());
+    const resCtForBody = resHeadersForBody["content-type"] || "";
+    const isHtml = resCtForBody.includes("html");
+    if (isHtml)
+        bodyText = sanitizeHtml(bodyText, {
+            shouldRemoveScripts: false,
+            shouldRemoveStyles: true,
+        });
+    const totalLength = bodyText.length;
+    if (state.cursor >= totalLength) {
+        state.cursor = 0;
+        state.headersShown = false; // allow headers again after a full pass
+    }
+    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, totalLength, { 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];