@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/hooks/networkSetup.js

@@ -1,5 +1,5 @@
-import { trackEvent } from './events.js';
-import { shouldCaptureRequest } from './networkFilters.js';
+import { trackEvent } from "./events.js";
+import { shouldCaptureRequest } from "./networkFilters.js";
 const eventIdToEntryMap = new WeakMap();
 const getEventIdMap = (context) => {
     let map = eventIdToEntryMap.get(context);
@@ -11,7 +11,7 @@ const getEventIdMap = (context) => {
 };
 export const getNetworkEventEntry = (context, id) => getEventIdMap(context).get(id);
 export const setupNetworkTracking = (context, page) => {
-    page.on('response', async (response) => {
+    page.on("response", async (response) => {
         const request = response.request();
         const method = request.method();
         const url = request.url();
@@ -19,7 +19,9 @@ export const setupNetworkTracking = (context, page) => {
         const resourceType = request.resourceType();
         // Apply filters before saving the event
         if (shouldCaptureRequest(method, url, status, resourceType)) {
-            const setCookies = await response.headerValues('set-cookie').catch(() => []);
+            const setCookies = await response
+                .headerValues("set-cookie")
+                .catch(() => []);
             const cookieValues = setCookies.length ? setCookies : undefined;
             const networkData = {
                 method,
@@ -30,13 +32,13 @@ export const setupNetworkTracking = (context, page) => {
                 setCookies: cookieValues,
             };
             const id = trackEvent(context, {
-                type: 'network-request',
+                type: "network-request",
                 data: networkData,
             });
             getEventIdMap(context).set(id, { request, response });
         }
     });
-    page.on('requestfailed', request => {
+    page.on("requestfailed", (request) => {
         const method = request.method();
         const url = request.url();
         const status = 0; // Failed requests have status 0
@@ -50,7 +52,7 @@ export const setupNetworkTracking = (context, page) => {
                 postData: request.postData() || undefined,
             };
             const id = trackEvent(context, {
-                type: 'network-request',
+                type: "network-request",
                 data: networkData,
             });
             getEventIdMap(context).set(id, { request });

package/lib/hooks/networkTrackingHook.js

@@ -1,20 +1,20 @@
-import { toArray, pipe, filter } from '@fxts/core';
-import { parseGraphQLRequestFromHttp } from '../utils/graphql.js';
-import { formatNetworkSummaryLine } from '../utils/networkFormat.js';
-import { defineGroupingRule } from './grouping.js';
-import { Ok } from '../utils/result.js';
-import { hookNameSchema } from './schema.js';
-import { normalizeUrlForGrouping } from './networkFilters.js';
-import { getEventStore, isEventType } from './events.js';
+import { filter, pipe, toArray } from "@fxts/core";
+import { parseGraphQLRequestFromHttp } from "../utils/graphql.js";
+import { formatNetworkSummaryLine } from "../utils/networkFormat.js";
+import { Ok } from "../utils/result.js";
+import { getEventStore, isEventType } from "./events.js";
+import { defineGroupingRule } from "./grouping.js";
+import { normalizeUrlForGrouping } from "./networkFilters.js";
+import { hookNameSchema } from "./schema.js";
 const networkTrackingPreHook = {
-    name: hookNameSchema.enum['network-tracking-pre'],
+    name: hookNameSchema.enum["network-tracking-pre"],
     handler: async (_ctx) => {
         // Pre-hook now just acts as a marker, event consumption happens elsewhere
         return Ok(undefined);
     },
 };
 const networkTrackingPostHook = {
-    name: hookNameSchema.enum['network-tracking-post'],
+    name: hookNameSchema.enum["network-tracking-post"],
     handler: async (_ctx) => {
         // Post-hook now just acts as a marker, network event collection happens automatically
         return Ok(undefined);
@@ -30,38 +30,38 @@ export const formatNetworkEvent = (event) => {
     if (!setCookies || setCookies.length === 0)
         return summary;
     const names = setCookies
-        .map(cookie => {
-        const firstPart = cookie.split(';', 1)[0];
-        const [name] = firstPart.split('=', 1);
+        .map((cookie) => {
+        const firstPart = cookie.split(";", 1)[0];
+        const [name] = firstPart.split("=", 1);
         return name?.trim();
     })
         .filter((name) => !!name);
     if (!names.length)
         return summary;
-    return `${summary} | Set-Cookie keys: ${names.join(', ')}`;
+    return `${summary} | Set-Cookie keys: ${names.join(", ")}`;
 };
 const computeNetworkGroupKey = (event) => {
-    const method = (event.data.method || '').toUpperCase();
+    const method = (event.data.method || "").toUpperCase();
     const baseUrl = normalizeUrlForGrouping(event.data.url);
     const gql = parseGraphQLRequestFromHttp(event.data.method, event.data.url, {}, event.data.postData);
     if (gql) {
-        const type = gql.operationType === 'unknown' ? 'operation' : gql.operationType;
+        const type = gql.operationType === "unknown" ? "operation" : gql.operationType;
         const op = gql.operationName ? `${type} ${gql.operationName}` : type;
         return `${method} ${baseUrl} [GraphQL: ${op}]`;
     }
     return `${method} ${baseUrl}`;
 };
 export const networkGroupingRule = defineGroupingRule({
-    match: (e) => e.type === 'network-request',
-    keyOf: e => computeNetworkGroupKey(e),
+    match: (e) => e.type === "network-request",
+    keyOf: (e) => computeNetworkGroupKey(e),
     summaryOf: (first, run) => {
         const key = computeNetworkGroupKey(first);
         const count = run.length;
         const firstStatus = first.data.status;
-        const allSameStatus = run.every(e => e.data.status === firstStatus);
+        const allSameStatus = run.every((e) => e.data.status === firstStatus);
         return allSameStatus
             ? `${key} → ${firstStatus} (x${count})`
             : `${key} (x${count})`;
-    }
+    },
 });
-export const listNetworkEvents = (context) => pipe(context, getEventStore, store => store.events.values(), filter(isEventType('network-request')), toArray);
+export const listNetworkEvents = (context) => pipe(context, getEventStore, (store) => store.events.values(), filter(isEventType("network-request")), toArray);

package/lib/hooks/pageHeightHook.js

@@ -1,6 +1,6 @@
-import { Ok, Err } from '../utils/result.js';
-import { hookNameSchema } from './schema.js';
-import { trackEvent } from './events.js';
+import { Err, Ok } from "../utils/result.js";
+import { trackEvent } from "./events.js";
+import { hookNameSchema } from "./schema.js";
 const pageHeightStateMap = new WeakMap();
 const capturePageHeight = async (ctx) => {
     const tab = ctx.tab || ctx.context.currentTab();
@@ -9,7 +9,7 @@ const capturePageHeight = async (ctx) => {
     try {
         return await tab.page.evaluate(() => ({
             pageHeight: document.documentElement.scrollHeight,
-            scrollY: window.scrollY
+            scrollY: window.scrollY,
         }));
     }
     catch {
@@ -17,7 +17,7 @@ const capturePageHeight = async (ctx) => {
     }
 };
 const pageHeightPreHook = {
-    name: hookNameSchema.enum['page-height-pre'],
+    name: hookNameSchema.enum["page-height-pre"],
     handler: async (ctx) => {
         try {
             const initialState = await capturePageHeight(ctx);
@@ -33,7 +33,7 @@ const pageHeightPreHook = {
     },
 };
 const pageHeightPostHook = {
-    name: hookNameSchema.enum['page-height-post'],
+    name: hookNameSchema.enum["page-height-post"],
     handler: async (ctx) => {
         try {
             const initialState = pageHeightStateMap.get(ctx.context);
@@ -44,9 +44,9 @@ const pageHeightPostHook = {
                 return Ok(undefined);
             const heightChange = finalState.pageHeight - initialState.pageHeight;
             const tab = ctx.tab || ctx.context.currentTab();
-            const url = tab ? tab.page.url() : 'unknown';
+            const url = tab ? tab.page.url() : "unknown";
             trackEvent(ctx.context, {
-                type: 'page-height-change',
+                type: "page-height-change",
                 data: {
                     previousHeight: initialState.pageHeight,
                     currentHeight: finalState.pageHeight,
@@ -71,5 +71,5 @@ export const formatPageHeightEvent = (event) => {
     const { previousHeight, currentHeight, heightChange } = event.data;
     if (heightChange === 0)
         return `Page height unchanged.`;
-    return `Page height changed: ${previousHeight}px → ${currentHeight}px (${heightChange > 0 ? '+' : ''}${heightChange}px)`;
+    return `Page height changed: ${previousHeight}px → ${currentHeight}px (${heightChange > 0 ? "+" : ""}${heightChange}px)`;
 };

package/lib/hooks/registry.js

@@ -1,15 +1,14 @@
-import { pipe, reduce, values } from '@fxts/core';
-import { createHookRegistry, setToolHooks } from './core.js';
-import { networkTrackingHooks } from './networkTrackingHook.js';
-import { pageHeightHooks } from './pageHeightHook.js';
-import { waitHooks } from './waitHook.js';
-import { frameworkStateHooks } from './frameworkStateHook.js';
-import { jsonLdDetectionHooks } from './jsonLdDetectionHook.js';
-import { toolNameSchema } from './schema.js';
-import { requireTabHooks } from './requireTabHook.js';
-import { registerGroupingRule } from './grouping.js';
-import { networkGroupingRule } from './networkTrackingHook.js';
-import { antiBotDetectionHooks } from './antiBotDetectionHook.js';
+import { pipe, reduce, values } from "@fxts/core";
+import { antiBotDetectionHooks } from "./antiBotDetectionHook.js";
+import { createHookRegistry, setToolHooks } from "./core.js";
+import { frameworkStateHooks } from "./frameworkStateHook.js";
+import { registerGroupingRule } from "./grouping.js";
+import { jsonLdDetectionHooks } from "./jsonLdDetectionHook.js";
+import { networkGroupingRule, networkTrackingHooks, } from "./networkTrackingHook.js";
+import { pageHeightHooks } from "./pageHeightHook.js";
+import { requireTabHooks } from "./requireTabHook.js";
+import { toolNameSchema } from "./schema.js";
+import { waitHooks } from "./waitHook.js";
 const COMMON_HOOKS = {
     preHooks: [
         requireTabHooks.pre,
@@ -17,7 +16,7 @@ const COMMON_HOOKS = {
         antiBotDetectionHooks.pre,
         pageHeightHooks.pre,
         frameworkStateHooks.pre,
-        jsonLdDetectionHooks.pre
+        jsonLdDetectionHooks.pre,
     ],
     postHooks: [
         networkTrackingHooks.post,
@@ -25,7 +24,7 @@ const COMMON_HOOKS = {
         frameworkStateHooks.post,
         jsonLdDetectionHooks.post,
         pageHeightHooks.post,
-        waitHooks.post
+        waitHooks.post,
     ],
 };
 const toolHooksConfig = [
@@ -37,6 +36,6 @@ const toolHooksConfig = [
 // },
 ];
 export const buildHookRegistry = () => {
-    registerGroupingRule('network-request', networkGroupingRule);
-    return pipe(createHookRegistry(), registry => reduce((acc, toolName) => setToolHooks(acc, { toolName, ...COMMON_HOOKS }), registry, values(toolNameSchema.enum)), registry => reduce(setToolHooks, registry, toolHooksConfig));
+    registerGroupingRule("network-request", networkGroupingRule);
+    return pipe(createHookRegistry(), (registry) => reduce((acc, toolName) => setToolHooks(acc, { toolName, ...COMMON_HOOKS }), registry, values(toolNameSchema.enum)), (registry) => reduce(setToolHooks, registry, toolHooksConfig));
 };

package/lib/hooks/requireTabHook.js

@@ -1,8 +1,8 @@
-import { Ok, Err } from '../utils/result.js';
-import { hookNameSchema, toolNameSchema } from './schema.js';
+import { Err, Ok } from "../utils/result.js";
+import { hookNameSchema, toolNameSchema } from "./schema.js";
 const MESSAGE = 'No open tabs. Use the "browser_navigate" tool to navigate to a page first.';
 const requireTabPreHook = {
-    name: hookNameSchema.enum['require-tab-pre'],
+    name: hookNameSchema.enum["require-tab-pre"],
     handler: async (ctx) => {
         try {
             // Allow navigate tool to create/open a tab

package/lib/hooks/schema.js

@@ -1,45 +1,45 @@
-import { z } from 'zod';
+import { z } from "zod";
 export const hookNameSchema = z.enum([
-    'network-tracking-pre',
-    'network-tracking-post',
-    'page-height-pre',
-    'page-height-post',
-    'wait-post',
-    'framework-state-pre',
-    'framework-state-post',
-    'json-ld-detection-pre',
-    'json-ld-detection-post',
-    'require-tab-pre',
-    'anti-bot-detection-pre',
-    'anti-bot-detection-post',
+    "network-tracking-pre",
+    "network-tracking-post",
+    "page-height-pre",
+    "page-height-post",
+    "wait-post",
+    "framework-state-pre",
+    "framework-state-post",
+    "json-ld-detection-pre",
+    "json-ld-detection-post",
+    "require-tab-pre",
+    "anti-bot-detection-pre",
+    "anti-bot-detection-post",
 ]);
 // Tool names enum - should match actual tool names in
 export const toolNameSchema = z.enum([
-    'browser_click',
-    'browser_extract_framework_state',
-    'browser_fill_form',
-    'browser_get_snapshot',
+    "browser_click",
+    "browser_extract_framework_state",
+    "browser_fill_form",
+    "browser_get_snapshot",
     // 'browser_get_visible_html',
-    'browser_navigate',
+    "browser_navigate",
     // 'browser_navigate_back',
     // 'browser_navigate_forward',
-    'browser_network_detail',
-    'browser_network_search',
-    'browser_press_key',
-    'browser_reload',
-    'browser_repl',
-    'browser_scroll',
-    'browser_type',
-    'browser_wait',
+    "browser_network_detail",
+    "browser_network_search",
+    "browser_press_key",
+    "browser_reload",
+    "browser_repl",
+    "browser_scroll",
+    "browser_type",
+    "browser_wait",
 ]);
 export const EventTypeSchema = z.enum([
-    'network-request',
-    'page-height-change',
-    'wait',
-    'tool-call',
-    'framework-state',
-    'json-ld',
-    'anti-bot',
+    "network-request",
+    "page-height-change",
+    "wait",
+    "tool-call",
+    "framework-state",
+    "json-ld",
+    "anti-bot",
 ]);
 export const NetworkRequestEventDataSchema = z.object({
     method: z.string(),
@@ -69,7 +69,7 @@ export const ToolCallEventDataSchema = z.object({
 export const FrameworkStateEventDataSchema = z.object({
     state: z.record(z.any()),
     changes: z.array(z.string()).optional(),
-    action: z.enum(['detected', 'changed']),
+    action: z.enum(["detected", "changed"]),
 });
 export const JsonLdEventDataSchema = z.object({
     state: z.record(z.object({
@@ -77,13 +77,13 @@ export const JsonLdEventDataSchema = z.object({
         indices: z.array(z.number()),
     })),
     changes: z.array(z.string()).optional(),
-    action: z.enum(['detected', 'changed']),
+    action: z.enum(["detected", "changed"]),
 });
 export const AntiBotEventDataSchema = z.object({
-    provider: z.enum(['cloudflare-turnstile', 'aws-waf']),
-    detectionMethod: z.literal('network-request'),
+    provider: z.enum(["cloudflare-turnstile", "aws-waf"]),
+    detectionMethod: z.literal("network-request"),
     url: z.string(),
     status: z.number(),
-    action: z.enum(['detected', 'resolved', 'still-blocked']),
+    action: z.enum(["detected", "resolved", "still-blocked"]),
     waitMs: z.number().optional(),
 });

package/lib/hooks/waitHook.js

@@ -1,11 +1,11 @@
-import ms from 'ms';
-import { Ok, Err } from '../utils/result.js';
-import { trackEvent } from './events.js';
-import { hookNameSchema } from './schema.js';
-export const WAIT_TIME_STR = '0.5s';
+import ms from "ms";
+import { Err, Ok } from "../utils/result.js";
+import { trackEvent } from "./events.js";
+import { hookNameSchema } from "./schema.js";
+export const WAIT_TIME_STR = "0.5s";
 export const WAIT_TIME_MS = ms(WAIT_TIME_STR);
 const waitPostHook = {
-    name: hookNameSchema.enum['wait-post'],
+    name: hookNameSchema.enum["wait-post"],
     handler: async (ctx) => {
         try {
             const tab = ctx.tab || ctx.context.currentTab();
@@ -14,7 +14,7 @@ const waitPostHook = {
             const startTime = Date.now();
             await tab.page.waitForTimeout(WAIT_TIME_MS);
             trackEvent(ctx.context, {
-                type: 'wait',
+                type: "wait",
                 data: {
                     duration: WAIT_TIME_MS,
                 },

package/lib/index.js

@@ -13,18 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BrowserServerBackend } from './browserServerBackend.js';
-import { resolveConfig } from './config.js';
-import { contextFactory } from './browserContextFactory.js';
-import * as mcpServer from './mcp/server.js';
-export async function createConnection(userConfig = {}, contextGetter) {
-    const config = await resolveConfig(userConfig);
-    const factory = contextGetter ? new SimpleBrowserContextFactory(contextGetter) : contextFactory(config);
+import { contextFactory } from "./browserContextFactory.js";
+import { BrowserServerBackend } from "./browserServerBackend.js";
+import { resolveConfig } from "./config.js";
+import * as mcpServer from "./mcp/server.js";
+export async function createConnection(userConfig, contextGetter) {
+    const config = await resolveConfig(userConfig || {});
+    const factory = contextGetter
+        ? new SimpleBrowserContextFactory(contextGetter)
+        : contextFactory(config);
     return mcpServer.createServer(new BrowserServerBackend(config, factory), false);
 }
 class SimpleBrowserContextFactory {
-    name = 'custom';
-    description = 'Connect to a browser using a custom context getter';
+    name = "custom";
+    description = "Connect to a browser using a custom context getter";
     _contextGetter;
     constructor(contextGetter) {
         this._contextGetter = contextGetter;
@@ -33,7 +35,7 @@ class SimpleBrowserContextFactory {
         const browserContext = await this._contextGetter();
         return {
             browserContext,
-            close: () => browserContext.close()
+            close: () => browserContext.close(),
         };
     }
 }

package/lib/mcp/inProcessTransport.js

@@ -23,13 +23,13 @@ export class InProcessTransport {
     }
     async start() {
         if (this._connected)
-            throw new Error('InprocessTransport already started!');
+            throw new Error("InprocessTransport already started!");
         await this._server.connect(this._serverTransport);
         this._connected = true;
     }
     async send(message, options) {
         if (!this._connected)
-            throw new Error('Transport not connected');
+            throw new Error("Transport not connected");
         this._serverTransport._receiveFromClient(message);
     }
     async close() {
@@ -53,8 +53,7 @@ class InProcessServerTransport {
     constructor(clientTransport) {
         this._clientTransport = clientTransport;
     }
-    async start() {
-    }
+    async start() { }
     async send(message, options) {
         this._clientTransport._receiveFromServer(message);
     }

package/lib/mcp/proxyBackend.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { zodToJsonSchema } from 'zod-to-json-schema';
-import { Client } from '@modelcontextprotocol/sdk/client/index.js';
-import { ListRootsRequestSchema, PingRequestSchema } from '@modelcontextprotocol/sdk/types.js';
-import { logUnhandledError } from '../utils/log.js';
-import { packageJSON } from '../utils/package.js';
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { ListRootsRequestSchema, PingRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+import { logUnhandledError } from "../utils/log.js";
+import { packageJSON } from "../utils/package.js";
 export class ProxyBackend {
-    name = 'Playwright MCP Client Switcher';
+    name = "Playwright MCP Client Switcher";
     version = packageJSON.version;
     _mcpProviders;
     _currentClient;
@@ -35,7 +35,9 @@ export class ProxyBackend {
             return;
         const version = server.getClientVersion();
         const capabilities = server.getClientCapabilities();
-        if (capabilities?.roots && version && clientsWithRoots.includes(version.name)) {
+        if (capabilities?.roots &&
+            version &&
+            clientsWithRoots.includes(version.name)) {
             const { roots } = await server.listRoots();
             this._roots = roots;
         }
@@ -45,18 +47,15 @@ export class ProxyBackend {
         const response = await this._currentClient.listTools();
         if (this._mcpProviders.length === 1)
             return response.tools;
-        return [
-            ...response.tools,
-            this._contextSwitchTool,
-        ];
+        return [...response.tools, this._contextSwitchTool];
     }
     async callTool(name, args) {
         if (name === this._contextSwitchTool.name)
             return this._callContextSwitchTool(args);
-        return await this._currentClient.callTool({
+        return (await this._currentClient.callTool({
             name,
             arguments: args,
-        });
+        }));
     }
     serverClosed() {
         void this._currentClient?.close().catch(logUnhandledError);
@@ -64,33 +63,41 @@ export class ProxyBackend {
     }
     async _callContextSwitchTool(params) {
         try {
-            const factory = this._mcpProviders.find(factory => factory.name === params.name);
+            const factory = this._mcpProviders.find((factory) => factory.name === params.name);
             if (!factory)
-                throw new Error('Unknown connection method: ' + params.name);
+                throw new Error("Unknown connection method: " + params.name);
             await this._setCurrentClient(factory);
             return {
-                content: [{ type: 'text', text: '### Result\nSuccessfully changed connection method.\n' }],
+                content: [
+                    {
+                        type: "text",
+                        text: "### Result\nSuccessfully changed connection method.\n",
+                    },
+                ],
             };
         }
         catch (error) {
             return {
-                content: [{ type: 'text', text: `### Result\nError: ${error}\n` }],
+                content: [{ type: "text", text: `### Result\nError: ${error}\n` }],
                 isError: true,
             };
         }
     }
     _defineContextSwitchTool() {
         return {
-            name: 'browser_connect',
+            name: "browser_connect",
             description: [
-                'Connect to a browser using one of the available methods:',
-                ...this._mcpProviders.map(factory => `- "${factory.name}": ${factory.description}`),
-            ].join('\n'),
+                "Connect to a browser using one of the available methods:",
+                ...this._mcpProviders.map((factory) => `- "${factory.name}": ${factory.description}`),
+            ].join("\n"),
             inputSchema: zodToJsonSchema(z.object({
-                name: z.enum(this._mcpProviders.map(factory => factory.name)).default(this._mcpProviders[0].name).describe('The method to use to connect to the browser'),
+                name: z
+                    .enum(this._mcpProviders.map((factory) => factory.name))
+                    .default(this._mcpProviders[0].name)
+                    .describe("The method to use to connect to the browser"),
             }), { strictUnions: true }),
             annotations: {
-                title: 'Connect to a browser context',
+                title: "Connect to a browser context",
                 readOnlyHint: true,
                 openWorldHint: false,
             },
@@ -99,17 +106,25 @@ export class ProxyBackend {
     async _setCurrentClient(factory) {
         await this._currentClient?.close();
         this._currentClient = undefined;
-        const client = new Client({ name: 'Playwright MCP Proxy', version: packageJSON.version });
+        const client = new Client({
+            name: "Playwright MCP Proxy",
+            version: packageJSON.version,
+        });
         client.registerCapabilities({
             roots: {
-                listRoots: true,
+                listChanged: true,
             },
         });
-        client.setRequestHandler(ListRootsRequestSchema, () => ({ roots: this._roots }));
+        client.setRequestHandler(ListRootsRequestSchema, () => ({
+            roots: this._roots,
+        }));
         client.setRequestHandler(PingRequestSchema, () => ({}));
         const transport = await factory.connect();
         await client.connect(transport);
         this._currentClient = client;
     }
 }
-const clientsWithRoots = ['Visual Studio Code', 'Visual Studio Code - Insiders'];
+const clientsWithRoots = [
+    "Visual Studio Code",
+    "Visual Studio Code - Insiders",
+];