@wordbricks/playwright-mcp 0.1.19 → 0.1.22

package/lib/tools/keyboard.js

@@ -13,21 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTabTool } from './tool.js';
-import { elementSchema } from './snapshot.js';
-import { generateLocator } from './utils.js';
-import * as javascript from '../utils/codegen.js';
+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',
+    capability: "core",
     schema: {
-        name: 'browser_press_key',
-        title: 'Press a key',
-        description: 'Press a key on the keyboard',
+        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`'),
+            key: z
+                .string()
+                .describe("Name of the key to press or a character to generate, such as `ArrowLeft` or `a`"),
         }),
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -39,18 +41,24 @@ const pressKey = defineTabTool({
     },
 });
 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.'),
+    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',
+    capability: "core",
     schema: {
-        name: 'browser_type',
-        title: 'Type text',
-        description: 'Type text into editable element',
+        name: "browser_type",
+        title: "Type text",
+        description: "Type text into editable element",
         inputSchema: typeSchema,
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         const locator = await tab.refLocator(params);
@@ -67,12 +75,9 @@ const type = defineTabTool({
             if (params.submit) {
                 response.setIncludeSnapshot();
                 response.addCode(`await page.${await generateLocator(locator)}.press('Enter');`);
-                await locator.press('Enter');
+                await locator.press("Enter");
             }
         });
     },
 });
-export default [
-    pressKey,
-    type,
-];
+export default [pressKey, type];

package/lib/tools/mouse.js

@@ -13,22 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTabTool } from './tool.js';
+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'),
+    element: z
+        .string()
+        .describe("Human-readable element description used to obtain permission to interact with the element"),
 });
 const mouseMove = defineTabTool({
-    capability: 'vision',
+    capability: "vision",
     schema: {
-        name: 'browser_mouse_move_xy',
-        title: 'Move mouse',
-        description: 'Move mouse to a given position',
+        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'),
+            x: z.number().describe("X coordinate"),
+            y: z.number().describe("Y coordinate"),
         }),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         response.addCode(`// Move mouse to (${params.x}, ${params.y})`);
@@ -39,16 +41,16 @@ const mouseMove = defineTabTool({
     },
 });
 const mouseClick = defineTabTool({
-    capability: 'vision',
+    capability: "vision",
     schema: {
-        name: 'browser_mouse_click_xy',
-        title: 'Click',
-        description: 'Click left mouse button at a given position',
+        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'),
+            x: z.number().describe("X coordinate"),
+            y: z.number().describe("Y coordinate"),
         }),
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -64,18 +66,18 @@ const mouseClick = defineTabTool({
     },
 });
 const mouseDrag = defineTabTool({
-    capability: 'vision',
+    capability: "vision",
     schema: {
-        name: 'browser_mouse_drag_xy',
-        title: 'Drag mouse',
-        description: 'Drag left mouse button to a given position',
+        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'),
+            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',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -92,8 +94,4 @@ const mouseDrag = defineTabTool({
         });
     },
 });
-export default [
-    mouseMove,
-    mouseClick,
-    mouseDrag,
-];
+export default [mouseMove, mouseClick, mouseDrag];

package/lib/tools/navigate.js

@@ -13,18 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTool, defineTabTool } from './tool.js';
+import { z } from "zod";
+import { defineTabTool, defineTool } from "./tool.js";
 const navigate = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_navigate',
-        title: 'Navigate to a URL',
-        description: 'Navigate to a URL',
+        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'),
+            url: z.string().describe("The URL to navigate to"),
         }),
-        type: 'action',
+        type: "action",
     },
     handle: async (context, params, response) => {
         const tab = await context.ensureTab();
@@ -34,13 +34,13 @@ const navigate = defineTool({
     },
 });
 const goBack = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_navigate_back',
-        title: 'Go back',
-        description: 'Go back to the previous page',
+        name: "browser_navigate_back",
+        title: "Go back",
+        description: "Go back to the previous page",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         await tab.page.goBack();
@@ -49,13 +49,13 @@ const goBack = defineTabTool({
     },
 });
 const goForward = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_navigate_forward',
-        title: 'Go forward',
-        description: 'Go forward to the next page',
+        name: "browser_navigate_forward",
+        title: "Go forward",
+        description: "Go forward to the next page",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         await tab.page.goForward();
@@ -63,8 +63,4 @@ const goForward = defineTabTool({
         response.addCode(`await page.goForward();`);
     },
 });
-export default [
-    navigate,
-    goBack,
-    goForward,
-];
+export default [navigate, goBack, goForward];

package/lib/tools/network.js

@@ -13,9 +13,9 @@
  * 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';
+import { z } from "zod";
+import { formatUrlWithTrimmedParams } from "../hooks/networkFilters.js";
+import { defineTabTool } from "./tool.js";
 // const requests = defineTool({
 //   capability: 'core',
 //   schema: {
@@ -61,13 +61,13 @@ import { formatUrlWithTrimmedParams } from '../hooks/networkFilters.js';
 //   },
 // });
 const requests = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_network_requests',
