@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/tools/snapshot.js

@@ -13,41 +13,54 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTabTool, defineTool } 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, defineTool } from "./tool.js";
+import { generateLocator } from "./utils.js";
 const snapshot = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_snapshot',
-        title: 'Page snapshot',
-        description: 'Capture accessibility snapshot of the current page, this is better than screenshot',
+        name: "browser_snapshot",
+        title: "Page snapshot",
+        description: "Capture accessibility snapshot of the current page, this is better than screenshot",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (context, params, response) => {
         await context.ensureTab();
-        response.setIncludeSnapshot('full');
+        response.setIncludeSnapshot("full");
     },
 });
 export const elementSchema = z.object({
-    element: z.string().describe('Human-readable element description used to obtain permission to interact with the element'),
-    ref: z.string().describe('Exact target element reference from the page snapshot'),
+    element: z
+        .string()
+        .describe("Human-readable element description used to obtain permission to interact with the element"),
+    ref: z
+        .string()
+        .describe("Exact target element reference from the page snapshot"),
 });
 const clickSchema = elementSchema.extend({
-    doubleClick: z.boolean().optional().describe('Whether to perform a double click instead of a single click'),
-    button: z.enum(['left', 'right', 'middle']).optional().describe('Button to click, defaults to left'),
-    modifiers: z.array(z.enum(['Alt', 'Control', 'ControlOrMeta', 'Meta', 'Shift'])).optional().describe('Modifier keys to press'),
+    doubleClick: z
+        .boolean()
+        .optional()
+        .describe("Whether to perform a double click instead of a single click"),
+    button: z
+        .enum(["left", "right", "middle"])
+        .optional()
+        .describe("Button to click, defaults to left"),
+    modifiers: z
+        .array(z.enum(["Alt", "Control", "ControlOrMeta", "Meta", "Shift"]))
+        .optional()
+        .describe("Modifier keys to press"),
 });
 const click = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_click',
-        title: 'Click',
-        description: 'Perform click on a web page',
+        name: "browser_click",
+        title: "Click",
+        description: "Perform click on a web page",
         inputSchema: clickSchema,
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -56,8 +69,8 @@ const click = defineTabTool({
             button: params.button,
             modifiers: params.modifiers,
         };
-        const formatted = javascript.formatObject(options, ' ', 'oneline');
-        const optionsAttr = formatted !== '{}' ? formatted : '';
+        const formatted = javascript.formatObject(options, " ", "oneline");
+        const optionsAttr = formatted !== "{}" ? formatted : "";
         if (params.doubleClick)
             response.addCode(`await page.${await generateLocator(locator)}.dblclick(${optionsAttr});`);
         else
@@ -71,18 +84,26 @@ const click = defineTabTool({
     },
 });
 const drag = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_drag',
-        title: 'Drag mouse',
-        description: 'Perform drag and drop between two elements',
+        name: "browser_drag",
+        title: "Drag mouse",
+        description: "Perform drag and drop between two elements",
         inputSchema: z.object({
-            startElement: z.string().describe('Human-readable source element description used to obtain the permission to interact with the element'),
-            startRef: z.string().describe('Exact source element reference from the page snapshot'),
-            endElement: z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'),
-            endRef: z.string().describe('Exact target element reference from the page snapshot'),
+            startElement: z
+                .string()
+                .describe("Human-readable source element description used to obtain the permission to interact with the element"),
+            startRef: z
+                .string()
+                .describe("Exact source element reference from the page snapshot"),
+            endElement: z
+                .string()
+                .describe("Human-readable target element description used to obtain the permission to interact with the element"),
+            endRef: z
+                .string()
+                .describe("Exact target element reference from the page snapshot"),
         }),
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -97,13 +118,13 @@ const drag = defineTabTool({
     },
 });
 const hover = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_hover',
-        title: 'Hover mouse',
-        description: 'Hover over element on page',
+        name: "browser_hover",
+        title: "Hover mouse",
+        description: "Hover over element on page",
         inputSchema: elementSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -115,16 +136,18 @@ const hover = defineTabTool({
     },
 });
 const selectOptionSchema = elementSchema.extend({
-    values: z.array(z.string()).describe('Array of values to select in the dropdown. This can be a single value or multiple values.'),
+    values: z
+        .array(z.string())
+        .describe("Array of values to select in the dropdown. This can be a single value or multiple values."),
 });
 const selectOption = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_select_option',
