@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/tools/evaluate.js

@@ -13,29 +13,40 @@
  * 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';
-import { generateLocator } from './utils.js';
+import { z } from "zod";
+import * as javascript from "../utils/codegen.js";
+import { defineTabTool } from "./tool.js";
+import { generateLocator } from "./utils.js";
 const evaluateSchema = z.object({
-    function: z.string().describe('() => { /* code */ } or (element) => { /* code */ } when element is provided'),
-    element: z.string().optional().describe('Human-readable element description used to obtain permission to interact with the element'),
-    ref: z.string().optional().describe('Exact target element reference from the page snapshot'),
+    function: z
+        .string()
+        .describe("() => { /* code */ } or (element) => { /* code */ } when element is provided"),
+    element: z
+        .string()
+        .optional()
+        .describe("Human-readable element description used to obtain permission to interact with the element"),
+    ref: z
+        .string()
+        .optional()
+        .describe("Exact target element reference from the page snapshot"),
 });
 const evaluate = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_evaluate',
-        title: 'Evaluate JavaScript',
-        description: 'Evaluate JavaScript expression on page or element',
+        name: "browser_evaluate",
+        title: "Evaluate JavaScript",
+        description: "Evaluate JavaScript expression on page or element",
         inputSchema: evaluateSchema,
-        type: 'action',
+        type: "action",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
         let locator;
         if (params.ref && params.element) {
-            locator = await tab.refLocator({ ref: params.ref, element: params.element });
+            locator = await tab.refLocator({
+                ref: params.ref,
+                element: params.element,
+            });
             response.addCode(`await page.${await generateLocator(locator)}.evaluate(${javascript.quote(params.function)});`);
         }
         else {
@@ -44,10 +55,8 @@ const evaluate = defineTabTool({
         await tab.waitForCompletion(async () => {
             const receiver = locator ?? tab.page;
             const result = await receiver._evaluateFunction(params.function);
-            response.addResult(JSON.stringify(result, null, 2) || 'undefined');
+            response.addResult(JSON.stringify(result, null, 2) || "undefined");
         });
     },
 });
-export default [
-    evaluate,
-];
+export default [evaluate];

package/lib/tools/extractFrameworkState.js

@@ -1,19 +1,25 @@
-import { z } from 'zod';
-import { defineTabTool } from './tool.js';
-import { FRAMEWORK_STATE_PATTERNS, MAX_DISPLAY_ITEMS } from '../frameworkPatterns.js';
-import { truncate } from '../utils/truncate.js';
+import { z } from "zod";
+import { FRAMEWORK_STATE_PATTERNS, MAX_DISPLAY_ITEMS, } from "../frameworkPatterns.js";
+import { truncate } from "../utils/truncate.js";
+import { defineTabTool } from "./tool.js";
 const extractFrameworkStateSchema = z.object({
-    framework: z.string().optional().describe('Optional: specific key to extract from (e.g., "__remixContext")'),
-    path: z.string().optional().describe('Path to extract (e.g., "state.loaderData")'),
+    framework: z
+        .string()
+        .optional()
+        .describe('Optional: specific key to extract from (e.g., "__remixContext")'),
+    path: z
+        .string()
+        .optional()
+        .describe('Path to extract (e.g., "state.loaderData")'),
 });
 const extractFrameworkState = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_extract_framework_state',