-        title: 'List network requests',
-        description: 'Returns all network requests since loading the page',
+        name: "browser_network_requests",
+        title: "List network requests",
+        description: "Returns all network requests since loading the page",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         const requests = tab.requests();
@@ -82,8 +82,8 @@ export async function renderRequest(request, response) {
     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}` : ''}`);
+        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();
@@ -116,8 +116,6 @@ export async function renderRequest(request, response) {
     //   if (body)
     //     result.push(`body=${body}`);
     // }
-    return result.join('\n');
+    return result.join("\n");
 }
-export default [
-    requests,
-];
+export default [requests];

package/lib/tools/networkDetail.js

@@ -1,26 +1,25 @@
-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');
+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',
+    ":authority",
+    ":method",
+    ":path",
+    ":scheme",
+    "authority",
+    "method",
+    "path",
+    "scheme",
 ]);
 const getStateMap = (ctx) => {
     let m = contextBodyMap.get(ctx);
@@ -31,7 +30,7 @@ const getStateMap = (ctx) => {
     return m;
 };
 const networkDetailSchema = z.object({
-    id: z.number().describe('The network event id from events log'),
+    id: z.number().describe("The network event id from events log"),
 });
 const normalizeHeaderKeys = (headers) => {
     const out = {};
@@ -40,7 +39,7 @@ const normalizeHeaderKeys = (headers) => {
     return out;
 };
 const formatBytes = (n) => {
-    const units = ['B', 'KB', 'MB', 'GB'];
+    const units = ["B", "KB", "MB", "GB"];
     let i = 0;
     let v = n;
     while (v >= 1024 && i < units.length - 1) {
@@ -68,16 +67,16 @@ const formatRequestDetail = async (ctx, { request, response, id, }) => {
         if (!Number.isNaN(duration))
             lines.push(`Duration: ${duration}ms`);
     }
-    lines.push(`Failure: ${request.failure()?.errorText || 'None'}`);
+    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))
+            .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');
+        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);
@@ -97,25 +96,27 @@ const formatRequestDetail = async (ctx, { request, response, id, }) => {
         // 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))
+            .filter((k) => !SKIP_REQUEST_HEADER_KEYS.has(k))
             .sort();
         for (const key of headerKeys)
             lines.push(`${key}: ${reqHeaders[key]}`);
-        const reqCt = reqHeaders['content-type'];
+        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)) {
+            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(', ')} }`);
+                    lines.push(`Variables: { ${varKeys.join(", ")} }`);
             }
         }
         if (requestBody) {
             if (gqlReq) {
                 lines.push(`\nRequest Body (GraphQL):`);
                 try {
-                    if (reqCt && reqCt.includes('application/graphql')) {
+                    if (reqCt && reqCt.includes("application/graphql")) {
                         lines.push(minifyGraphQLQuery(requestBody));
                     }
                     else {
@@ -139,15 +140,23 @@ const formatRequestDetail = async (ctx, { request, response, id, }) => {
             }
         }
         const resHeaders = normalizeHeaderKeys(await response.allHeaders());
-        const resCt = resHeaders['content-type'];
-        const resCl = resHeaders['content-length'];
+        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(', ')} }`);
+            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;
@@ -157,63 +166,61 @@ const formatRequestDetail = async (ctx, { request, response, id, }) => {
     catch (e) {
         const msg = e instanceof Error ? e.message : String(e);
         lines.push(`\nFailed to read response body: ${msg}`);
-        return lines.join('\n');
+        return lines.join("\n");
     }
     // On first page, summarize GraphQL response if applicable
     if (!state.headersShown && state.isGraphQLRequest) {
         try {
-            const fullText = buf.toString('utf8');
+            const fullText = buf.toString("utf8");
             const gqlInfo = extractGraphQLResponseInfo(fullText);
             if (gqlInfo) {
-                lines.push(`\nGraphQL Response: ${gqlInfo.hasErrors ? `${gqlInfo.errorCount} error(s)` : 'ok'}`);
+                lines.push(`\nGraphQL Response: ${gqlInfo.hasErrors ? `${gqlInfo.errorCount} error(s)` : "ok"}`);
                 if (gqlInfo.topMessages.length)
-                    lines.push(`Errors: ${gqlInfo.topMessages.join(' | ')}`);
+                    lines.push(`Errors: ${gqlInfo.topMessages.join(" | ")}`);
                 if (gqlInfo.dataKeys.length)
-                    lines.push(`Data keys: ${gqlInfo.dataKeys.join(', ')}`);
+                    lines.push(`Data keys: ${gqlInfo.dataKeys.join(", ")}`);
             }
         }
         catch { }
     }
-    // Reset if finished in a prior call
-    if (state.cursor >= buf.length) {
+    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
     }
-    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)'}:`);
+    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 }));
+        lines.push(formatTruncationLine(nextCursor, totalLength, { formatter: formatBytes }));
     state.cursor = nextCursor;
     state.headersShown = true;
-    return lines.join('\n');
+    return lines.join("\n");
 };
 const networkDetail = defineTabTool({
-    capability: 'core',
+    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.',
+        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',
+        type: "readOnly",
     },
     handle: async (tab, params, r) => {
         const entry = getNetworkEventEntry(tab.context, params.id);