-        title: 'Select option',
-        description: 'Select an option in a dropdown',
+        name: "browser_select_option",
+        title: "Select option",
+        description: "Select an option in a dropdown",
         inputSchema: selectOptionSchema,
-        type: 'input',
+        type: "input",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
@@ -135,10 +158,4 @@ const selectOption = defineTabTool({
         });
     },
 });
-export default [
-    snapshot,
-    click,
-    drag,
-    hover,
-    selectOption,
-];
+export default [snapshot, click, drag, hover, selectOption];

package/lib/tools/tabs.js

@@ -13,47 +13,50 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTool } from './tool.js';
+import { z } from "zod";
+import { defineTool } from "./tool.js";
 const browserTabs = defineTool({
-    capability: 'core-tabs',
+    capability: "core-tabs",
     schema: {
-        name: 'browser_tabs',
-        title: 'Manage tabs',
-        description: 'List, create, close, or select a browser tab.',
+        name: "browser_tabs",
+        title: "Manage tabs",
+        description: "List, create, close, or select a browser tab.",
         inputSchema: z.object({
-            action: z.enum(['list', 'new', 'close', 'select']).describe('Operation to perform'),
-            index: z.number().optional().describe('Tab index, used for close/select. If omitted for close, current tab is closed.'),
+            action: z
+                .enum(["list", "new", "close", "select"])
+                .describe("Operation to perform"),
+            index: z
+                .number()
+                .optional()
+                .describe("Tab index, used for close/select. If omitted for close, current tab is closed."),
         }),
-        type: 'action',
+        type: "action",
     },
     handle: async (context, params, response) => {
         switch (params.action) {
-            case 'list': {
+            case "list": {
                 await context.ensureTab();
                 response.setIncludeTabs();
                 return;
             }
-            case 'new': {
+            case "new": {
                 await context.newTab();
                 response.setIncludeTabs();
                 return;
             }
-            case 'close': {
+            case "close": {
                 await context.closeTab(params.index);
-                response.setIncludeSnapshot('full');
+                response.setIncludeSnapshot("full");
                 return;
             }
-            case 'select': {
+            case "select": {
                 if (params.index === undefined)
-                    throw new Error('Tab index is required');
+                    throw new Error("Tab index is required");
                 await context.selectTab(params.index);
-                response.setIncludeSnapshot('full');
+                response.setIncludeSnapshot("full");
                 return;
             }
         }
     },
 });
-export default [
-    browserTabs,
-];
+export default [browserTabs];

package/lib/tools/tool.js

@@ -21,11 +21,13 @@ export function defineTabTool(tool) {
         ...tool,
         handle: async (context, params, response) => {
             const tab = await context.ensureTab();
-            const modalStates = tab.modalStates().map(state => state.type);
+            const modalStates = tab.modalStates().map((state) => state.type);
             if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
-                response.addError(`Error: The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` + tab.modalStatesMarkdown().join('\n'));
+                response.addError(`Error: The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` +
+                    tab.modalStatesMarkdown().join("\n"));
             else if (!tool.clearsModalState && modalStates.length)
-                response.addError(`Error: Tool "${tool.schema.name}" does not handle the modal state.\n` + tab.modalStatesMarkdown().join('\n'));
+                response.addError(`Error: Tool "${tool.schema.name}" does not handle the modal state.\n` +
+                    tab.modalStatesMarkdown().join("\n"));
             else
                 return tool.handle(tab, params, response);
         },

package/lib/tools/utils.js

@@ -13,13 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// @ts-ignore
-import { asLocator } from 'playwright-core/lib/utils';
+// @ts-expect-error
+import { asLocator } from "playwright-core/lib/utils";
 export async function waitForCompletion(tab, callback) {
     const requests = new Set();
     let frameNavigated = false;
     let waitCallback = () => { };
-    const waitBarrier = new Promise(f => { waitCallback = f; });
+    const waitBarrier = new Promise((f) => {
+        waitCallback = f;
+    });
     const requestListener = (request) => requests.add(request);
     const requestFinishedListener = (request) => {
         requests.delete(request);
@@ -32,20 +34,20 @@ export async function waitForCompletion(tab, callback) {
         frameNavigated = true;
         dispose();
         clearTimeout(timeout);
-        void tab.waitForLoadState('load').then(waitCallback);
+        void tab.waitForLoadState("load").then(waitCallback);
     };
     const onTimeout = () => {
         dispose();
         waitCallback();
     };
-    tab.page.on('request', requestListener);
-    tab.page.on('requestfinished', requestFinishedListener);
-    tab.page.on('framenavigated', frameNavigateListener);
+    tab.page.on("request", requestListener);
+    tab.page.on("requestfinished", requestFinishedListener);
+    tab.page.on("framenavigated", frameNavigateListener);
     const timeout = setTimeout(onTimeout, 10000);
     const dispose = () => {
-        tab.page.off('request', requestListener);
-        tab.page.off('requestfinished', requestFinishedListener);
-        tab.page.off('framenavigated', frameNavigateListener);
+        tab.page.off("request", requestListener);
+        tab.page.off("requestfinished", requestFinishedListener);
+        tab.page.off("framenavigated", frameNavigateListener);
         clearTimeout(timeout);
     };
     try {
@@ -63,12 +65,14 @@ export async function waitForCompletion(tab, callback) {
 export async function generateLocator(locator) {
     try {
         const { resolvedSelector } = await locator._resolveSelector();
-        return asLocator('javascript', resolvedSelector);
+        return asLocator("javascript", resolvedSelector);
     }
     catch (e) {
-        throw new Error('Ref not found, likely because element was removed. Use browser_get_snapshot to see what elements are currently on the page.');
+        throw new Error("Ref not found, likely because element was removed. Use browser_get_snapshot to see what elements are currently on the page.");
     }
 }
 export async function callOnPageNoTrace(page, callback) {
-    return await page._wrapApiCall(() => callback(page), { internal: true });
+    return await page._wrapApiCall(() => callback(page), {
+        internal: true,
+    });
 }

package/lib/tools/wait.js

@@ -13,43 +13,48 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTool } from './tool.js';
+import { z } from "zod";
+import { defineTool } from "./tool.js";
 const wait = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_wait_for',
-        title: 'Wait for',
-        description: 'Wait for text to appear or disappear or a specified time to pass',
+        name: "browser_wait_for",
+        title: "Wait for",
+        description: "Wait for text to appear or disappear or a specified time to pass",
         inputSchema: z.object({
-            time: z.number().optional().describe('The time to wait in seconds'),
-            text: z.string().optional().describe('The text to wait for'),
-            textGone: z.string().optional().describe('The text to wait for to disappear'),
+            time: z.number().optional().describe("The time to wait in seconds"),
+            text: z.string().optional().describe("The text to wait for"),
+            textGone: z
+                .string()
+                .optional()
+                .describe("The text to wait for to disappear"),
         }),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (context, params, response) => {
         if (!params.text && !params.textGone && !params.time)
-            throw new Error('Either time, text or textGone must be provided');
+            throw new Error("Either time, text or textGone must be provided");
         if (params.time) {
             response.addCode(`await new Promise(f => setTimeout(f, ${params.time} * 1000));`);
-            await new Promise(f => setTimeout(f, Math.min(30000, params.time * 1000)));
+            await new Promise((f) => setTimeout(f, Math.min(30000, params.time * 1000)));
         }
         const tab = context.currentTabOrDie();
-        const locator = params.text ? tab.page.getByText(params.text).first() : undefined;
-        const goneLocator = params.textGone ? tab.page.getByText(params.textGone).first() : undefined;
+        const locator = params.text
+            ? tab.page.getByText(params.text).first()
+            : undefined;
+        const goneLocator = params.textGone
+            ? tab.page.getByText(params.textGone).first()
+            : undefined;
         if (goneLocator) {
             response.addCode(`await page.getByText(${JSON.stringify(params.textGone)}).first().waitFor({ state: 'hidden' });`);
-            await goneLocator.waitFor({ state: 'hidden' });
+            await goneLocator.waitFor({ state: "hidden" });
         }
         if (locator) {
             response.addCode(`await page.getByText(${JSON.stringify(params.text)}).first().waitFor({ state: 'visible' });`);
-            await locator.waitFor({ state: 'visible' });
+            await locator.waitFor({ state: "visible" });
         }
         response.addResult(`Waited for ${params.text || params.textGone || params.time}`);
         response.setIncludeSnapshot();
     },
 });
-export default [
-    wait,
-];
+export default [wait];

package/lib/tools.js

@@ -13,29 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import common from './tools/common.js';
-import console from './tools/console.js';
-// import dialogs from './tools/dialogs.js';
-// import files from './tools/files.js';
-// import install from './tools/install.js';
-import keyboard from './tools/keyboard.js';
-import navigate from './tools/navigate.js';
-import network from './tools/network.js';
-import networkSearch from './tools/networkSearch.js';
-import networkDetail from './tools/networkDetail.js';
-// import pdf from './tools/pdf.js';
-import snapshot from './tools/snapshot.js';
+import { toolNameSchema } from "./hooks/schema.js";
+import common from "./tools/common.js";
+import console from "./tools/console.js";
 // import tabs from './tools/tabs.js';
 // import screenshot from './tools/screenshot.js';
 // import wait from './tools/wait.js';
 // import javascript from './tools/javascript.js';
-import evaluate from './tools/evaluate.js';
-import getVisibleHtml from './tools/getVisibleHtml.js';
-import getSnapshot from './tools/getSnapshot.js';
-import repl from './tools/repl.js';
-import extractFrameworkState from './tools/extractFrameworkState.js';
-import scroll from './tools/scroll.js';
-import { toolNameSchema } from './hooks/schema.js';
+import evaluate from "./tools/evaluate.js";
+import extractFrameworkState from "./tools/extractFrameworkState.js";
+import getSnapshot from "./tools/getSnapshot.js";
+import getVisibleHtml from "./tools/getVisibleHtml.js";
+// import dialogs from './tools/dialogs.js';
+// import files from './tools/files.js';
+// import install from './tools/install.js';
+import keyboard from "./tools/keyboard.js";
+import navigate from "./tools/navigate.js";
+import network from "./tools/network.js";
+import networkDetail from "./tools/networkDetail.js";
+import networkSearch from "./tools/networkSearch.js";
+import repl from "./tools/repl.js";
+import scroll from "./tools/scroll.js";
+// import pdf from './tools/pdf.js';
+import snapshot from "./tools/snapshot.js";
 export const allTools = [
     ...common,
     ...console,
@@ -62,6 +62,7 @@ export const allTools = [
     ...scroll,
 ];
 export function filteredTools(config) {
-    return allTools.filter(tool => (tool.capability.startsWith('core') || config.capabilities?.includes(tool.capability)) &&
+    return allTools.filter((tool) => (tool.capability.startsWith("core") ||
+        config.capabilities?.includes(tool.capability)) &&
         toolNameSchema.safeParse(tool.schema.name).success);
 }

package/lib/utils/adBlockFilter.js

@@ -1,28 +1,31 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import { FiltersEngine, Request } from '@ghostery/adblocker';
+import { FiltersEngine, Request } from "@ghostery/adblocker";
+import fs from "fs";
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 class AdBlockFilter {
     _engine;
     _initialized = false;
     _loadFilters() {
-        const packageRoot = path.resolve(__dirname, '../..');
-        const libFiltersDir = path.join(packageRoot, 'lib/filters');
-        const srcFiltersDir = path.join(packageRoot, 'src/filters');
-        const filtersDir = fs.existsSync(libFiltersDir) ? libFiltersDir : srcFiltersDir;
+        const packageRoot = path.resolve(__dirname, "../..");
+        const libFiltersDir = path.join(packageRoot, "lib/filters");
+        const srcFiltersDir = path.join(packageRoot, "src/filters");
+        const filtersDir = fs.existsSync(libFiltersDir)
+            ? libFiltersDir
+            : srcFiltersDir;
         if (!fs.existsSync(filtersDir))
             return FiltersEngine.empty();
-        const filterFiles = fs.readdirSync(filtersDir).filter(f => f.endsWith('.txt'));
+        const filterFiles = fs
+            .readdirSync(filtersDir)
+            .filter((f) => f.endsWith(".txt"));
         const allFilters = [];
         for (const file of filterFiles) {
             const filePath = path.join(filtersDir, file);
-            const content = fs.readFileSync(filePath, 'utf-8');
+            const content = fs.readFileSync(filePath, "utf-8");
             allFilters.push(content);
         }
-        const combinedFilters = allFilters.join('\n');
+        const combinedFilters = allFilters.join("\n");
         return FiltersEngine.parse(combinedFilters);
     }
     initialize() {
@@ -47,7 +50,7 @@ class AdBlockFilter {
                 sourceHostname: hostname,
                 sourceDomain: domain,
                 type: this._mapResourceType(resourceType),
-                requestId: '',
+                requestId: "",
                 tabId: 0,
             });
             const result = this._engine.match(request);
@@ -59,20 +62,20 @@ class AdBlockFilter {
     }
     _mapResourceType(resourceType) {
         const mapping = {
-            'document': 'main_frame',
-            'stylesheet': 'stylesheet',
-            'image': 'image',
-            'media': 'media',
-            'font': 'font',
-            'script': 'script',
-            'texttrack': 'other',
-            'xhr': 'xmlhttprequest',
-            'fetch': 'xmlhttprequest',
-            'websocket': 'websocket',
-            'manifest': 'other',
-            'other': 'other',
+            document: "main_frame",
+            stylesheet: "stylesheet",
+            image: "image",
+            media: "media",
+            font: "font",
+            script: "script",
+            texttrack: "other",
+            xhr: "xmlhttprequest",
+            fetch: "xmlhttprequest",
+            websocket: "websocket",
+            manifest: "other",
+            other: "other",
         };
-        return mapping[resourceType] || 'other';
+        return mapping[resourceType] || "other";
     }
 }
 let filterInstance;

package/lib/utils/codegen.js

@@ -17,35 +17,39 @@
 // - https://github.com/microsoft/playwright/blob/76ee48dc9d4034536e3ec5b2c7ce8be3b79418a8/packages/playwright-core/src/utils/isomorphic/stringUtils.ts
 // - https://github.com/microsoft/playwright/blob/76ee48dc9d4034536e3ec5b2c7ce8be3b79418a8/packages/playwright-core/src/server/codegen/javascript.ts
 // NOTE: this function should not be used to escape any selectors.
-export function escapeWithQuotes(text, char = '\'') {
+export function escapeWithQuotes(text, char = "'") {
     const stringified = JSON.stringify(text);
-    const escapedText = stringified.substring(1, stringified.length - 1).replace(/\\"/g, '"');
-    if (char === '\'')
-        return char + escapedText.replace(/[']/g, '\\\'') + char;
+    const escapedText = stringified
+        .substring(1, stringified.length - 1)
+        .replace(/\\"/g, '"');
+    if (char === "'")
+        return char + escapedText.replace(/[']/g, "\\'") + char;
     if (char === '"')
         return char + escapedText.replace(/["]/g, '\\"') + char;
-    if (char === '`')
-        return char + escapedText.replace(/[`]/g, '\\`') + char;
-    throw new Error('Invalid escape char');
+    if (char === "`")
+        return char + escapedText.replace(/[`]/g, "\\`") + char;
+    throw new Error("Invalid escape char");
 }
 export function quote(text) {
-    return escapeWithQuotes(text, '\'');
+    return escapeWithQuotes(text, "'");
 }
-export function formatObject(value, indent = '  ', mode = 'multiline') {
-    if (typeof value === 'string')
+export function formatObject(value, indent = "  ", mode = "multiline") {
+    if (typeof value === "string")
         return quote(value);
     if (Array.isArray(value))
-        return `[${value.map(o => formatObject(o)).join(', ')}]`;
-    if (typeof value === 'object') {
-        const keys = Object.keys(value).filter(key => value[key] !== undefined).sort();
+        return `[${value.map((o) => formatObject(o)).join(", ")}]`;
+    if (typeof value === "object") {
+        const keys = Object.keys(value)
+            .filter((key) => value[key] !== undefined)
+            .sort();
         if (!keys.length)
-            return '{}';
+            return "{}";
         const tokens = [];
         for (const key of keys)
             tokens.push(`${key}: ${formatObject(value[key])}`);
-        if (mode === 'multiline')
+        if (mode === "multiline")
             return `{\n${tokens.join(`,\n${indent}`)}\n}`;
-        return `{ ${tokens.join(', ')} }`;
+        return `{ ${tokens.join(", ")} }`;
     }
     return String(value);
 }

package/lib/utils/extensionPath.js

@@ -1,10 +1,10 @@
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 // Resolve package root from this module's location
 // In published package: node_modules/@wordbricks/playwright-mcp/lib/utils/extensionPath.js
 // In development: src/utils/extensionPath.ts
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 // Go up from lib/utils/ or src/utils/ to package root
-const packageRoot = resolve(__dirname, '../..');
-export const extensionPath = resolve(packageRoot, 'src/extensions/uBlockOriginLite');
+const packageRoot = resolve(__dirname, "../..");
+export const extensionPath = resolve(packageRoot, "src/extensions/uBlockOriginLite");