-        title: 'Extract framework state',
-        description: 'Extract framework state data from web pages (React, Redux, Remix, etc.)',
+        name: "browser_extract_framework_state",
+        title: "Extract framework state",
+        description: "Extract framework state data from web pages (React, Redux, Remix, etc.)",
         inputSchema: extractFrameworkStateSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         const { framework, // Optional: specific key to extract from
@@ -30,7 +36,7 @@ const extractFrameworkState = defineTabTool({
                     try {
                         let data = window[key];
                         // If data is string, try to parse as JSON
-                        if (typeof data === 'string') {
+                        if (typeof data === "string") {
                             try {
                                 data = JSON.parse(data);
                             }
@@ -43,14 +49,14 @@ const extractFrameworkState = defineTabTool({
                             // Split path while respecting bracket-quoted segments like ['a.b']
                             const splitPath = (p) => {
                                 const parts = [];
-                                let cur = '';
+                                let cur = "";
                                 let inBracket = false;
                                 let inQuote = null;
                                 for (let i = 0; i < p.length; i++) {
                                     const ch = p[i];
                                     if (inQuote) {
                                         cur += ch;
-                                        if (ch === inQuote && p[i - 1] !== '\\')
+                                        if (ch === inQuote && p[i - 1] !== "\\")
                                             inQuote = null;
                                         continue;
                                     }
@@ -59,26 +65,26 @@ const extractFrameworkState = defineTabTool({
                                         if (ch === '"' || ch === "'") {
                                             inQuote = ch;
                                         }
-                                        else if (ch === ']') {
+                                        else if (ch === "]") {
                                             inBracket = false;
                                             parts.push(cur);
-                                            cur = '';
+                                            cur = "";
                                         }
                                         continue;
                                     }
-                                    if (ch === '.') {
+                                    if (ch === ".") {
                                         if (cur) {
                                             parts.push(cur);
-                                            cur = '';
+                                            cur = "";
                                         }
                                         continue;
                                     }
-                                    if (ch === '[') {
+                                    if (ch === "[") {
                                         if (cur) {
                                             parts.push(cur);
-                                            cur = '';
+                                            cur = "";
                                         }
-                                        cur = '[';
+                                        cur = "[";
                                         inBracket = true;
                                         continue;
                                     }
@@ -90,20 +96,22 @@ const extractFrameworkState = defineTabTool({
                             };
                             const pathParts = splitPath(targetPath);
                             for (const part of pathParts) {
-                                if (data && typeof data === 'object') {
+                                if (data && typeof data === "object") {
                                     // Handle array index with prop: prop[123]
                                     const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
                                     if (arrayMatch) {
                                         const prop = arrayMatch[1];
-                                        const index = parseInt(arrayMatch[2], 10);
+                                        const index = Number.parseInt(arrayMatch[2], 10);
                                         const propData = data[prop];
-                                        data = Array.isArray(propData) ? propData[index] : undefined;
+                                        data = Array.isArray(propData)
+                                            ? propData[index]
+                                            : undefined;
                                     }
                                     else if (part.match(/^\[(\d+)\]$/)) {
                                         // Handle standalone array index: [123]
                                         const indexMatch = part.match(/^\[(\d+)\]$/);
                                         if (indexMatch) {
-                                            const index = parseInt(indexMatch[1], 10);
+                                            const index = Number.parseInt(indexMatch[1], 10);
                                             data = data?.[index];
                                         }
                                     }
@@ -151,14 +159,14 @@ const extractFrameworkState = defineTabTool({
                     throw new Error(`Path "${path}" not found in framework state '${framework}'.`);
                 }
                 throw new Error(`Key '${framework}' not found in window. ` +
-                    'Available framework states can be detected by the frameworkStateHook.');
+                    "Available framework states can be detected by the frameworkStateHook.");
             }
-            throw new Error('No framework state found. ' +
-                'Available framework states can be detected by the frameworkStateHook.');
+            throw new Error("No framework state found. " +
+                "Available framework states can be detected by the frameworkStateHook.");
         }
         // Prepare final data
         let finalData;
-        const extractedKeys = result.states.map(s => s.key);
+        const extractedKeys = result.states.map((s) => s.key);
         if (result.states.length === 1) {
             finalData = result.states[0].data;
         }
@@ -170,7 +178,7 @@ const extractFrameworkState = defineTabTool({
         // Limit to MAX_DISPLAY_ITEMS for display if array
         const totalItems = Array.isArray(finalData)
             ? finalData.length
-            : typeof finalData === 'object' && finalData !== null
+            : typeof finalData === "object" && finalData !== null
                 ? Object.keys(finalData).length
                 : 1;
         let displayData = finalData;
@@ -179,35 +187,38 @@ const extractFrameworkState = defineTabTool({
             displayData = finalData.slice(0, MAX_DISPLAY_ITEMS);
             isTruncated = true;
         }
-        else if (typeof finalData === 'object' &&
+        else if (typeof finalData === "object" &&
             finalData !== null &&
             !Array.isArray(finalData)) {
             const keys = Object.keys(finalData);
             if (keys.length > MAX_DISPLAY_ITEMS) {
                 displayData = {};
-                keys.slice(0, MAX_DISPLAY_ITEMS).forEach(key => {
+                keys.slice(0, MAX_DISPLAY_ITEMS).forEach((key) => {
                     displayData[key] = finalData[key];
                 });
                 isTruncated = true;
             }
         }
         // Truncate for readability and cap output
-        const truncatedDisplay = truncate(displayData, { maxStringLength: 1000, maxItems: MAX_DISPLAY_ITEMS });
+        const truncatedDisplay = truncate(displayData, {
+            maxStringLength: 1000,
+            maxItems: MAX_DISPLAY_ITEMS,
+        });
         const outputStr = JSON.stringify(truncatedDisplay, null, 2);
         const summary = [
             `Found ${result.count} framework state(s)`,
             result.states.length > 1
-                ? `Extracted from: ${extractedKeys.join(', ')}`
+                ? `Extracted from: ${extractedKeys.join(", ")}`
                 : `Using: ${result.states[0]?.key}`,
             isTruncated
                 ? `Showing first ${MAX_DISPLAY_ITEMS} of ${totalItems} results`
                 : null,
             path ? `Extracted path: ${path}` : null,
-            result.errors ? `Errors: ${result.errors.join('; ')}` : null,
+            result.errors ? `Errors: ${result.errors.join("; ")}` : null,
         ]
             .filter(Boolean)
-            .join('\n');
-        response.addResult(summary + '\n\n' + outputStr);
+            .join("\n");
+        response.addResult(summary + "\n\n" + outputStr);
         response.setIncludeSnapshot();
     },
 });

package/lib/tools/files.js

@@ -13,24 +13,29 @@
  * 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";
 export const uploadFile = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_file_upload',
-        title: 'Upload files',
-        description: 'Upload one or multiple files',
+        name: "browser_file_upload",
+        title: "Upload files",
+        description: "Upload one or multiple files",
         inputSchema: z.object({
-            paths: z.array(z.string()).optional().describe('The absolute paths to the files to upload. Can be single file or multiple files. If omitted, file chooser is cancelled.'),
+            paths: z
+                .array(z.string())
+                .optional()
+                .describe("The absolute paths to the files to upload. Can be single file or multiple files. If omitted, file chooser is cancelled."),
         }),
-        type: 'action',
+        type: "action",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
-        const modalState = tab.modalStates().find(state => state.type === 'fileChooser');
+        const modalState = tab
+            .modalStates()
+            .find((state) => state.type === "fileChooser");
         if (!modalState)
-            throw new Error('No file chooser visible');
+            throw new Error("No file chooser visible");
         response.addCode(`await fileChooser.setFiles(${JSON.stringify(params.paths)})`);
         tab.clearModalState(modalState);
         await tab.waitForCompletion(async () => {
@@ -38,8 +43,6 @@ export const uploadFile = defineTabTool({
                 await modalState.fileChooser.setFiles(params.paths);
         });
     },
-    clearsModalState: 'fileChooser',
+    clearsModalState: "fileChooser",
 });
-export default [
-    uploadFile,
-];
+export default [uploadFile];

package/lib/tools/form.js

@@ -13,45 +13,54 @@
  * 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 codegen from '../utils/codegen.js';
-import { generateLocator } from './utils.js';
+import { z } from "zod";
+import * as codegen from "../utils/codegen.js";
+import { defineTabTool } from "./tool.js";
+import { generateLocator } from "./utils.js";
 const fillForm = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_fill_form',
-        title: 'Fill form',
-        description: 'Fill multiple form fields',
+        name: "browser_fill_form",
+        title: "Fill form",
+        description: "Fill multiple form fields",
         inputSchema: z.object({
-            fields: z.array(z.object({
-                name: z.string().describe('Human-readable field name'),
-                type: z.enum(['textbox', 'checkbox', 'radio', 'combobox', 'slider']).describe('Type of the field'),
-                ref: z.string().describe('Exact target field reference from the page snapshot'),
-                value: z.string().describe('Value to fill in the field. If the field is a checkbox, the value should be `true` or `false`. If the field is a combobox, the value should be the text of the option.'),
-            })).describe('Fields to fill in'),
+            fields: z
+                .array(z.object({
+                name: z.string().describe("Human-readable field name"),
+                type: z
+                    .enum(["textbox", "checkbox", "radio", "combobox", "slider"])
+                    .describe("Type of the field"),
+                ref: z
+                    .string()
+                    .describe("Exact target field reference from the page snapshot"),
+                value: z
+                    .string()
+                    .describe("Value to fill in the field. If the field is a checkbox, the value should be `true` or `false`. If the field is a combobox, the value should be the text of the option."),
+            }))
+                .describe("Fields to fill in"),
         }),
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         for (const field of params.fields) {
-            const locator = await tab.refLocator({ element: field.name, ref: field.ref });
-            if (field.type === 'textbox' || field.type === 'slider') {
+            const locator = await tab.refLocator({
+                element: field.name,
+                ref: field.ref,
+            });
+            if (field.type === "textbox" || field.type === "slider") {
                 const secret = tab.context.lookupSecret(field.value);
                 await locator.fill(secret.value);
                 response.addCode(`await page.${await generateLocator(locator)}.fill(${secret.code});`);
             }
-            else if (field.type === 'checkbox' || field.type === 'radio') {
-                await locator.setChecked(field.value === 'true');
+            else if (field.type === "checkbox" || field.type === "radio") {
+                await locator.setChecked(field.value === "true");
                 response.addCode(`await page.${await generateLocator(locator)}.setChecked(${field.value});`);
             }
-            else if (field.type === 'combobox') {
+            else if (field.type === "combobox") {
                 await locator.selectOption({ label: field.value });
                 response.addCode(`await page.${await generateLocator(locator)}.selectOption(${codegen.quote(field.value)});`);
             }
         }
     },
 });
-export default [
-    fillForm,
-];
+export default [fillForm];

package/lib/tools/getSnapshot.js

@@ -1,15 +1,16 @@
-import { z } from 'zod';
-import { defineTool } from './tool.js';
-import { truncate } from '../utils/truncate.js';
+import { z } from "zod";
+import { truncate } from "../utils/truncate.js";
+import { defineTool } from "./tool.js";
 const MAX_LENGTH = 100_000;
 const getSnapshotSchema = z.object({});
 const getSnapshot = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_get_snapshot',
-        title: 'Get snapshot',
-        description: 'Get accessibility snapshot of the current page', inputSchema: getSnapshotSchema,
-        type: 'readOnly',
+        name: "browser_get_snapshot",
+        title: "Get snapshot",
+        description: "Get accessibility snapshot of the current page",
+        inputSchema: getSnapshotSchema,
+        type: "readOnly",
     },
     handle: async (context, _params, response) => {
         const tab = await context.ensureTab();
@@ -20,18 +21,16 @@ const getSnapshot = defineTool({
             lines.push(`- Page URL: ${snapshot.url}`);
             lines.push(`- Page Title: ${snapshot.title}`);
             lines.push(`- Page Snapshot:`);
-            lines.push('```yaml');
-            let aria = snapshot.ariaSnapshot || '';
+            lines.push("```yaml");
+            let aria = snapshot.ariaSnapshot || "";
             aria = String(truncate(aria, { maxStringLength: MAX_LENGTH }));
             lines.push(aria);
-            lines.push('```');
-            response.addResult(lines.join('\n'));
+            lines.push("```");
+            response.addResult(lines.join("\n"));
         }
         catch (error) {
             response.addResult(`Failed to get snapshot: ${String(error)}`);
         }
     },
 });
-export default [
-    getSnapshot,
-];
+export default [getSnapshot];

package/lib/tools/getVisibleHtml.js

@@ -1,20 +1,35 @@
-import { z } from 'zod';
-import { sanitizeHtml } from '../utils/sanitizeHtml.js';
-import { defineTool } from './tool.js';
+import { z } from "zod";
+import { sanitizeHtml } from "../utils/sanitizeHtml.js";
+import { defineTool } from "./tool.js";
 const getVisibleHtmlSchema = z.object({
-    selector: z.string().optional().describe('CSS selector for a specific element (optional)'),
-    cleanHtml: z.boolean().optional().default(true).describe('Clean HTML (true) or raw HTML (false)'),
-    removeScripts: z.boolean().optional().default(true).describe('Remove scripts (true) or keep them (false)'),
-    removeStyles: z.boolean().optional().default(true).describe('Remove styles (true) or keep them (false)'),
+    selector: z
+        .string()
+        .optional()
+        .describe("CSS selector for a specific element (optional)"),
+    cleanHtml: z
+        .boolean()
+        .optional()
+        .default(true)
+        .describe("Clean HTML (true) or raw HTML (false)"),
+    removeScripts: z
+        .boolean()
+        .optional()
+        .default(true)
+        .describe("Remove scripts (true) or keep them (false)"),
+    removeStyles: z
+        .boolean()
+        .optional()
+        .default(true)
+        .describe("Remove styles (true) or keep them (false)"),
 });
 const getVisibleHtml = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_get_visible_html',
-        title: 'Get visible HTML',
-        description: 'Get HTML content of the page or a specific element',
+        name: "browser_get_visible_html",
+        title: "Get visible HTML",
+        description: "Get HTML content of the page or a specific element",
         inputSchema: getVisibleHtmlSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (context, params, response) => {
         const tab = await context.ensureTab();
@@ -28,7 +43,7 @@ const getVisibleHtml = defineTool({
                 const element = await page.$(selector);
                 if (!element)
                     throw new Error(`Element with selector "${selector}" not found`);
-                htmlContent = await page.evaluate(el => el.outerHTML, element);
+                htmlContent = await page.evaluate((el) => el.outerHTML, element);
             }
             else {
                 // Otherwise get the full page HTML
@@ -39,7 +54,10 @@ const getVisibleHtml = defineTool({
             const shouldRemoveStyles = removeStyles || cleanHtml;
             // Apply filters server-side to avoid TrustedHTML/Trusted Types restrictions in page context
             if (shouldRemoveScripts || shouldRemoveStyles)
-                htmlContent = sanitizeHtml(htmlContent, { shouldRemoveScripts, shouldRemoveStyles });
+                htmlContent = sanitizeHtml(htmlContent, {
+                    shouldRemoveScripts,
+                    shouldRemoveStyles,
+                });
             response.addResult(`HTML content:\n${htmlContent}`);
         }
         catch (error) {
@@ -47,6 +65,4 @@ const getVisibleHtml = defineTool({
         }
     },
 });
-export default [
-    getVisibleHtml,
-];
+export default [getVisibleHtml];

package/lib/tools/install.js

@@ -13,39 +13,39 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { fork } from 'child_process';
-import path from 'path';
-import { z } from 'zod';
-import { defineTool } from './tool.js';
+import { fork } from "child_process";
+import path from "path";
+import { z } from "zod";
+import { defineTool } from "./tool.js";
 const install = defineTool({
-    capability: 'core-install',
+    capability: "core-install",
     schema: {
-        name: 'browser_install',
-        title: 'Install the browser specified in the config',
-        description: 'Install the browser specified in the config. Call this if you get an error about the browser not being installed.',
+        name: "browser_install",
+        title: "Install the browser specified in the config",
+        description: "Install the browser specified in the config. Call this if you get an error about the browser not being installed.",
         inputSchema: z.object({}),
-        type: 'action',
+        type: "action",
     },
     handle: async (context, params, response) => {
-        const channel = context.config.browser?.launchOptions?.channel ?? context.config.browser?.browserName ?? 'chrome';
-        const cliPath = path.join(require.resolve('playwright/package.json'), '../cli.js');
-        const child = fork(cliPath, ['install', channel], {
-            stdio: 'pipe',
+        const channel = context.config.browser?.launchOptions?.channel ??
+            context.config.browser?.browserName ??
+            "chrome";
+        const cliPath = path.join(require.resolve("playwright/package.json"), "../cli.js");
+        const child = fork(cliPath, ["install", channel], {
+            stdio: "pipe",
         });
         const output = [];
-        child.stdout?.on('data', data => output.push(data.toString()));
-        child.stderr?.on('data', data => output.push(data.toString()));
+        child.stdout?.on("data", (data) => output.push(data.toString()));
+        child.stderr?.on("data", (data) => output.push(data.toString()));
         await new Promise((resolve, reject) => {
-            child.on('close', code => {
+            child.on("close", (code) => {
                 if (code === 0)
                     resolve();
                 else
-                    reject(new Error(`Failed to install browser: ${output.join('')}`));
+                    reject(new Error(`Failed to install browser: ${output.join("")}`));
             });
         });
         response.setIncludeTabs();
     },
 });
-export default [
-    install,
-];
+export default [install];