@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/response.js

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { renderModalStates } from './tab.js';
-import { truncateStringTo, formatTruncationLine } from './utils/truncate.js';
+import { renderModalStates } from "./tab.js";
+import { formatTruncationLine, truncateStringTo } from "./utils/truncate.js";
 const MAX_RESULT_CHARS = 25000;
 export class Response {
     _result = [];
@@ -48,13 +48,13 @@ export class Response {
         return this._isError;
     }
     result() {
-        return this._result.join('\n');
+        return this._result.join("\n");
     }
     addCode(code) {
         this._code.push(code);
     }
     code() {
-        return this._code.join('\n');
+        return this._code.join("\n");
     }
     addImage(image) {
         this._images.push(image);
@@ -73,7 +73,9 @@ export class Response {
         // All the async snapshotting post-action is happening here.
         // Everything below should race against modal states.
         if (this._includeSnapshot && this._context.currentTab())
-            this._tabSnapshot = await this._context.currentTabOrDie().captureSnapshot();
+            this._tabSnapshot = await this._context
+                .currentTabOrDie()
+                .captureSnapshot();
         for (const tab of this._context.tabs())
             await tab.updateTitle();
     }
@@ -84,30 +86,30 @@ export class Response {
         const response = [];
         // Start with command result.
         if (this._result.length) {
-            const resultText = this._result.join('\n');
+            const resultText = this._result.join("\n");
             const { text: clipped, truncated } = truncateStringTo(resultText, MAX_RESULT_CHARS);
-            response.push('### Result');
+            response.push("### Result");
             response.push(clipped);
             if (truncated) {
                 const total = resultText.length;
                 const shown = clipped.length;
-                response.push(formatTruncationLine(shown, total, { units: 'chars' }));
+                response.push(formatTruncationLine(shown, total, { units: "chars" }));
             }
-            response.push('');
+            response.push("");
         }
         // Then show events
         if (this._events.length) {
-            response.push('### Events');
-            response.push(this._events.join('\n'));
-            response.push('');
+            response.push("### Events");
+            response.push(this._events.join("\n"));
+            response.push("");
         }
         // Add code if it exists.
         if (this._includeCode && this._code.length) {
             response.push(`### Ran Playwright code
 \`\`\`js
-${this._code.join('\n')}
+${this._code.join("\n")}
 \`\`\``);
-            response.push('');
+            response.push("");
         }
         // List browser tabs.
         if (this._includeSnapshot || this._includeTabs)
@@ -115,20 +117,24 @@ ${this._code.join('\n')}
         // Add snapshot if provided.
         if (this._tabSnapshot?.modalStates.length) {
             response.push(...renderModalStates(this._context, this._tabSnapshot.modalStates));
-            response.push('');
+            response.push("");
         }
         else if (this._tabSnapshot) {
             response.push(renderTabSnapshot(this._tabSnapshot));
-            response.push('');
+            response.push("");
         }
         // Main response part
         const content = [
-            { type: 'text', text: response.join('\n') },
+            { type: "text", text: response.join("\n") },
         ];
         // Image attachments.
-        if (this._context.config.imageResponses !== 'omit') {
+        if (this._context.config.imageResponses !== "omit") {
             for (const image of this._images)
-                content.push({ type: 'image', data: image.data.toString('base64'), mimeType: image.contentType });
+                content.push({
+                    type: "image",
+                    data: image.data.toString("base64"),
+                    mimeType: image.contentType,
+                });
         }
         return { content, isError: this._isError };
     }
@@ -139,7 +145,7 @@ function renderTabSnapshot(tabSnapshot) {
         lines.push(`### New console messages`);
         for (const message of tabSnapshot.consoleMessages)
             lines.push(`- ${trim(message.toString(), 100)}`);
-        lines.push('');
+        lines.push("");
     }
     if (tabSnapshot.downloads.length) {
         lines.push(`### Downloads`);
@@ -149,38 +155,38 @@ function renderTabSnapshot(tabSnapshot) {
             else
                 lines.push(`- Downloading file ${entry.download.suggestedFilename()} ...`);
         }
-        lines.push('');
+        lines.push("");
     }
     lines.push(`### Page state`);
     lines.push(`- Page URL: ${tabSnapshot.url}`);
     lines.push(`- Page Title: ${tabSnapshot.title}`);
     lines.push(`- Page Snapshot:`);
-    lines.push('```yaml');
+    lines.push("```yaml");
     lines.push(tabSnapshot.ariaSnapshot);
-    lines.push('```');
-    return lines.join('\n');
+    lines.push("```");
+    return lines.join("\n");
 }
 function renderTabsMarkdown(tabs, force = false) {
     if (tabs.length === 1 && !force)
         return [];
     if (!tabs.length) {
         return [
-            '### Open tabs',
+            "### Open tabs",
             'No open tabs. Use the "browser_navigate" tool to navigate to a page first.',
-            '',
+            "",
         ];
     }
-    const lines = ['### Open tabs'];
+    const lines = ["### Open tabs"];
     for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[i];
-        const current = tab.isCurrentTab() ? ' (current)' : '';
+        const current = tab.isCurrentTab() ? " (current)" : "";
         lines.push(`- ${i}:${current} [${tab.lastTitle()}] (${tab.page.url()})`);
     }
-    lines.push('');
+    lines.push("");
     return lines;
 }
 function trim(text, maxLength) {
     if (text.length <= maxLength)
         return text;
-    return text.slice(0, maxLength) + '...';
+    return text.slice(0, maxLength) + "...";
 }

package/lib/sessionLog.js

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import fs from 'fs';
-import path from 'path';
-import { logUnhandledError } from './utils/log.js';
-import { outputFile } from './config.js';
+import fs from "fs";
+import path from "path";
+import { outputFile } from "./config.js";
+import { logUnhandledError } from "./utils/log.js";
 export class SessionLog {
     _folder;
     _file;
@@ -26,7 +26,7 @@ export class SessionLog {
     _flushEntriesTimeout;
     constructor(sessionFolder) {
         this._folder = sessionFolder;
-        this._file = path.join(this._folder, 'session.md');
+        this._file = path.join(this._folder, "session.md");
     }
     static async create(config, rootPath) {
         const sessionFolder = await outputFile(config, rootPath, `session-${Date.now()}`);
@@ -59,7 +59,7 @@ export class SessionLog {
                 return;
             }
         }
-        if (action.name === 'navigate') {
+        if (action.name === "navigate") {
             // Already logged at this location.
             const lastEntry = this._pendingEntries[this._pendingEntries.length - 1];
             if (lastEntry?.tabSnapshot?.url === action.url)
@@ -71,8 +71,8 @@ export class SessionLog {
             code,
             tabSnapshot: {
                 url: tab.page.url(),
-                title: '',
-                ariaSnapshot: action.ariaSnapshot || '',
+                title: "",
+                ariaSnapshot: action.ariaSnapshot || "",
                 modalStates: [],
                 consoleMessages: [],
                 downloads: [],
@@ -90,13 +90,13 @@ export class SessionLog {
         clearTimeout(this._flushEntriesTimeout);
         const entries = this._pendingEntries;
         this._pendingEntries = [];
-        const lines = [''];
+        const lines = [""];
         for (const entry of entries) {
-            const ordinal = (++this._ordinal).toString().padStart(3, '0');
+            const ordinal = (++this._ordinal).toString().padStart(3, "0");
             if (entry.toolCall) {
-                lines.push(`### Tool call: ${entry.toolCall.toolName}`, `- Args`, '```json', JSON.stringify(entry.toolCall.toolArgs, null, 2), '```');
+                lines.push(`### Tool call: ${entry.toolCall.toolName}`, `- Args`, "```json", JSON.stringify(entry.toolCall.toolArgs, null, 2), "```");
                 if (entry.toolCall.result) {
-                    lines.push(entry.toolCall.isError ? `- Error` : `- Result`, '```', entry.toolCall.result, '```');
+                    lines.push(entry.toolCall.isError ? `- Error` : `- Result`, "```", entry.toolCall.result, "```");
                 }
             }
             if (entry.userAction) {
@@ -104,18 +104,20 @@ export class SessionLog {
                 delete actionData.ariaSnapshot;
                 delete actionData.selector;
                 delete actionData.signals;
-                lines.push(`### User action: ${entry.userAction.name}`, `- Args`, '```json', JSON.stringify(actionData, null, 2), '```');
+                lines.push(`### User action: ${entry.userAction.name}`, `- Args`, "```json", JSON.stringify(actionData, null, 2), "```");
             }
             if (entry.code) {
-                lines.push(`- Code`, '```js', entry.code, '```');
+                lines.push(`- Code`, "```js", entry.code, "```");
             }
             if (entry.tabSnapshot) {
                 const fileName = `${ordinal}.snapshot.yml`;
-                fs.promises.writeFile(path.join(this._folder, fileName), entry.tabSnapshot.ariaSnapshot).catch(logUnhandledError);
+                fs.promises
+                    .writeFile(path.join(this._folder, fileName), entry.tabSnapshot.ariaSnapshot)
+                    .catch(logUnhandledError);
                 lines.push(`- Snapshot: ${fileName}`);
             }
-            lines.push('', '');
+            lines.push("", "");
         }
-        this._sessionFileQueue = this._sessionFileQueue.then(() => fs.promises.appendFile(this._file, lines.join('\n')));
+        this._sessionFileQueue = this._sessionFileQueue.then(() => fs.promises.appendFile(this._file, lines.join("\n")));
     }
 }

package/lib/tab.js

@@ -13,17 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { EventEmitter } from 'events';
-import { callOnPageNoTrace, waitForCompletion } from './tools/utils.js';
-import { logUnhandledError } from './utils/log.js';
-import { ManualPromise } from './utils/manualPromise.js';
+import { EventEmitter } from "events";
+import { callOnPageNoTrace, waitForCompletion } from "./tools/utils.js";
+import { logUnhandledError } from "./utils/log.js";
+import { ManualPromise } from "./utils/manualPromise.js";
 export const TabEvents = {
-    modalState: 'modalState'
+    modalState: "modalState",
 };
 export class Tab extends EventEmitter {
     context;
     page;
-    _lastTitle = 'about:blank';
+    _lastTitle = "about:blank";
     _consoleMessages = [];
     _recentConsoleMessages = [];
     _requests = new Map();
@@ -35,19 +35,19 @@ export class Tab extends EventEmitter {
         this.context = context;
         this.page = page;
         this._onPageClose = onPageClose;
-        page.on('console', event => this._handleConsoleMessage(messageToConsoleMessage(event)));
-        page.on('pageerror', error => this._handleConsoleMessage(pageErrorToConsoleMessage(error)));
-        page.on('request', request => this._requests.set(request, null));
-        page.on('response', response => this._requests.set(response.request(), response));
-        page.on('close', () => this._onClose());
-        page.on('filechooser', chooser => {
+        page.on("console", (event) => this._handleConsoleMessage(messageToConsoleMessage(event)));
+        page.on("pageerror", (error) => this._handleConsoleMessage(pageErrorToConsoleMessage(error)));
+        page.on("request", (request) => this._requests.set(request, null));
+        page.on("response", (response) => this._requests.set(response.request(), response));
+        page.on("close", () => this._onClose());
+        page.on("filechooser", (chooser) => {
             this.setModalState({
-                type: 'fileChooser',
-                description: 'File chooser',
+                type: "fileChooser",
+                description: "File chooser",
                 fileChooser: chooser,
             });
         });
-        page.on('dialog', dialog => this._dialogShown(dialog));
+        page.on("dialog", (dialog) => this._dialogShown(dialog));
         // page.on('download', download => {
         //   void this._downloadStarted(download);
         // });
@@ -66,14 +66,14 @@ export class Tab extends EventEmitter {
         this.emit(TabEvents.modalState, modalState);
     }
     clearModalState(modalState) {
-        this._modalStates = this._modalStates.filter(state => state !== modalState);
+        this._modalStates = this._modalStates.filter((state) => state !== modalState);
     }
     modalStatesMarkdown() {
         return renderModalStates(this.context, this.modalStates());
     }
     _dialogShown(dialog) {
         this.setModalState({
-            type: 'dialog',
+            type: "dialog",
             description: `"${dialog.type()}" dialog with message "${dialog.message()}"`,
             dialog,
         });
@@ -82,7 +82,7 @@ export class Tab extends EventEmitter {
         const entry = {
             download,
             finished: false,
-            outputFile: await this.context.outputFile(download.suggestedFilename())
+            outputFile: await this.context.outputFile(download.suggestedFilename()),
         };
         this._downloads.push(entry);
         await download.saveAs(entry.outputFile);
@@ -103,7 +103,7 @@ export class Tab extends EventEmitter {
     }
     async updateTitle() {
         await this._raceAgainstModalStates(async () => {
-            this._lastTitle = await callOnPageNoTrace(this.page, page => page.title());
+            this._lastTitle = await callOnPageNoTrace(this.page, (page) => page.title());
         });
     }
     lastTitle() {
@@ -113,34 +113,34 @@ export class Tab extends EventEmitter {
         return this === this.context.currentTab();
     }
     async waitForLoadState(state, options) {
-        await callOnPageNoTrace(this.page, page => page.waitForLoadState(state, options).catch(logUnhandledError));
+        await callOnPageNoTrace(this.page, (page) => page.waitForLoadState(state, options).catch(logUnhandledError));
     }
     async navigate(url) {
         this._clearCollectedArtifacts();
         // const downloadEvent = callOnPageNoTrace(this.page, page => page.waitForEvent('download').catch(logUnhandledError));
         const downloadEvent = Promise.resolve(undefined);
         try {
-            await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+            await this.page.goto(url, { waitUntil: "domcontentloaded" });
         }
         catch (_e) {
             const e = _e;
-            const mightBeDownload = e.message.includes('net::ERR_ABORTED') // chromium
-                || e.message.includes('Download is starting'); // firefox + webkit
+            const mightBeDownload = e.message.includes("net::ERR_ABORTED") || // chromium
+                e.message.includes("Download is starting"); // firefox + webkit
             if (!mightBeDownload)
                 throw e;
             // on chromium, the download event is fired *after* page.goto rejects, so we wait a lil bit
             const download = await Promise.race([
                 downloadEvent,
-                new Promise(resolve => setTimeout(resolve, 3000)),
+                new Promise((resolve) => setTimeout(resolve, 3000)),
             ]);
             if (!download)
                 throw e;
             // Make sure other "download" listeners are notified first.
-            await new Promise(resolve => setTimeout(resolve, 500));
+            await new Promise((resolve) => setTimeout(resolve, 500));
             return;
         }
         // Cap load event to 5 seconds, the page is operational at this point.
-        await this.waitForLoadState('load', { timeout: 5000 });
+        await this.waitForLoadState("load", { timeout: 5000 });
     }
     consoleMessages() {
         return this._consoleMessages;
@@ -166,17 +166,17 @@ export class Tab extends EventEmitter {
             tabSnapshot.consoleMessages = this._recentConsoleMessages;
             this._recentConsoleMessages = [];
         }
-        return tabSnapshot ?? {
+        return (tabSnapshot ?? {
             url: this.page.url(),
-            title: '',
-            ariaSnapshot: '',
+            title: "",
+            ariaSnapshot: "",
             modalStates,
             consoleMessages: [],
             downloads: [],
-        };
+        });
     }
     _javaScriptBlocked() {
-        return this._modalStates.some(state => state.type === 'dialog');
+        return this._modalStates.some((state) => state.type === "dialog");
     }
     async _raceAgainstModalStates(action) {
         if (this.modalStates().length)
@@ -203,15 +203,15 @@ export class Tab extends EventEmitter {
         // This avoids invalidating refs obtained from browser_get_snapshot while still
         // initializing the mapping when needed (e.g., after navigation).
         await this.page._snapshotForAI();
-        return params.map(param => this.page.locator(`aria-ref=${param.ref}`));
+        return params.map((param) => this.page.locator(`aria-ref=${param.ref}`));
     }
     async waitForTimeout(time) {
         if (this._javaScriptBlocked()) {
-            await new Promise(f => setTimeout(f, time));
+            await new Promise((f) => setTimeout(f, time));
             return;
         }
-        await callOnPageNoTrace(this.page, page => {
-            return page.evaluate(() => new Promise(f => setTimeout(f, 1000)));
+        await callOnPageNoTrace(this.page, (page) => {
+            return page.evaluate(() => new Promise((f) => setTimeout(f, 1000)));
         });
     }
 }
@@ -237,13 +237,15 @@ function pageErrorToConsoleMessage(errorOrValue) {
     };
 }
 export function renderModalStates(context, modalStates) {
-    const result = ['### Modal state'];
+    const result = ["### Modal state"];
     if (modalStates.length === 0)
-        result.push('- There is no modal state present');
+        result.push("- There is no modal state present");
     for (const state of modalStates) {
-        const tool = context.tools.filter(tool => 'clearsModalState' in tool).find(tool => tool.clearsModalState === state.type);
+        const tool = context.tools
+            .filter((tool) => "clearsModalState" in tool)
+            .find((tool) => tool.clearsModalState === state.type);
         result.push(`- [${state.description}]: can be handled by the "${tool?.schema.name}" tool`);
     }
     return result;
 }
-const tabSymbol = Symbol('tabSymbol');
+const tabSymbol = Symbol("tabSymbol");

package/lib/tools/common.js

@@ -13,16 +13,16 @@
  * 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 { z } from "zod";
+import { defineTabTool, defineTool } from "./tool.js";
 const close = defineTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_close',
-        title: 'Close browser',
-        description: 'Close the page',
+        name: "browser_close",
+        title: "Close browser",
+        description: "Close the page",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (context, params, response) => {
         await context.closeBrowserContext();
@@ -31,25 +31,25 @@ const close = defineTool({
     },
 });
 const resize = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_resize',
-        title: 'Resize browser window',
-        description: 'Resize the browser window',
+        name: "browser_resize",
+        title: "Resize browser window",
+        description: "Resize the browser window",
         inputSchema: z.object({
-            width: z.number().describe('Width of the browser window'),
-            height: z.number().describe('Height of the browser window'),
+            width: z.number().describe("Width of the browser window"),
+            height: z.number().describe("Height of the browser window"),
         }),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         response.addCode(`await page.setViewportSize({ width: ${params.width}, height: ${params.height} });`);
         await tab.waitForCompletion(async () => {
-            await tab.page.setViewportSize({ width: params.width, height: params.height });
+            await tab.page.setViewportSize({
+                width: params.width,
+                height: params.height,
+            });
         });
     },
 });
-export default [
-    close,
-    resize
-];
+export default [close, resize];

package/lib/tools/console.js

@@ -13,21 +13,21 @@
  * 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 console = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_console_messages',
-        title: 'Get console messages',
-        description: 'Returns all console messages',
+        name: "browser_console_messages",
+        title: "Get console messages",
+        description: "Returns all console messages",
         inputSchema: z.object({}),
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
-        tab.consoleMessages().map(message => response.addResult(message.toString()));
+        tab
+            .consoleMessages()
+            .map((message) => response.addResult(message.toString()));
     },
 });
-export default [
-    console,
-];
+export default [console];

package/lib/tools/dialogs.js

@@ -13,25 +13,30 @@
  * 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 handleDialog = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_handle_dialog',
-        title: 'Handle a dialog',
-        description: 'Handle a dialog',
+        name: "browser_handle_dialog",
+        title: "Handle a dialog",
+        description: "Handle a dialog",
         inputSchema: z.object({
-            accept: z.boolean().describe('Whether to accept the dialog.'),
-            promptText: z.string().optional().describe('The text of the prompt in case of a prompt dialog.'),
+            accept: z.boolean().describe("Whether to accept the dialog."),
+            promptText: z
+                .string()
+                .optional()
+                .describe("The text of the prompt in case of a prompt dialog."),
         }),
-        type: 'action',
+        type: "action",
     },
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
-        const dialogState = tab.modalStates().find(state => state.type === 'dialog');
+        const dialogState = tab
+            .modalStates()
+            .find((state) => state.type === "dialog");
         if (!dialogState)
-            throw new Error('No dialog visible');
+            throw new Error("No dialog visible");
         tab.clearModalState(dialogState);
         await tab.waitForCompletion(async () => {
             if (params.accept)
@@ -40,8 +45,6 @@ export const handleDialog = defineTabTool({
                 await dialogState.dialog.dismiss();
         });
     },
-    clearsModalState: 'dialog',
+    clearsModalState: "dialog",
 });
-export default [
-    handleDialog,
-];
+export default [handleDialog];